Cascading Style Sheets

Cascading Style Sheets - Syntax & Semantics Instructor: Joseph DiVerdi, Ph.D., MBA

Rule Syntax • A Style Is a Rule • Which Specifies How to Render an HTML Tag • Any Valid HTML Tag Name Can Be Specified

Rule Syntax selector { property: value; } • selector - Identifies the Element Affected • declaration - Combined Property & Value • Case Insensitive but Convention Dictates • Tag names Are All Uppercase • Properties & Values Are All Lowercase • Any Valid HTML Tag Name Can Be Selector • Less Its Enclosing < & > Characters

Rule Syntax selector { property: value; } • selector - Identifies the Element Affected • declaration - Combined Property and Value BODY { background-color: aqua; }

Multiple Properties Syntax • Separate Multiple Properties by Semicolons selector { property1: value1; property2: value2; } P { background-color: aqua; color: red; } • Use a Semicolon Even For One Property • Good Programming Practice

Contextual Selectors Syntax • Contextual Selectors • Define a Method to Have a Style Applied • When a Tag Occurs Within a Certain Context • When It Is Nested Within Other Tags <P> bla, bla <A HREF=...>bla, bla</A> bla, bla </P> <TD> bla, bla <A HREF=...>bla, bla</A> bla, bla </TD> • <A> is in Two Different Contexts

Contextual Selectors Syntax selector1 selector2 { property: value; } • Applied When selector2 Occurs Within selector1 H1 EM { color: red; } • H1 text will normally be bold & larger • EM text will normally italicized • With the Above Rule EM text in H1 will be bold, larger, italicized & red

Contextual Selectors • Classic Outline Numbering • Capital letters, e.g., A, B, C, ... • Uppercase Roman numerals, e.g., I, II, III, ... • Lowercase letters, e.g., a, b, c, ... • Arabic numerals, e.g., 1, 2, 3, ... OL LI { list-style: upper-alpha; } OL OL LI { list-style: upper-roman; } OL OL OL LI { list-style: lower-alpha; } OL OL OL OL LI { list-style: decimal; }

Class Attribute Selectors • Application of Style Rules Based on Special Identifying Attributes • Classify Elements by Adding CLASS Attribute: <H1>Current Statement</H1> <H1 CLASS="important">Your account is past due.</H1> • Specify Styles for Particular Class Using: H1.important { color: red; }

Class Attribute Selectors • Same CLASS Name Used for Several Tags: <H1 CLASS="important">Your account is past due.</H1> <P CLASS="important">Pay attention!</P> • Specify Styles for Particular Class Using: H1.important { color: red; } P.important { color: red; }

Class Attribute Selectors • Combine All CLASSes Into a General One: .important { color: red; }

ID Attribute Selectors • Target Unique Elements by Adding ID Attribute <P ID="061998">New item added today</P> • Specify Styles for Particular Class Using: P#061998 { color: blue; } • Or Combine All Classes Into a Generic One: #061998 { color: blue; } • Almost Indistinguishable With CLASS

Pseudo-Class Definitions • Replacement for Old-Style <BODY> <BODY LINK=#0000FF ACTIVE=#FF0000 VISITED=#FF00FF> • Three Pseudo-classes Defined for <A>: A:LINK { color: blue; } A:ACTIVE { color: red; } A:VISITED { color: purple; }

Pseudo-Class Definitions • Complete Replacement for Old-Style <BODY> <BODY LINK=#0000FF ACTIVE=#FF0000 VISITED=#FF00FF> A:LINK { color: blue; } A:ACTIVE { color: red; } A:VISITED { color: purple; } BODY { color: black; background-color: white; }

Alternate Values Syntax • This is a Special Case for font-family • Separate Alternate Values by Commas selector { font-family: value1, value2, value3, ... ; } H1 { font-family: verdana, arial, helvetica; } • Identify Your First Choice, Second Choice, ... • More On This Later

The Cascade Defined • More Than One Type of Style Definition Can Simultaneously Effect Presentation • Style Is Hierarchical • Highest-to-Lowest Weight • HTML Tag Attributes • Inline Style • Document-Level Style Sheets • Imported Style Sheets • Linked External Style Sheet • User Style Settings • Browser Default Settings

Cascading Style Sheets - Syntax &amp; Semantics