Cascading Style Sheets - Syntax & Semantics

Introduction to CSSCSS Syntax - Fort Collins, CO

Copyright © XTR Systems, LLC

CascadingStyle 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; }




• 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; }




• 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

Documents

Cascading Style Sheets - Syntax & Semantics