160 likes | 278 Views
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
E N D
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