The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1

Chapter Objectives To learn the history of HTML and CSS To learn to create style rules using CSS selectors and declarations To learn where to place style sheets and create basic styles in CSS1

History of HTML and CSS Tim Berners-Lee at CERN –Developed HTML in early 1990s Mosaic and graphical browsing –Developed by NCSA in 1993 The advent of non-standard tags –E.g., HTML 4 and CSS –Attempt to remove formatting from the structure Proper Containment –Always use “optional” closing tags Block level (line break) versus Inline elements

Creating Your Own Style Rules A CSS rule includes a Selector and a Declaration The Declaration includes Properties and values The entire definition can be placed on a single line, but is easier to read and debug if split across multiple lines h1 {font-family : arial, sans-serif} p { font-family : "times new roman", serif; color : red; text-align: left }

HTML Element Selectors Designate style for one or more HTML tags –h1, h2, h3, h4, h5, h6 { font-family : arial, sans-serif; color : blue; text-align: center } Modifies all occurrences of through Contextual Selectors –p b {color : maroon} Modifies a tag which appears in a block

Class Selectors Applies rules to HTML content by class Create a rule in the style sheet –.isgreen {color : green} Reference the class name in the HTML – This will appear green.

ID Selectors Applies rules to HTML content by ID Create a rule in the style sheet –#silverware {color : silver;} Reference the ID in the HTML – This will appear silver. ID must be unique Rarely used

Pseudo-Classes Typically used for drop cap effect –p.dropcap:first-letter { font-size: 300%; float: left; color: red; }

Pseudo-Classes (cont.) Most common use is for modifying specific contexts of anchor, tags. –A:Hover – pseudo-class active when the mouse passes over an link –A:Active – Applies when an element is being activated by the user –A:Link – Applies to links that have not yet been visited –A:Visited – Applies to links that have already been activated

Placing Style Sheets Inline Style Sheets –Applies to a single element some text goes here. Discouraged by the W3C

Placing Style Sheets Internal Style Sheets –Applies to a single page h1, h2, h3, h4, h5, h6 { font-family : arial, sans-serif; color : blue; text-align: center; } p b {color : maroon;}.isgreen {color : green;}

External Style Sheets Store style rules in an external file –Reference the external file using link in the Page with external CSS Great for consistent styling on large sites