The Web Wizard’s Guide To DHTML and CSS

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. <font>, <center> • 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 <H1> through <H6> • Contextual Selectors • p b {color : maroon} • Modifies a <B> tag which appears in a <P> 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 • <h1 class=“isgreen”>This will appear green.<h1>

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 • <h1 id=“silverware ”>This will appear silver.<h1> • 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, <A> tags. • A:Hover– pseudo-class active when the mouse passes over an <A> 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 • <p style="color : silver;">some text goes here.</p> • Discouraged by the W3C

Placing Style Sheets • Internal Style Sheets • Applies to a single page <style type="text/css"> h1, h2, h3, h4, h5, h6 { font-family : arial, sans-serif; color : blue; text-align: center; } p b {color : maroon;} .isgreen {color : green;} </style>

External Style Sheets • Store style rules in an external file • Reference the external file using link in the <head> • <html><head><title>Page with external CSS</title><link rel=“stylesheet” type=“text/css” href=“somestyle.css”></head> • Great for consistent styling on large sites

The Web Wizard’s Guide To DHTML and CSS