Pre-Module CSS

BTM 395: Internet Programming

Cascading Style Sheets (CSS)

• Separation of structure from presentation

• CSS guide and tutorial– http://www.westciv.com/style_master/academy/css_tutorial/ind

ex.html

• CSS demos– http://www.w3schools.com/css/css_examples.asp

How to specify CSS styles

• Inline Styles – Declare an individual element’s format

• <p style=“color: red;font-size: larger;”>• CSS property: Followed by a colon and a value

• Embedded Style Sheets – Embed an entire CSS document in an XHTML document’s

head section• <style type=“text/css”> p {color: red;font-size: larger}

</style>• Linking External Style Sheets

– External style sheets• <link rel=“stylesheet” type=“text/css”

href=“formatting.css” />• Can provide uniform look and feel to entire site

• @import rule– Import one external style sheet into another external style

sheet• @import "http://www.westciv.com/styles/style1"; or• @import url(http://www.westciv.com/styles/style1);

CSS syntax

• http://www.w3schools.com/css/css_syntax.asp• 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• http://jigsaw.w3.org/css-validator/