1. HyperText Markup Language (HTML) Uses plain text to add markup instructions to a file. If you can't produce it with a standard keyboard, it can't go into an HTML file. Each byte in the underlying file is an ASCII (American Standard Code for Information Interchange) character -- this is way the Web is application and platform independent. No binary blobs here! The rendition of an HTML file is called a Web page.

2. Cascading Style Sheets (CSS) Was created to help separate content from style. In other words, keep the style rules separate from the main content of the document. Simple markup instructions apply the styles to the text. Much more flexible -- change one style rule and all the names in the document change, for example.

3. Styles for text Style Declarations -- property:value; background-color:#0000ff; font-size:90%; font-weight:bolder; font-family:Verdana,Arial,Helvetica;

4. HTML style container element -- typically placed in the head section Global style selector for an HTML element style selectors go here element {property1:value1; property2:value2;...} The styles are applied to ALL occurrences of the element in the document. Example: See stylerules.html (Figure 6.2)

5. b {font-size:125%; font-style:italic; } The global style for b applies to ALL bold elements in the document. bigger italic bold text Without styles, you would need the following HTML, each time you wish to apply the formatting. bigger italic bold text

6. Generic HTML containers for applying styles span Inline element (span of text) Induces no formatting on its contents div Block element (block division in page) Only causes line breaks before and after (similar to p element, but with only one line break) Example: See spandiv.html.

7. Defining a style class element.classname { style declarations... } Applying the style class to the HTML element... The same HTML element can use different style classes.... We have listed the class attribute only in the element summaries for the span and div containers, but the class attribute can be used in ALL HTML elements.

8. A global selector and two classes for span span {font-weight:bolder; font-style:italic} span.bigblue {font-size:125%; color:#0000FF;} span.smallred {font-size:75%; color:#FF0000; font-style:normal;} Applying the style rules bold italic text big blue bold italic text small red bold text (NOT italic) All spans get the styles from the global selector. The class selectors can over-ride the global one.

9. A generic class can be applied to ANY HTML element.greymonospace{ color:#333333; font-family:Courier,Monaco;} Example uses: some text The above use of the small element is then equivalent to the following pure HTML formatting. some text

10. body{ color:#000066; font-family:Georgia,Times,"Times New Roman";} h1 {font-style:oblique;} div.caption {font-size:125%; font-weight:bolder; background:#000066; color:#CCCCFF;} div.content{font-size:90%; font-family:Verdana,Arial, "Trebuchet MS";} span.title { font-size:100%; font-style:italic; color:#333333;}.gray {color:#333333;} Styles for an example Web page

11. See source file ozzy resume.html

12. Style properties for formatting blocks These style properties set properties of blocks. In contrast, the first set of styles we presented are primarily for setting properties of text, perhaps for a whole block.

13. Styles for an Example Page. body{color:#000066; font-family:Georgia, Times, "Times New Roman"; text-align:justify; margin-left:0px; } div{background-color:#CCCCCC; margin-bottom:15px;} span.note{font-weight:bolder; color:#FFFFFF; background-color:#000066; margin-left:20px;} div.notebody{font-family:Georgia, Times, "Times New Roman"; font-size:95%; background-image:URL(greybackground.gif); margin-left:20px; margin-right:20px; padding:10px; text-indent:10px;} div.leftpad{padding-left:7px;}

14. See source file blockstyles.html (Figure 6.7)

15. Pseudo-classes for links a:link {color:grey;} a:visited {color:purple;} a:active {color:red;} a:hover {color:blue;} The first three are equivalent to setting HTML attributes in the body element. But the hover pseudo-class enables a rollover behavior. The default hover effect varies among browsers. Some remove the underline in the hover state.

16. Other effects can be added to the rollover. Background color for hover state. a:hover {color:#FFFFFF; font-weight:bolder; background-color:#0000FF;} a:link {color:grey; text-decoration:none;} a:visited {color:purple; text-decoration:none;} a:hover {color:blue; text-decoration:none;} Remove the underline from the the non-hover state of the link.

17. Pseudo-classes can be used in conjunction with regular classes for links. a.plain:link {color:grey; text-decoration:none;} a.plain:visited {color:purple; text-decoration:none;} a.plain:hover {color:blue;} That, way you can apply different pseudo-class styles to different links in a Web page. click me

18. Styles can be collected in an external style file. The style file can be imported into one or more HTML files. See example externalimport.html

19. <link href="path/to/mystyles.css" rel="stylesheet" type="text/css" /> more local styles to augment the imported ones they only apply to this page Styles local to the document can also be used in conjunction with external style rules imported from a style file.

20. The style attribute -- set styles right inside an HTML element The only advantage to using styles in this way is that styles provide more formatting control than standard HTML attributes. Example: See styleattribute.html

21. Levels of Cascade In CSS Styles set for an element at a lower level over-ride styles set for that element at a higher level. Styles can be added at a lower level to supplement those set at a higher level.