ITP 104 Midterm
ID
#id (ex: #firstname) Selects the element with id="firstname" #firstname { background-color: yellow; } The #id selector styles the element with the specified id.
HTTP status codes
(tells browser something is wrong or everything is good) ‣ 200 OK ‣ 301 Moved Permanently ‣ 302 Not Found ‣ 304 Not Modified 401 Unauthorized 403 Forbidden 404 Not Found 500 Internal Server Error
Class
.class (ex: .intro) Selects all elements with class="intro" .intro { background-color: yellow; } The .class selector selects elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the name of the class. You can also specify that only specific HTML elements should be affected by a class. To do this, start with the element name, then write the period (.) character, followed by the name of the class (look at Example 1 below). HTML elements can also refer to more than one class (look at Example 2 below).
3 Steps to create a two-column layout:
1. Start with a <div> that will act as a container for the entire web page. Let's give it an ID of outercontainer just to keep organized. 2. Within the outercontainer <div>, add a <div> per section you want. So if we want to re-create the New York Times article as above, it would look like the following: 3. Set floats and widths for divs that need to go side-by-side. Note that divs naturally like to stack veritcally on top of each other. They do not like to go side-by-side with other divs.
CSS Pseudo-Classes
: = pseudo class :hover Select objects on mouseover. :active Select an active element. Typically triggered when mouse button is down. :link Select an unvisited link. :visited Select a visited link.
CSS Pseudo-Classes
: = pseudo class Selects elements at a certain state :hover Select objects on mouseover. :active Select an active element. Typically triggered when mouse button is down. :link Select an unvisited link. :visited Select a visited link.
The basic HTML skeleton
<!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> </html>
FeedbackForm:
<form method="POST" action="http://www.usc.edu/cgi-bin/feedback_form/[email protected]/Subject"> Adds more functionality than MailForm. Has three required fields - name, email, and subject. If any of required fields are not filled out (or present as hidden fields) will return error to user. Has two arguments (e-mail and subject) in action URL.
FormHandler:
<form method="POST" action="http://www.usc.edu/cgi-bin/form_handler"> Most powerful of the three scripts because it has lots of configurable fields (all starting with "FH_") Does not have any arguments in the action URL, but you can use "hidden" fields for all of them. Supports custom post-form message pages FH_Name: Will be inserted into "reply to" field of email message FH_Email: Will also be inserted into Reply-to: field FH_Subject: Subject line of e-mail FH_Topic: Will appear in subject line in parenthesis FH_Recipients: Who will receive the email (can put multiple entries) FH_OK_URL: Custom page for when the form is submitted, but must be an absolute URL FH_ERROR_URL: Custom page for when there is a problem submitting the form FH_Required_Fields: List which fields must be filled out with data. Use comma-separated list. FH_Display_Order: Order that fields will list in (comma separated). Default is alphabetical listings of fields. FH_RequireValidEmail: Checks for xxx@xxx syntax in email field FH_RequireUSCEmail: Basically checks for [email protected]
MailForm:
<form method="POST" action="http://www.usc.edu/cgi-bin/mail_form/[email protected]"> Simplest script to use Basic tool for sending contents of form to someone through e-mail.
HTML Form Tags
<form> tag: The form tag defines the beginning and end of a form. So a sample "start" form tag could be: action attribute: the "action" defines WHERE the form is submitted method attribute: the "method" defines which of two methods (get or post) is used to submit the data to the action page/script. Inside a form, there are four HTML tags that define the different form objects: input, textarea, and select (with option):
checkboxes
<input type="checkbox">
radio buttons
<input type="radio"> defines a radio button
text
<input type="text"> defines a one-line input field for text input: <form> First name:<br> <input type="text" name="firstname"><br> Last name:<br> <input type="text" name="lastname"> </form>
Concept of opening and closing tags
An HTML element usually consists of a start tag and end tag, with the content inserted in between: <tagname>Content goes here...</tagname> The HTML element is everything from the start tag to the end tag: <p>My first paragraph.</p>
Basic understanding of tables
An HTML table is defined with the <table> tag. Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag. <table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>
Centering text and sections
Centering can get tricky. Here are the two ways you should be vertically centering: 1. text-align Use when you want to align contents inside of an element to the center Example: 2. margin-left: auto; margin-right: auto Use when you want to align an entire element to the center of the browser Make sure you also give this element an width Example:
How to use <div> tags along with specific style properties such as margin, padding, float, width and height to create "boxes" that make up a page's design and layout.
Definition and Usage The <div> tag defines a division or a section in an HTML document. The <div> element is often used as a container for other HTML elements to style them with CSS or to perform certain tasks with JavaScript.
defaults
Different input objects have different ways of setting up "default" data. For instance, with text boxes a "value" attribute sets the default text for the box, whereas with checkboxes and radio buttons an attribute of checked='1′ sets up that item as "turned on" when the form loads.
tag attributes
HTML Attributes • All HTML elements can have attributes • Attributes provide additional information about an element • Attributes are always specified in the start tag • Attributes usually come in name/value pairs like: name="value"
Basic knowledge on how to style tables
HTML Table - Adding a Border If you do not specify a border for the table, it will be displayed without borders. A border is set using the CSS border property: table, th, td { border: 1px solid black; } HTML Table - Collapsed Borders If you want the borders to collapse into one border, add the CSS border-collapse property: table, th, td { border: 1px solid black; border-collapse: collapse; } HTML Table - Adding Cell Padding Cell padding specifies the space between the cell content and its borders. If you do not specify a padding, the table cells will be displayed without padding. To set the padding, use the CSS padding property: th, td { padding: 15px; } HTML Table - Left-align Headings By default, table headings are bold and centered. To left-align the table headings, use the CSS text-align property: th { text-align: left; } HTML Table - Adding Border Spacing Border spacing specifies the space between the cells. To set the border spacing for a table, use the CSS border-spacing property: table { border-spacing: 5px; } HTML Table - Cells that Span Many Columns To make a cell span more than one column, use the colspan attribute: <table style="width:100%"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>55577854</td> <td>55577855</td> </tr> </table> HTML Table - Cells that Span Many Rows To make a cell span more than one row, use the rowspan attribute: <table style="width:100%"> <tr> <th>Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>55577854</td> </tr> <tr> <td>55577855</td> </tr> </table> HTML Table - Adding a Caption To add a caption to a table, use the <caption> tag: <table style="width:100%"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$50</td> </tr> </table> A Special Style for One Table To define a special style for a special table, add an id attribute to the table: <table id="t01"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table> table#t01 { width: 100%; background-color: #f1f1c1; } • Use the HTML <table> element to define a table • Use the HTML <tr> element to define a table row • Use the HTML <td> element to define a table data • Use the HTML <th> element to define a table heading • Use the HTML <caption> element to define a table caption • Use the CSS border property to define a border • Use the CSS border-collapse property to collapse cell borders • Use the CSS padding property to add padding to cells • Use the CSS text-align property to align cell text • Use the CSS border-spacing property to set the spacing between cells • Use the colspan attribute to make a cell span many columns • Use the rowspan attribute to make a cell span many rows • Use the id attribute to uniquely define one table
Forms
HTML forms allow you to collect information from users for activities such as surveys, contact, and feedback pages. Forms are set to "submit" to a page (or more commonly a web script) that then saves and/or emails the form data. For the purposes of Web publishing we are only going to study the HTML to create forms and form objects, and not how to "process" the form. Form objects are places inside forms to collect different types of data from users. For instance, checkboxes collect yes/no (on or off) binary data, whereas radio buttons set up a series of options from which a user can only pick one. Form objects include: standard text boxes checkboxes radio buttons (large) textarea (multiline) boxes submit and reset buttons
tags vs elements
HTML is a markup language, which means that it is written with codes that can be read by a person without it needing to be compiled first. In other words, the text on a web page is "marked up" with these codes to give the web browser instructions on how to display the text. These markup tags are the HTML tags themselves. When you write HTML, you are writing HTML tags. All HTML tags are made up of a number of specific parts, including: • A less-than sign (<) • A word or character that determine which tag is being written • Any number of optional HTML attributes in the form of a pair (name="value") • And finally a greater-than sign (>) • Ex: <p>, <html>, <div>, <ul id="menu-list">, <a href="index.html"> These examples all include attributes that have been added to the opening HTML tags. • The <ul> is an unordered list that includes an ID attribute • The division has a class attribute • The anchor, or link, element includes the "href" attribute • The image tag with a "src" attribute What Are HTML Elements? According to the W3C HTML specification, an element is the basic building block of HTML and is typically made up of two tags: an opening tag and a closing tag. So far we have only looked at opening tags, which starts the elements. To end that element, you write the corresponding closing tags. For example, for the paragraph element you write this: <p></p> This is made up of the opening tag which we saw a moment ago as well as the closing tag -</p>. Closing tags are really just the opening tag repeated, but with a "forward slash" added directly after the "less than" symbol. Almost all HTML elements have an opening tag and a closing tag. These tags surround the text that will display on the web page. For example, to write a paragraph of text, you write the text to display on the page and then surround it with these tags: p>This is where you would write the text of the paragraph that you would like displayed on the webpage.</p> Some HTML elements do not have a closing tag. These are called "empty elements." Sometimes, they are also referred to as "singleton" or "void" elements. Empty elements are easy to use because you only have to include one tag in your web page and the browser will know what to do. For example, to add a single line break to your page you would use the <br> tag. Another common element that only includes an opening tag is the "image" element. For example: <img src="images/logo.png"> We saw this example earlier, but there is no closing tag for this image element. The browser would simply replace this code with the image that is referenced in the "href" attribute. In this case, that would be "logo.png." In general, when we refer to an HTML element or tag, we will use the term "element" to indicate that we are referring to all parts of the element (both the opening and closing tags). We only use "tag" when referring only one or the other. This is the proper use of these two terms, and we encourage you to use them properly—but just know that if you slip and interchange them a bit, you will still be understood by your new web development peers! An HTML element usually consists of a start tag and end tag, with the content inserted in between: <tagname>Content goes here...</tagname> The HTML element is everything from the start tag to the end tag: <p>My first paragraph.</p>
What is CSS? vs HTML?
HTML is the language for describing the structure of Web pages. HTML gives authors the means to: • Publish online documents with headings, text, tables, lists, photos, etc. • Retrieve online information via hypertext links, at the click of a button. • Design forms for conducting transactions with remote services, for use in searching for information, making reservations, ordering products, etc. • Include spread-sheets, video clips, sound clips, and other applications directly in their documents. CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. It allows one to adapt the presentation to different types of devices, such as large screens, small screens, or printers. CSS is independent of HTML and can be used with any XML-based markup language. The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments. This is referred to as the separation of structure (or: content) from presentation.
CSS selectors (ID, class, tag)
In CSS, selectors are patterns used to select the element(s) you want to style.
stylesheet vs inline style
Inline CSS An inline CSS is used to apply a unique style to a single HTML element. An inline CSS uses the style attribute of an HTML element. This example sets the text color of the <h1> element to blue: <h1 style="color:blue;">This is a Blue Heading</h1> An external style sheet can be written in any text editor. The file must not contain any HTML code, and must be saved with a .css extension. Here is how the "styles.css" looks: body { background-color: powderblue; } h1 { color: blue; } p { color: red; }
Margin
Margins are similar to padding. There are four margin properties: margin-top, margin-bottom, margin-left, and margin-right. There is also a shorthand property, margin, which uses the same syntax as the padding property. The key difference between margins and padding is that padding adds extra space inside the border, while margins add extra space outside the border: We've set the padding to a uniform 5px, and we've set the background color to provide a little contrast. The first box's margin is set to a uniform 40px. The second box's margin is set to four different values. (The equivalent shorthand setting is "margin: 20px 10px 40px 80px".)
Calculating widths with margin and padding
Note that padding and margin gets added to the the overall width of your div For example, if a div has a width of 300 pixels and a margin left and right of 10 pixels, the width of this div now becomes 300 + 10 + 10 = 320 pixels. Any padding also increases this final width. So if we added some padding and margin to the article and sidebar divs from the above example, we would have to adjust article and sidebar divs to ensure everything fit within the container div. Sample below:
Setting up columns with <div>
Ok - now that we get the concept of two-column layouts how do we build them using HTML and CSS? The answer is <div>! Last week we talked about the <div> tag. It is a HTML tag that is used to create sections or "boxes." It is a the building block of web pages. Remember that divs naturally: have a width of 100% - goes across the entire browser is as tall as whatever content inside it is
Layouts in web pages
So far we have built very simple web pages. Now it's time to look at how other, more complicated websites are building their web pages. How do other websites structure and display their content? Remember that websites, in their simplest form, are just another way to display information about something. So it is very important that a website is structured or laid out in a way that is easy for users to find important information quickly. If you look closely at popular websites, you may start to notice that most websites follow a certain pattern in how they organize content. There are certain tried-and-true ways to lay out content. two-column layout is one of them. The two-column layout is most commonly seen in typical news article pages. We can break down this article into sections like below. Note the article and sidebar section. They are two sections that are side by side, making two columns. The article section is a little wider than the sidebar section. This is typical of a two-column layout. There is usually one wider section which contains the more important information (like the news article itself) and one skinnier section which contains extra information (like related ads and articles).
CSS display
Specifies how elements are displayed. block Displayed as a block. Default value for <div> and <p>. inline Displayed as an inline element. Default value for <a>. none Not displayed. Does not take up any space on the page.
CSS visibility
Specifies whether an element is visible. visible-Default value. Visible on the page. hidden-Not visible on the page. Element still takes up space on the page.
syntax on inline styling vs using a stylesheet
Styling HTML with CSS CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work. It can control the layout of multiple web pages all at once. CSS can be added to HTML elements in 3 ways: • Inline - by using the style attribute in HTML elements • Internal - by using a <style> element in the <head> section • External - by using an external CSS file The most common way to add CSS, is to keep the styles in separate CSS files. However, here we will use inline and internal styling, because this is easier to demonstrate, and easier for you to try it yourself. Inline CSS An inline CSS is used to apply a unique style to a single HTML element. An inline CSS uses the style attribute of an HTML element. This example sets the text color of the <h1> element to blue: <h1 style="color:blue;">This is a Blue Heading</h1> Internal CSS An internal CSS is used to define a style for a single HTML page. An internal CSS is defined in the <head> section of an HTML page, within a <style> element: <!DOCTYPE html> <html> <head> <style> body {background-color: powderblue;} h1 {color: blue;} p {color: red;} </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> External CSS An external style sheet is used to define the style for many HTML pages. With an external style sheet, you can change the look of an entire web site, by changing one file! To use an external style sheet, add a link to it in the <head> section of the HTML page: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> An external style sheet can be written in any text editor. The file must not contain any HTML code, and must be saved with a .css extension. Here is how the "styles.css" looks: body { background-color: powderblue; } h1 { color: blue; } p { color: red; }
<label>
The <label> tag defines a label for an <input> element. The <label> element does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the <label> element, it toggles the control. The for attribute of the <label> tag should be equal to the id attribute of the related element to bind them together. <form action="/action_page.php"> <label for="male">Male</label> <input type="radio" name="gender" id="male" value="male"><br> <label for="female">Female</label> <input type="radio" name="gender" id="female" value="female"><br> <label for="other">Other</label> <input type="radio" name="gender" id="other" value="other"><br><br> <input type="submit" value="Submit"> </form>
<li>
The <li> tag defines a list item. The <li> tag is used in ordered lists(<ol>), unordered lists (<ul>), and in menu lists (<menu>). <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
<ol>
The <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical. Use the <li> tag to define list items. <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ol start="50"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
<option>
The <option> tag defines an option in a select list. <option> elements go inside a <select> or <datalist> element. <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select>
<p>
The <p> tag defines a paragraph. Browsers automatically add some space (margin) before and after each <p> element. The margins can be modified with CSS (with the margin properties). <p>This is some text in a paragraph.</p>
<select>
The <select> element is used to create a drop-down list. The <option> tags inside the <select> element define the available options in the list. <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select>
<span>
The <span> tag is used to group inline-elements in a document. The <span> tag provides no visual change by itself. The <span> tag provides a way to add a hook to a part of a text or a part of a document. <p>My mother has <span style="color:blue">blue</span> eyes.</p>
<strong>
The <strong> tag is a phrase tag. It defines important text. Tip: This tag is not deprecated, but it is possible to achieve richer effect with CSS. <strong>Strong text</strong> Bold
<textarea>
The <textarea> tag defines a multi-line text input control. A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier). The size of a text area can be specified by the cols and rows attributes, or even better; through CSS' height and width properties. <textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies. </textarea>
<ul>
The <ul> tag defines an unordered (bulleted) list. Use the <ul> tag together with the <li> tag to create unordered lists. <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
border
The CSS border properties allow you to specify the style, width, and color of an element's border The border-style property specifies what kind of border to display. The following values are allowed: • dotted - Defines a dotted border • dashed - Defines a dashed border • solid - Defines a solid border • double - Defines a double border • groove - Defines a 3D grooved border. The effect depends on the border-color value • ridge - Defines a 3D ridged border. The effect depends on the border-color value • inset - Defines a 3D inset border. The effect depends on the border-color value • outset - Defines a 3D outset border. The effect depends on the border-color value • none - Defines no border • hidden - Defines a hidden border The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border). p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.none {border-style: none;} p.hidden {border-style: hidden;} p.mix {border-style: dotted dashed solid double;} Border Width The border-width property specifies the width of the four borders. The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick. The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border). p.one { border-style: solid; border-width: 5px; } p.two { border-style: solid; border-width: medium; } p.three { border-style: solid; border-width: 2px 10px 4px 20px; } Border Color The border-color property is used to set the color of the four borders. The color can be set by: • name - specify a color name, like "red" • Hex - specify a hex value, like "#ff0000" • RGB - specify a RGB value, like "rgb(255,0,0)" • transparent The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border). If border-color is not set, it inherits the color of the element. p.one { border-style: solid; border-color: red; } p.two { border-style: solid; border-color: green; } p.three { border-style: solid; border-color: red green blue yellow; } Border - Individual Sides From the examples above you have seen that it is possible to specify a different border for each side. In CSS, there are also properties for specifying each of the borders (top, right, bottom, and left): p { border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid; } The example above gives the same result as this: p { border-style: dotted solid; } So, here is how it works: If the border-style property has four values: • border-style: dotted solid double dashed; o top border is dotted o right border is solid o bottom border is double o left border is dashed If the border-style property has three values: • border-style: dotted solid double; o top border is dotted o right and left borders are solid o bottom border is double If the border-style property has two values: • border-style: dotted solid; o top and bottom borders are dotted o right and left borders are solid If the border-style property has one value: • border-style: dotted; o all four borders are dotted The border-style property is used in the example above. However, it also works with border-width and border-color. Border - Shorthand Property As you can see from the examples above, there are many properties to consider when dealing with borders. To shorten the code, it is also possible to specify all the individual border properties in one property. The border property is a shorthand property for the following individual border properties: • border-width • border-style (required) • border-color p { border: 5px solid red; } You can also specify all the individual border properties for just one side: Left Border p { border-left: 6px solid red; background-color: lightgrey; } Bottom Border p { border-bottom: 6px solid red; background-color: lightgrey; } Rounded Borders The border-radius property is used to add rounded borders to an element: p { border: 2px solid red; border-radius: 5px; }
Float
The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow (in contrast to absolute positioning).
font-size
The font-size property sets the size of a font. div.a { font-size: 15px; } div.b { font-size: large; } div.c { font-size: 150%; }
Height
The height property sets the height of an element. The height of an element does not include padding, borders, or margins! If height: auto; the element will automatically adjust its height to allow its content to be displayed correctly. If height is set to a numeric value (like pixels, (r)em, percentages) then if the content does not fit within the specified height, it will overflow. How the container will handle the overflowing content is defined by the overflow property. <div class="step step1" style="display:block; height: 100%;" step="1"> div.a { height: auto; border: 1px solid black; } div.b { height: 50px; border: 1px solid black; }
margin
The margin property sets the margins for an element, and is a shorthand property for the following properties: • margin-top • margin-right • margin-bottom • margin-left If the margin property has four values: • margin: 10px 5px 15px 20px; o top margin is 10px o right margin is 5px o bottom margin is 15px o left margin is 20px If the margin property has three values: • margin: 10px 5px 15px; o top margin is 10px o right and left margins are 5px o bottom margin is 15px If the margin property has two values: • margin: 10px 5px; o top and bottom margins are 10px o right and left margins are 5px If the margin property has one value: • margin: 10px; o all four margins are 10px Note: Negative values are allowed. p { margin: 35px; }
text-align
The text-align property specifies the horizontal alignment of text in an element. div.a { text-align: center; } div.b { text-align: left; } div.c { text-align: right; } div.c { text-align: justify; }
textarea
The textarea tag creates a large (multiline) text area for a user to type sentences or paragraphs into. They automatically have scrollbars if needed. Like input tags they should have a name attribute. So a typical textarea block might be:
Cascading Style Sheets
There are three types of CSS: 1. External 2. Internal 3. Inline
Padding
Use when you want whitespace inside an element - useful for divs Example - the text inside the white div is way too close to the edge Use padding to create space inside the white div. You can specify padding-left, padding-right, padding-top, and/or padding-bottom
Margin
Use when you want whitespace outside an element Example - the purple div is way too close to the text on the right : Use margin to create space outside the purple div. You can specify margin-left, margin-right, margin-top, and/or margin-bottom
Centering things horizontally
You can center inline elements horizontally, within a block-level parent element, with just: This will work for inline, inline-block, inline-table, inline-flex, etc. .center-children { text-align: center; You can center a block-level element by giving it margin-left and margin-right of auto (and it has a set width, otherwise it would be full width and wouldn't need centering). That's often done with shorthand like this: .center-me { margin: 0 auto; } This will work no matter what the width of the block level element you're centering, or the parent. Note that you can't float an element to the center. There is a trick though. If you have two or more block-level elements that need to be centered horizontally in a row, chances are you'd be better served making them a different display type. Here's an example of making them inline-block and an example of flexbox: Unless you mean you have multiple block level elements stacked on top of each other, in which case the auto margin technique is still fine:
Margin and Padding
You may want to start adding some whitespace around your content. There are two ways to achieve this using CSS - margin and padding.
Compound CSS Selectors
comma means header and footer do the following CSS - now just have to write 1 rule find ID content and look for all the paragraphs inside content can specify some rules like that only if a direct child of content (no grandchildren) find its sibling
CSS display:none vs visibility:hidden
display: none - element does not occupy any space. visibility:hidden - element still occupies space.
DOM
every time write HTML creating a DOM structure Cross-platform way of representing HTML objects in a document. DOM - Document Object Model. creates tree - gets built as load HTML in browser header, footer, content are siblings (body is the parent) relationship between tags
select and option
select: the "select" tag defines the beginning and end of a drop-down (or select) menu. option: The "option" tag defines a single item in a select menu, similar to how the li tag defines a single item in a list. default: To set an option as the default (pre-selected) item you put selected='1′ in that option tag.
What is a tag and what is an attribute? And what do they look like?
• All HTML elements can have attributes • Attributes provide additional information about an element • Attributes are always specified in the start tag • Attributes usually come in name/value pairs like: name="value" HTML tags are the hidden keywords within a web page that define how your web browser must format and display the content. Most tags must have two parts, an opening and a closing part. For example, <html> is the opening tag and </html>is the closing tag. Note that the closing tag has the same text as the opening tag, but has an additional forward-slash ( / ) character. I tend to interperet this as the "end" or "close" character. There are some tags that are an exception to this rule, and where a closing tag is not required. The <img> tag for showing images is one example of this. Each HTML file must have the essential tags for it to be valid, so that web browsers can understand it and display it correctly. The rest of the HTML file can contain as little or as many tags as you want to display your content.
Calculating column widths for the perfect grid.
• Divs by nature as wide as can be and only as tall as contents inside it • Tries not to use height that much because once its set its set • Can do width: 100% to fit the size of the container • Divs stack from top to bottom and its in order in the way that we code them ◦ If want them side by side need CSS to overwrite the default • Make both side bars float the same way (ex: both float: left) to make them next to each other • Clearing ◦ It clears the float (?) • Padding (no indication of left or right) is padding all around • When add padding, the article div grew so the width grew ◦ Need to change width of article + sidebar
Inside a HTML File
‣ HTML (Hyper Text Markup Language) - used to structure the content of the page ‣ CSS (Cascading Stylesheet) -used to control the look and feel of the page ‣ Web browsers like Chrome, Safari, etc open the HTML file and render it as coded
How do we get from a computer to a website?
‣ HTTP - a protocol (hyper text transfer protocol) • A way for your computer (the client) and the server to talk to each other • There are a few protocols but this is the most popular ‣ When do http://www.google.com doing a HTTP request • HTTP response, OK (200)! and also returns a HTML document (.html file) ‣ Browser renders the HTML file • Fetches assets • Runs client-side scripts (e.g. JavaScript)
HTML Text Editors
‣ Software designed to edit HTML code ‣ Often provides syntax highlighting, autocompletion, etc. ‣ Popular HTML Text Editors: • Use Sublime Text
HTML
◦ HyperText Markup Language Standard language for creating websites "Markup" means HTML is used to annotate or tag text in the document
Let's talk about WWW
◦ Think of the Internet as a system of roads ◦ Internet has addresses ‣ Helps people go from one website to another ‣ Each website has a house = server (machine connected to the internet) ◦ Internet is a road for a bunch of machines to talk to each other -ISP (internet service provider)
Padding
Padding In "Borders", you might have noticed that in all border examples, the text and the borders were rather close together. An element's padding is the element's "extra space inside the border". There are four padding properties: padding-top, padding-bottom, padding-left, and padding-right. You may set these values to px, em, percentages, or any other valid length unit. Let's take a look at an example. Example 3.19, "Non-uniform Padding" specifies two CSS rules: • The first rule applies to all div elements, and changes the background, the text color, and the font family. The gray background is necessary so that we can easily see padding for all divs, while the other two properties are purely cosmetic. • The second rule applies only to div elements with a class of padded. Any div with this class will have special, non-uniform padding. The example includes a padded div, followed an ordinary div for comparison. The padded div has padding that varies for each side of text, as we specified. It turns out that 5em ("five m-widths") is considerably larger than 10px, so the text looks shoved over to the right. As for the ordinary div, we didn't specify any padding rules for it, so it takes the browser default padding: 0px on all sides. Padding Shorthand Notation There is also a shorthand property, padding. This property allows you to specify all your padding on one line: • padding: 20px — Padding for all four sides is 20 pixels. • padding: 20px 80px — Padding for the top and bottom is 20 pixels, the left and right is 80 pixels. • padding: 20px 80px 10px — Padding for the top is 20 pixels, the left and right is 80 pixels, and the bottom is 10 pixels. • padding: 20px 80px 10px 40px — Padding for the top is 20 pixels, the right is 80 pixels, the bottom is 10 pixels, and the left is 40 pixels. As with the previous example, Example 3.20, "Shorthand Padding" provides basic styling for all divs, and then uses classes to change the padding for specific divs. For additional decoration, we've also added a dark red border to each div. The padding is completely contained within the borders. For example, the inside edge of the first div's border is 20px from the far left edge of the text. Try changing the size of the borders. Even if you make the border very thick, the padding stays the same thickness. Of these four notations, the first (same padding for all sides) is the most commonly used and the easiest to remember. However, if you want to baffle and impress your web designer friends, you should memorize all four.
Tag
Tag selectors The tag selector is used to redefine existing HTML tags. Select this option if you want to change the formatting options for an HTML tag, such as the <h1> (heading 1) tag or the <ul> (unordered list) tag. In many cases, redefining existing HTML tags with CSS has advantages over creating new styles. For example, content formatted with the Heading 1 tag is well recognized on the Web as the most important text on a page. For that reason, many search engines give priority to text formatted with the Heading 1 tag. Similarly, the hierarchical structure of the <h1> to <h6> tags helps ensure that even if a visitor to your site changes the text size in his or her Web browser, text formatted with the Heading 1 tag is still larger relative to text formatted with an Heading 2 tag, which is larger than text formatted with the Heading 3 tag, and so on. The ability to change the appearance of headings and other tags with CSS makes it possible to retain these advantages while still being able to use the font, size, color, spacing, and other formatting options that you prefer in your Web design. When you use the tag selector, the style definition is applied automatically to any text or other element that's been formatted with the corresponding tag. Thus, if you've formatted a headline with the <h1> tag and then create a new <h1> style, the formatting you used to define the style will apply automatically to the headline as soon as the style is created.
<a>
The <a> tag defines a hyperlink, which is used to link from one page to another. The most important attribute of the <a> element is the href attribute, which indicates the link's destination. By default, links will appear as follows in all browsers: • An unvisited link is underlined and blue • A visited link is underlined and purple • An active link is underlined and red <a href="https://www.w3schools.com">Visit W3Schools.com!</a>
<br>
The <br> tag inserts a single line break. The <br> tag is an empty tag which means that it has no end tag. This text contains<br>a line break.
Width
The <div> element is similar to the <span> element, however the <span> element is used with inline elements, whereas the <div> element is used with block-level elements. The <div> element accepts "flow content", which refers to most elements that can appear inside a document's body. The <div> should only be used as a last resort when there isn't another suitable HTML element to use. HTML5 has introduced a number of new elements that can (and should) be used in place of the <div>. These include <article>, <aside>, <header>, and <footer>and others. See below under "Differences Between HTML 4 & HTML 5" for more information on this. You can style an element using inline styles, where you apply the styles via the styleattribute.
<div>
The <div> tag defines a division or a section in an HTML document. The <div> element is often used as a container for other HTML elements to style them with CSS or to perform certain tasks with JavaScript. <div style="background-color:lightblue"> <h3>This is a heading</h3> <p>This is a paragraph.</p> </div>
<em>
The <em> tag is a phrase tag. It renders as emphasized text. Tip: This tag is not deprecated, but it is possible to achieve richer effect with CSS. <em>Emphasized text</em> Italics
<form>
The <form> tag is used to create an HTML form for user input. The <form> element can contain one or more of the following form elements: • <input> • <textarea> • <button> • <select> • <option> • <optgroup> • <fieldset> • <label> <form action="/action_page.php" method="get"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit"> </form>
<h1> to <h6>
The <h1> to <h6> tags are used to define HTML headings. <h1> defines the most important heading. <h6> defines the least important heading. <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6>
<hr>
The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic). The <hr> element is used to separate content (or define a change) in an HTML page. <h1>HTML</h1> <p>HTML is a language for describing web pages.....</p> <hr> <h1>CSS</h1> <p>CSS defines how to display HTML elements.....</p>
<img>
The <img> tag defines an image in an HTML page. The <img> tag has two required attributes: src and alt. <img src="smiley.gif" alt="Smiley face" height="42" width="42">
<input>
The <input> tag specifies an input field where the user can enter data. <input> elements are used within a <form> element to declare input controls that allow users to input data. An input field can vary in many ways, depending on the type attribute. <form action="/action_page.php"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit"> </form>
Basic understanding of "float" that forces divs to stack horizontally, thus creating columns.
The CSS float property specifies how an element should float. The CSS clear property specifies what elements can float beside the cleared element and on which side. The float Property The float property is used for positioning and layout on web pages. The float property can have one of the following values: • left - The element floats to the left of its container • right- The element floats to the right of its container • none - The element does not float (will be displayed just where it occurs in the text). This is default • inherit - The element inherits the float value of its parent In its simplest use, the float property can be used to wrap text around images. The clear Property The clear property specifies what elements can float beside the cleared element and on which side. The clear property can have one of the following values: • none - Allows floating elements on both sides. This is default • left - No floating elements allowed on the left side • right- No floating elements allowed on the right side • both - No floating elements allowed on either the left or the right side • inherit - The element inherits the clear value of its parent The most common way to use the clear property is after you have used a float property on an element. When clearing floats, you should match the clear to the float: If an element is floated to the left, then you should clear to the left. Your floated element will continue to float, but the cleared element will appear below it on the web page. The following example clears the float to the left. Means that no floating elements are allowed on the left side (of the div):
padding
The CSS padding properties are used to generate space around an element's content, inside of any defined borders. With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left). CSS has properties for specifying the padding for each side of an element: • padding-top • padding-right • padding-bottom • padding-left All the padding properties can have the following values: • length - specifies a padding in px, pt, cm, etc. • % - specifies a padding in % of the width of the containing element • inherit - specifies that the padding should be inherited from the parent element Note: Negative values are not allowed. The following example sets different padding for all four sides of a <div> element: div { padding-top: 50px; padding-right: 30px; padding-bottom: 50px; padding-left: 80px; } Padding - Shorthand Property To shorten the code, it is possible to specify all the padding properties in one property. The padding property is a shorthand property for the following individual padding properties: • padding-top • padding-right • padding-bottom • padding-left So, here is how it works: If the padding property has four values: • padding: 25px 50px 75px 100px; o top padding is 25px o right padding is 50px o bottom padding is 75px o left padding is 100px div { padding: 25px 50px 75px 100px; } If the padding property has three values: • padding: 25px 50px 75px; o top padding is 25px o right and left paddings are 50px o bottom padding is 75px div { padding: 25px 50px 75px; } If the padding property has two values: • padding: 25px 50px; o top and bottom paddings are 25px o right and left paddings are 50px div { padding: 25px 50px; } If the padding property has one value: • padding: 25px; o all four paddings are 25px div { padding: 25px; } The CSS width property specifies the width of the element's content area. The content area is the portion inside the padding, border, and margin of an element (the box model). So, if an element has a specified width, the padding added to that element will be added to the total width of the element. This is often an undesirable result. In the following example, the <div> element is given a width of 300px. However, the actual rendered width of the <div> element will be 350px (300px + 25px of left padding + 25px of right padding): div { width: 300px; padding: 25px; } To keep the width at 300px, no matter the amount of padding, you can use the box-sizing property. This causes the element to maintain its width; if you increase the padding, the available content space will decrease. Here is an example: div { width: 300px; padding: 25px; box-sizing: border-box; }
<input> tag:
The HTML input tag creates the majority of our form objects: text boxes, radio buttons, checkboxes and three types of buttons (submit, reset and image). type attribute: The type attribute of the input tag defines which "type" of input object is being built such as text boxes, checkboxes, submit buttons, etc. name attribute: The name is used on most form objects to define the "name" of the object. For instance, if one text box collects the user's first name, and another one collect's the user's last name, and they type in craig and chris, how would you know which is their first name and which is their last name? The name attribute gives a "name" to each piece of data you collect. inputs have internal closes, like hr tags. So a complete input tag might be:
color
The color property specifies the color of text. Tip: Use a background color combined with a text color that makes the text easy to read. body { color: red; } h1 { color: #00ff00; } p.ex { color: rgb(0,0,255); }
class vs id
Using The class Attribute The class attribute specifies one or more class names for an HTML element. The class name can be used by CSS and JavaScript to perform certain tasks for elements with the specified class name. In CSS, to select elements with a specific class, write a period (.) character, followed by the name of the class: <style> .city { background-color: tomato; color: white; padding: 10px; } </style> <h2 class="city">London</h2> <p>London is the capital of England.</p> <h2 class="city">Paris</h2> <p>Paris is the capital of France.</p> <h2 class="city">Tokyo</h2> <p>Tokyo is the capital of Japan.</p> Using The id Attribute The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document). The id value can be used by CSS and JavaScript to perform certain tasks for a unique element with the specified id value. In CSS, to select an element with a specific id, write a hash (#) character, followed by the id of the element: <style> #myHeader { background-color: lightblue; color: black; padding: 40px; text-align: center; } </style> <h1 id="myHeader">My Header</h1> Difference Between Class and ID An HTML element can only have one unique id that belongs to that single element, while a class name can be used by multiple elements: <style> /* Style the element with the id "myHeader" */ #myHeader { background-color: lightblue; color: black; padding: 40px; text-align: center; } /* Style all elements with the class name "city" */ .city { background-color: tomato; color: white; padding: 10px; } </style> <!-- A unique element --> <h1 id="myHeader">My Cities</h1> <!-- Multiple similar elements --> <h2 class="city">London</h2> <p>London is the capital of England.</p> <h2 class="city">Paris</h2> <p>Paris is the capital of France.</p> <h2 class="city">Tokyo</h2> <p>Tokyo is the capital of Japan.</p>