Introduction to CSS CSS Syntax - Fort Collins, CO Copyright © XTR Systems, LLC Cascading Style Sheets - Syntax & Semantics Instructor: Joseph DiVerdi, Ph.D., MBA

Introduction to CSS CSS Syntax - Fort Collins, CO Copyright © XTR Systems, LLC Rule Syntax A Style Is a Rule –Which Specifies How to Render an HTML Tag Any Valid HTML Tag Name Can Be Specified

Introduction to CSS CSS Syntax - Fort Collins, CO Copyright © XTR Systems, LLC 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

Introduction to CSS CSS Syntax - Fort Collins, CO Copyright © XTR Systems, LLC Rule Syntax selector { property: value; } selector - Identifies the Element Affected declaration - Combined Property and Value BODY { background-color: aqua; }

Introduction to CSS CSS Syntax - Fort Collins, CO Copyright © XTR Systems, LLC 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

Introduction to CSS CSS Syntax - Fort Collins, CO Copyright © XTR Systems, LLC 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 bla, bla bla, bla bla, bla bla, bla bla, bla bla, bla is in Two Different Contexts

Introduction to CSS CSS Syntax - Fort Collins, CO Copyright © XTR Systems, LLC 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

Introduction to CSS CSS Syntax - Fort Collins, CO Copyright © XTR Systems, LLC 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; }

Introduction to CSS CSS Syntax - Fort Collins, CO Copyright © XTR Systems, LLC Class Attribute Selectors Application of Style Rules Based on Special Identifying Attributes –Classify Elements by Adding CLASS Attribute: Current Statement Your account is past due. –Specify Styles for Particular Class Using: H1.important { color: red; }

Introduction to CSS CSS Syntax - Fort Collins, CO Copyright © XTR Systems, LLC Class Attribute Selectors Same CLASS Name Used for Several Tags: Your account is past due. Pay attention! –Specify Styles for Particular Class Using: H1.important { color: red; } P.important { color: red; }

Introduction to CSS CSS Syntax - Fort Collins, CO Copyright © XTR Systems, LLC Class Attribute Selectors Combine All CLASSes Into a General One:.important { color: red; }

Introduction to CSS CSS Syntax - Fort Collins, CO Copyright © XTR Systems, LLC ID Attribute Selectors Target Unique Elements by Adding ID Attribute New item added today –Specify Styles for Particular Class Using: P# { color: blue; } –Or Combine All Classes Into a Generic One: # { color: blue; } –Almost Indistinguishable With CLASS

Introduction to CSS CSS Syntax - Fort Collins, CO Copyright © XTR Systems, LLC Pseudo-Class Definitions Replacement for Old-Style Three Pseudo-classes Defined for : A:LINK {color: blue; } A:ACTIVE {color: red; } A:VISITED {color: purple; }

Introduction to CSS CSS Syntax - Fort Collins, CO Copyright © XTR Systems, LLC Pseudo-Class Definitions Complete Replacement for Old-Style A:LINK {color: blue; } A:ACTIVE {color: red; } A:VISITED {color: purple; } BODY {color: black; background-color: white; }

Introduction to CSS CSS Syntax - Fort Collins, CO Copyright © XTR Systems, LLC 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

Introduction to CSS CSS Syntax - Fort Collins, CO Copyright © XTR Systems, LLC 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