Technology Week 4
$20 TP4 CSS syntax
1. A CSS rule set consists of a selector and a declaration block. 2. A syple HTML document with CSS.
$1 TW4 You should try to style your links in a way that makes it clear which one has already been visited and which hasn't
1. Also avoid to open a new page in a new browser tab by default. 2. If people want to open a new tab, they will manage.
$10 TP4 CSS stands for Cascading Style Sheets
1. As a standard markup language, HTML only defines the content or components of a web document. 2. The World Wide Web (W3C) Consortium developed CSS to remove style formatting from HTML documents. 3. CSS defines how HTML elements are to be displayed on screen, paper, other media. 4. The style definitions are usually saved in external .css files. 5. Web browsers (e.g., FireFox, Safari, Chrome) can format web documents based on the information in the .css files. 6. People can change the display or format of web documents by changing the .css files. 7. CSS enables the design and content of web documents separate. 8. CSS allows for controlling the layout of multiple web pages all at once.
$20 TP4 Multiple pages, one style
1. Before CSS. 2. With CSS.
$20 TW4 Background image - repeat horizontally or vertically
1. By default, the background-image property repeats an image both horizontally and vertically. 2. Some images should be repeated only horizontally or vertically, or they will look strange. 3. If the image above is repeated only horizontally (background-repeat: repeat-x;), the background will look better.
$20 TW4 Why use CSS?
1. CSS is used to define styles for your web pages, including the design, layout and variations in display.
$20 TW4 CSS selectors
1. CSS selectors are used to "find" HTML elements based on their element name, id, class, attribute, and more.
$20 TP4 CSS
1. CSS stands for Cascading Style Sheets.
$20 TW4 What is CSS?
1. CSS stands for Cascading Style Sheets. 2. CSS describes how HTML elements are to be displayed on screen, paper, or in other media. 3. CSS saves a lot of work. 4. External stylesheets are stored in CSS files.
$100 TW4 CSS
1. CSS syntax. 2. CSS how to. 3. CSS colors. 4. CSS background. 5. CSS borders. 6. CSS margins. 7. CSS padding. 8. CSS height/width. 9. CSS outline. 10. CSS text.
$50 TW4 CSS syntax and selectors
1. CSS syntax. 2. CSS selectors. 3. The element selector. 4. The id selector. 5. The class selector. 6. Grouping selectors. 7. CSS comments.
$100 TP4 CSS
1. CSS. 2. Applying CSS. 3. CSS syntax. 4. CSS selectors. 5. CSS background. 6. CSS text. 7. CSS links. 8. CSS lists. 9. CSS tables.
$10 TP4 Having multiple CSS files come in particularly handy when we have multiple "display" devices
1. Desktop. 2. Mobile. 3. Tablet. 4. Printer.
$10 TP4 Internal Style Sheet
1. E.g., <!DOCTYPE html> <html> <head> <style> h1 {color: maroon; margin-lef: 40px;} </style> </head> 2. The internal style is defined within the <style> element, inside the <head> section of an HTML document. 3. The internal style applies to the whole web page.
$10 TP4 Links can be defined in different states
1. a:link defines the link when it is normal and unvisited. 2. a:visited defines the link when it has been visited. 3. a:hover defines the link when the mouse is over it. 4. a:active defines the link the moment it is clicked.
$5 TP4 When using the background shorthand property, the order of the property values is:
1. background-color 2. background-image 3. background-repeat 4. background-attachment 5. background-position
$5 TW4 CSS background properties:
1. background-color 2. background-image 3. background-repeat 4. background-attachment 5. background-position
$20 TW4 CSS table properties
1. border - sets all the border properties in one declaration. 2. border-collapse - specifies whether or not table borders should be collapsed. 3. border-spacing - specifies the distance between the borders of adjacent cells. 4. caption-side - specifies the placement of a table caption. 5. empty-cells - specifies whether or not to display borders and backgorund on empty cells in a table. 6. table-layout - sets the layout algorithm to be used for a table.
$10 TP4 The property "text-indent" specifies the indentation of the first line of a text
1. E.g., <!DOCTYPE html> <html> <head> <style> p {text-indent: 50px;} </style> </head> <body> <p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p> </body> </html>
$10 TP4 The property "list-style-image" specifies an image to be used as the list makers
1. E.g., <!DOCTYPE html> <html> <head> <style> ul {list-style-image: url{"sqpurple.gif");} </style> </head> <body> <ul> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> </body> <html>
$10 TP4 The property "border" can specify a border for <table>, <th>, and <td> elements
1. E.g., <!DOCTYPE html> <html><head><style> table, th, td {border: 1px solid black;} </style></head> <body> <table> <tr><th>Firstname</th> <th>Lasname</th> </tr> <tr><td>Peter</td> <td>Griffin</td> </tr> <tr><td>Lois</td> <td>Griffin</td> </tr> </table> </body></html>
$10 TP4 The properties "color" or "background-color" can format the border, text, and background color of <th>, <td>, and <table> elements
1. E.g., <!DOCTYPE html> <html><head><style> table, th, td {border: 1px solid black;} th {background-color: red; color: white;} tr {background-color: linen;} </style></head> <body> <table> <tr><th>Firstname</th> <th>Lastname</th></tr> <tr><td>Peter</td> <td>Griffin</td></tr> <tr><td>Lois</td> <td>Griffin</td></tr> </table> </body></html>
$5 TP4 The HTML elements with class="center" will be formatted based on the above style sheet
1. E.g., <h1 class="center">Red and center-aligned heading</h1> <p class="center">Red and center-aligned paragraph.</p>
$10 TP4 Inline Style Sheet
1. E.g., <p style="color: red">text</p>. 2. The inline style is defined by adding the style attribute to specific HTML tags. 3. The best practice is to separate presentation (style sheet) from content.
$5 TP4 Only the <p> elements with class="center" will be formatted based on the style sheet example
1. E.g., <p> class="center">This paragraph will be red and center-aligned.</p>
$10 TP4 The property "background-color" specifies the background color of an element
1. E.g., body {background-color: ivory;} 2. The value of background color can be specified as a color name (e.g., "navy"), an RGB value, or a HEX value. 3. W3C School provides a list of color names with HEX values supported by all browsers.
$10 TP4 The property "background-attachment" specifies whether the background image is fixed or scrolled with the web page
1. E.g., body {background-image: url("img_tree.png"); background-repeat: repeat-x; background-attachment: fixed; } 2. In the above example, the background image will remain fixed when you scroll the web page up and down. 3. By default, the background image will scroll with the web page.
$5 TP4 The background image does not repeat
1. E.g., body {background-image: url("img_tree.png"); backgorund-repeat: no-repeat;}
$5 TP4 The background image repeats vertically only
1. E.g., body {background-image: url("img_tree.png"); backgorund-repeat: repeat-y;}
$10 TP4 The property "background-image" specifies an image that is used as the background of an element
1. E.g., body {background-image: url("img_tree.png");} 2. "img_tree.png" is the file name of the background image enclosed in quotation marks and parentheses. 3. By default, the background image is tiled, repeating both horizontally and vertically.
$10 TP4 The property "background-position" specifies the position of background image
1. E.g., body {background-image: url{"img_tree.png"); background-repeat: repeat-x; background-position: right top; } 2. Possible values for position: top, bottom, left, right, center, and a combination (e.g., right top).
$5 TP4 The background image repeats horizontally only
1. E.g., body {background-image:url("img_tree.png"); background-repeat: repeat-x;}
$10 TP4 The property "color" specifies the color of the text
1. E.g., body {color: blue;} h1 {color: red;} 2. In the above example, the color of the text was formatted to be blue, and the color of heading h1 to be red. 3. E.g., <!DOCTYPE html> <html> <head><style> body {color: red;} </style></head> <body> <h1>This is heading 1</h1> <p>This is an ordinary paragraph. Notice that this text is blue. The default text-color for a page is defined in the body selector.</p> </body></html>
$10 TP4 The CSS selectors pointing to elements with the same style definitions can be grouped together
1. E.g., h1, h2, p {text-align: center; color: red] 2. The selectors grouped together are separated by commas.
$10 TP4 The property "background"--as a shorthand property--pecifies all the background properties in one single property to shorten the code
1. E.g., ody {background: linen url("img_tree.png") repeat-x fixed right top;}. 2. When using the background shorthand property, the order of the property values is: 3. One or more of the property values can be missing as long as the other ones are in order. 4. E.g., body {background: #faf0e6 url("img_tree.png") no-repeat right top;}
$10 TP4 The element selector points to the HTML element based on the element name defined in the style sheet
1. E.g., p {text-align: center; color: red;} 2. All the <p> elements in the HTML document will be formatted based on the style sheet.
$10 TP4 Before CSS
1. Every page required its style to be defined inside the page itself, even if it was similar to other pages.
$20 TW4 Three ways to insert CSS
1. External style sheet. 2. Internal style sheet. 3. Inline style.
$5 TW4 Gestalt Laws are simple principles or suggestions of how different elements are perceived when combining them in a certain way or order
1. Gestalt laws can help you to structure your content and to create a sense of belonging together on your site. 2. They hep you to draw attention to certain elements and establish balance and stability within your design. 3. These are all important aspects when is comes to your content presentation and finding ways to guide your visitors.
$20 TW4 CSS solved a big problem
1. HTML was never intended to contain tags for formatting a web page! 2. HTML was created to describe the content of a web page, like: <h1>This is a heading</h1> <p>This is a paragraph.</p> 3. When tags like <font> were added to the HTML 3.2 specification, it started a nightmare for web developers. 4. To solve this problem, the World Wide Web Consortium (W3C) created CSS. 5. CSS removed the style formatting from the HTML page!
$20 TP4 One page, multiple styles
1. Having multiple CSS files comes in particularly handy when we have multiple "display" devices.
$10 TP4 Specificity
1. If more than one rules apply to an HTML element, the more specific one will "win."
$50 TW4 What is specificity?
1. If there are conflicting CSS rules pointing to the same element, rules determine which is most specific and wins out. 2. Think of specificity as a score/rank that determines which style declarations are ultimately applied to an element. 3. The universal selector (*) has low specificity, while ID selectors are highly specific!
$20 TW4 Grouping Selectors
1. If you have elements with the same style definitions, like this: h1 { text-align: center; color: red; } h2 { text-align: center; color: red; } p { text-align: center; color: red; } 2. It will be better to group the selectors, to minimize the code. 3. To group selectors, separate each selector with a comma. 4. In the example below we have grouped the selectors from the code above: h1, h2, p { text-align: center; color: red; }
$5 TW4 Forms are still one of the common ways for your visitors to get in contact with you
1. If you look around you will likely find a form on almost any website. 2. Yet, a lot of times, forms don't live up to their potential by far. 3. Try to make your forms simple and to the point. 4. The easier it is for people to reach out, the more like they will do so.
$20 TW4 HTML lists and CSS list properties
1. In HTML, there are two main types of lists: 2. The CSS list properties allow you to:
$20 TP4 Three ways to apply CSS to HTML
1. Inline Style Sheet. 2. Internal Style Sheet. 3. External Style Sheet.
$5 TP4 When multiple style sheets are defined for an HTML element, they will cascade into a new virtual style sheet based on the following rules, where number 1 has the highest priority:
1. Inline style (defined within an HTML element). 2. Internal style sheet (defined within the <head> section). 3. External style sheet. 4. Browser default.
$5 TW4 For your website you should make sure there are no dead links, that your forms are bug-free, and that any relevant content is displayed correctly
1. It is important that you test the functionality of your site on different devices and screen sizes.
$5 TP4 The internal style applies to the whole web page
1. It may be used when a single web page has a unique style.
$20 TP4 CSS links
1. Links can be defined in different states. 2. Some order rules for defining link states. 3. Some CSS properties can be used to format the links. 4. E.g., <!DOCTYPE html> <html> <head> <style> a:link {color: black; text-decoration: underline;} a:visited {color: indianred;} a:hover {color: blue;} a:active {color: red;} </style> </head> <body> <p><a href="http://www.w3schools.com/" target="_blank">This is a link</a> </p> </body> </html>
$20 TW4 Styling Links
1. Links can be styled with any CSS property (e.g. color, font-family, background, etc.). 2. In addition, links can be styled differently depending on what state they are in. 3. The four links states are: 4. When setting the style for several link states, there are some order rules:
$50 TP4 CSS
1. Multiple pages, one style. 2. One page, multiple styles. 3. Specificity and order.
$5 TW4 The list-style-type: none property can also be used to remove the markers/bullets
1. Note that the list also has default margin and padding. 2. To remove this, add margin:0 and padding:0 to <ul> or <ol>: ul{ list-style-type: none; margin: 0; padding: 0; }
$10 TP4 With CSS
1. Pages do not have to define their own style, but link to one or more CSS files, and can share styles.
$10 TP4 The property "background-repeat" specifies how the backround image repeats itself
1. Possible values for background-repeat: repeat-x (repeat horizontally), repeat-y (repeat vertically), or no-repeat. 2. The background image repeats horizontally only. 3. The background image repeats vertically only. 4. The background image does not repeat.
$10 TP4 The property "text-transform" specifies the uppercase or lowercase letters of the text
1. Possible values: capitalize (the first letter of each work), uppercase, and lowercase. 2. E.g., <!DOCTYPE html> <html> <head><style> p.uppercase {text-transform: uppercase;} p.lowercase {text-transform: lowercase;} p.capitalize {text-transform: capitalize;} </style> </head> <body> <p class="uppercase">This is some text.</p> <p class="lowercase">This is some text.</p> <p class="capitalize">This is some text.</p> </body> </html>
$10 TP4 The property "text-align" can format the horizontal alignment of the text in the table
1. Possible values: center, left, and right. 2. By default, text in the header is centered-aligned, while text in the cells are left-aligned. 3. E.g., <!DOCTYPE html> <html><head><style> table, th, td {border: 1px solid black;} table {width: 50%;} th {text-align: left;} </style></head> <body><table> <tr><th>Firstname</th> <th>Lastname</th></tr> <tr><td>Peter</td> <td>Griffin</td></tr> <tr><td>Lois</td> <td>Griffin</td></tr> </table></body></html>
$10 TP4 The property "list-style-type" specifies the style of list markers within a list
1. Possible values: disc, circle, square, decimal, lower-roman, upper-roman, lower-latin, upper-latin, none, etc. 2. E.g., <!DOCTYPE html> <html><head><style> ul.a {list-style-type: square;} ol.b {list-style-type: upper-roman;} </style></head><body> <ul class="a"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li</ul> <ol class="b"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li></ol> </body></html>
$10 TP4 The id selector points to an HTML element with a specific id
1. The id selector is defiend as a hash tag # followed by the id of the element. 2. The HTML elements with an id="para1" will be formated based on the style sheet.
$10 TP4 The property "text-align" specifies the horizontal alignment of the text
1. Possible values: left, right, center, and justify. 2. E.g., <!DOCTYPE html> <html> <head> <style> h1 {text-align: center;} p.date {text-align: right;} </style> </head> <body> <h1>CSS text-align Example</h1> <p class="date">May, 2009</p> <p>This is an HTML document with CSS.</p> </body> </html> 3. In the example above, the heading h1 was set to be centered, and the class p.date was set to be aligned ot the right.
$10 TP4 The property "vertical-align" can format the vertical alignment of text in the table
1. Possible values: middle (default), top, and bottom. 2. E.g., <!DOCTYPE html> <html><head><style> table, th, td {border: 1px solid black;} td {height: 50px; vertical-align: botom;} </style></head> <body> <table> <tr><th>Firstname</th> <th>Lastname</th></tr> <tr><td>Peter</td> <td>Griffin</td><tr> <tr><td>Lois</td> <td>Griffin</td></tr> </table> </body></html>
$10 TP4 The property "list-style-position" specifies whether the list markers appear inside or outside (default) the content flow
1. Possible values: outside (default), inside. 2. E.g., <!DOCTYPE html> <html><head><style> ul.a {list-style-type: circle;} ul.b {list-style-type: square; list-style-position: inside;} </style></head> <body> <ul class="a"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li></ul> <ul class="b"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li></ul> </body></html>
$10 TP4 The property "border-collapse" specifies whether the table borders are collapsed into a single border or separated
1. Possible values: separate (default), collapse. 2. E.g., <!DOCTYPE html> <html><head><style> table {border-collapse: collapse;} table, th td {border: 1px solid black;} </style></head> <body> <table> <tr><th>Firstname</th> <th>Lastname</th></tr> <tr><td>Peter</td> <td>Griffin</td></td> <tr><td>Lois</td> <td>Griffin</td></tr> </table> </body></html>
$10 TP4 The property "text-decoration" specifies whether the text is underlined, overliend, or has a strikethrough
1. Possible values: underline, overline, line-through, and none. 2. E.g., <!DOCTYPE html> <html> <head> <style> h1 {text-decoration: overline;} h2 {text-decoration: line-through;} h3 {text-decoration: underline;} </style> </head> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> </body> </html>
$5 TP4 The HTML elements with an id="para1" will be formatted based on the style sheet
1. Remember that the id of an element should be unique within a page. 2. Also the id name cannot start with a number. 3. E.g., <!DOCTYPE html> <html> <head> <style> #para1 {text-align: center; color:red;} </style> </head> <body> <h1>Hello world!</h1> <p id="para1">This is a basic HTML page.</p> <p>This is the second paragraph.</p> </body> </html>
$5 TP4 The class selector is defined as a period followed by the name of the class
1. Similarly, the class name cannot start with a number. 2. E.g., .center {text-align: center; color: red;}
$5 TW4 The embedded style sheet is closer to the element to be styled
1. So in the following situation: From external CSS file: #content h1 {background-color: red;} In HTML file: <style> #content h1 { background-color: yellow; } </style> the latter rule will be applied.
$20 TP4 Specificity and order
1. Specificity. 2. Order.
$50 TW4 CSS links
1. Styling links. 2. Text decoration. 3. Background color. 4. Advanced - link buttons.
$5 TP4 To apply an external style sheet, each web page must include a reference (using rel attribute) to the external .css file inside the <link> element
1. The <link> element is defined inside the <head> section of the HTML document. 2. The href attribute specifies the URL of or path to a style sheet.
$20 TW4 Background image
1. The background-image property specifies an image to use as the background of an element. 2. By default, the image is repeated so it covers the entire element. 3. The backgorund image for a page can be set like this: body { background-image: url("paper.gif"); } 4. An example of a bad combination of text and background image.
$10 TP4 The class selector points to the HTML elements with a specific class attribute
1. The class selector is defined as a period followed by the name of the class. 2. The HTML element with class="center" will be formatted based on the above style sheet. 3. The class selector points to all the <p> elements with class="center" e.g. p.center {text-align: center; color: red;} 4. Only the <p> elements with class="center" will be formatted based on the above style sheet.
$20 TW4 The class Selector
1. The class selector selects elements with a specific class attribute. 2. To select elements with a specific class, write a period (.) character, followed by the name of the class. 3. All HTML elements with class="center" will be red and center-aligned: .center { text-align: center; color: red; } 4. You can also specify that only specific HTML elements should be affected by a class. 5. Only <p> elements with class="center" will be center-aligned: p.center { text-align: center; color: red; } 6. HTML elements can also refer to more than one class. 7. The <p> element will be styled according to class="center" and to class="large": <p class="center large">This paragraph refers to two classes.</p>
$20 TP4 CSS selectors
1. The element selctor points to the HTML elements based on the element name defined in the style sheet. 2. The CSS selectors pointing to elements with the same style definitions can be grouped together. 3. The id selector points to an HTML element with a specific id. 4. The class selector points to the HTML elements with a specific class attribute.
$20 TW4 The element Selector
1. The element selector selects elements based on the element name. 2. You can select all <p> elements on a page like this: p { text-align: center; color: red; }
$10 External Style Sheet
1. The external style sheet can be written in any text editor (e.g., TextEdit, notepad), and must be saved as a .css file. 2. The external style sheets can be applied to multiple pages. 3. To apply an external style sheet, each web page must include a reference to the .css file inside the <link> element. 4. E.g., <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href=mystyle.css"> </head> <body> 5. The external style sheet was saved as mystyle.css and referenced in the <link> element, in the <head> section.
$5 TP4 The external style sheet can be written in any text editor (e.g., TextEdit, notepad), and must be saved as a .css file
1. The file cannot contain any HTML tags.
$20 TW4 The id Selector
1. The id selector uses the id attribute of an HTML element to select a specific element. 2. The id of an element should be unique within a page, so the id selector is used to select one unique element! 3. To select an element with a specific id, write a hash (#) character, followed by the id of the element. 4. The style rule below will be applied to the HTML element with id="para1": #para1 { text-align: center; color: red; }
$20 Some of the CSS properties for background effects
1. The property "backround-color" specifies the background color of an element. 2. The property "backround-image" specifies an image that is used as the background of an element. 3. The property "background-repeat" specifies how the background image repeats itself. 4. The property "background-attachment" specifies whether the background image is fixed or scrolled with the site. 5. The property "background-position" specifies the position of bockground image. 6. The property "background" as a shorthand property specifies all the backgorund properties in one single property.
$20 TP4 Some of the CSS properties for table formatting
1. The property "border" can specify a border for <table>, <th>, and <td> elements. 2. The property "border-collapse" specifies whether the table borders are collapsed into a single border or separated. 3. The property "text-align" can format the horizontal alignment of text in the table. 4. The property "vertical-align" can format the vertical alignment of text in the table. 5. "color" or "background-color" can format the border, text, and background color of <th>, <td>, and <table>.
$10 TP4 Some CSS properties can be used to format the links
1. The property "color" specifies the color of the link in different states. 2. The property "text-decoration specifies whether the link has an underline or not. 3. Possible values for text-decoration: underline, none.
$20 TP4 Some of the CSS properties for text formatting
1. The property "color" specifies the color of the text. 2. The property "text-align" specifies the horizontal alignment of the text. 3. The property "text-transform" specifies the uppercase or lowercase letters of the text. 4. The property "text-indent" specifies the indentation of the first line of a text. 5. The property "text-decoration" specifies whether the text is underlined, overlined, or has a strikethrough.
$20 TP4 Some of the CSS properties for list formatting
1. The property "list-style-type" specifies the style of list markers within a list. 2. The property "list-style-position" specifies whether the list markers appear inside or outside the content flow. 3. The property "list-style-image" specifies an image to be used as the list makers.
$10 TP4 A CSS rule set consists of a selector and a declaration block
1. The selector points to a particular HTML element that you want to format. 2. The declaration block is enclosed in a set of curly braces {}. 3. The declaration block contains one or more declarations separated by semicolons. 4. Each declaration consists of a property name and its value, separated by a colon. 5. Each declaration should end with a semicolon. 6. E.g., h1 {color: blue; text-align: center;} tells the browser that all the <h1> elements to be center aligned and in blue.
$5 TW4 "list-style-position: outside;" menas that the bullet points will be outside the list item
1. The start of each line of a list item will be aligned vertically.
$20 TW4 CSS saves a lot of work
1. The style definitions are normally saved in external .css files. 2. With an external stylesheet file, you can change the look of an entire website by changing just one file!
$5 TW4 Below is an example of bad combination of text and background image
1. The text is hardly readable: body { background-image: url("bgdesert.jpg"); }
$5 TP4 The external style sheets can be applied to multiple pages
1. They are usually used for the whole website consisting of multiple pages. 2. You can format the look of a website by changing just one .css file.
$10 TW4 To shorten the code, it is also possible to specify all the background properties in one single property
1. This is called a shorthand property.
$5 TW4 To shorten the code it is also possible to specify all the background properties in one single property
1. This is called a shorthand property.
$20 TW4 Background - Shorthand property
1. To shorten the code, it is also possible to specify all the background properties in one single property. 2. The shorthand property for background is background: body { background: #ffffff url("img_tree.png") no-repeat right top; } 3. When using the shorthand property the order of the property values is: 4. It does not matter if one of the property values is missing, as long as the other ones are in this order.
$20 TW4 Table borders
1. To specify table borders in CSS, use the border property. 2. The example below specifies a black border for <table>, <th>, and <td> elements: table, th, td { border: 1px solid black; } 3. Notice that the table in the example above has double borders.
$50 TW4 CSS introduction
1. What is CSS? 2. Why use CSS? 3. CSS solved a big problem. 4. CSS saves a lot of work!
$50 TW4 CSS specificity
1. What is specificity? 2. Specificity hierarchy. 3. How to calculate specificity? 4. Specificity rules.
$10 TP4 Order
1. When multiple style sheets are defined, they cascade into a new virtual style sheet in the following priority order: 2. An inline style will override the style defined inside the <head> section, in an external style sheet, or in a browser.
$5 TP4 The pest practice is to separate presentation (style sheet) from content
1. You should avoid using inline styles whenever possible.
$10 TP4 Some order rules for defining link states
1. a:hover must come after a:link and a:visited. 2. a:active must come after a:hover.
$5 TW4 The four link states are:
1. a:link - a normal, unvisited link. 2. a:visited - a link that the user has visited. 3. a:hover - a link when the user mouses over it. 4. a: active - a link the moment it is clicked.