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 Mosaic and graphical browsing The advent of non-standard tags HTML 4 and CSS Proper Containment Block level versus Inline elements

Creating Your Own Style Rules A CSS rule; Selector and Declaration Properties and values 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 } Contextual Selectors p b {color : maroon}

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

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

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