Pre-Module CSS BTM 395: Internet Programming

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

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