Introduction to CSS September 20, 2005

6.1 Introduction Cascading Style Sheets (CSS) –Separation of structure from presentation CSS guide and tutorial – CSS demos –

How to specify CSS styles Inline Styles –Declare an individual element’s format CSS property: Followed by a colon and a value Embedded Style Sheets –Embed an entire CSS document in an XHTML document’s head section p { color: red;font-size: larger} Linking External Style Sheets –External style sheets Can provide uniform look and feel to entire rule –Import one external style sheet into another external style " url(

CSS syntax Selectors –selector { property: value; } Grouping –One statement to set many selectors –select1, select2, select3 { property: value; } Class selectors –Same settings for all elements with attribute class=“classname” –selector.classname { property: value; } ID selectors –Specific settings for unique (or few) elements with attribute id=“identifier” –selector#identifier { property: value; } /* CSS comments */

Cascading and inheritance Cascading –One stylesheet after another can be specified Inheritance –Descendant inherits properties from ancestors Conflict resolution: The style rule with the greatest specificity takes precedence –id rules take precedence over class –class rules take precedence over element –When rules for ids, classes, or elements have the same specificity, then the last rule encountered takes precedence Custom user-defined attributes have highest priority Inline styles come next Then embedded styles Finally, external style sheets

6.6 W3C CSS Validation Service Validates external CSS documents Ensures that style sheets are syntactically correct

6.6 W3C CSS Validation Service Fig. 6.6Validating a CSS document. (Courtesy of World Wide Web Consortium (W3C).)

6.6 W3C CSS Validation Service Fig. 6.7CSS validation results. (Courtesy of World Wide Web Consortium (W3C).)

CSS Properties

Text style properties color: red; /* Colour of text; note American spelling) */ Font properties –font-weight: bold/normal –font-family: /* Typeface of font, e.g. Arial */ –font-size: /* Colour of text; note American spelling) */ –font-variant: italic/normal

Background These properties are for all backgrounds—that is, for any element, not just the page background-color: /* Background color */ background-image: url(image.png); background-repeat: repeat/repeat- x/repeat-y/no-repeat; /* Full tile/tile horizontal/tile vertical/no tiling */

Spacing and borders Fig. 6.13Box model for block-level elements.

Spacing and borders Margins –margin: /* specify width */ Borders –border-width: thin/medium/thick/pixels; –border-style: /* Various styles */ –border-color Padding –padding: /* specify width */

and Block-level elements –Contain other elements –Eg.,,,, etc. – is generic List elements –Special block-level elements –,, In-line elements –Side-by-side with other elements –Eg.,,, etc. – is generic

Positioning position property –position: static Place elements sequentially as they appear in the document Default for HTML –position: relative Place relative to where they ought to be –position: absolute Specify exactly where on the page the element should be Element will scroll –position: fixed Specify exactly where on the page the element should be Element will not scroll Does not work in Internet Explorer z-index property –How “high” up should the positioned element be laid –Higher z-index means higher on top

6.12 Web Resources s/index.htmlhttp:// s/index.html tech.irt.org/articles/css.htm