View
17
Download
4
Category
Preview:
DESCRIPTION
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 - PowerPoint PPT Presentation
Citation preview
Introduction to CSSCSS Syntax - Fort Collins, CO
Copyright © XTR Systems, LLC
CascadingStyle Sheets -
Syntax & Semantics
Instructor: Joseph DiVerdi, Ph.D., MBA
Introduction to CSSCSS 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 CSSCSS 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 CSSCSS 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 CSSCSS 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 CSSCSS 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
<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
Introduction to CSSCSS 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 CSSCSS 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 CSSCSS 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:
<H1>Current Statement</H1>
<H1 CLASS="important">Your account is past due.</H1>
– Specify Styles for Particular Class Using:
H1.important { color: red; }
Introduction to CSSCSS Syntax - Fort Collins, CO
Copyright © XTR Systems, LLC
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; }
Introduction to CSSCSS Syntax - Fort Collins, CO
Copyright © XTR Systems, LLC
Class Attribute Selectors
• Combine All CLASSes Into a General One:
.important { color: red; }
Introduction to CSSCSS Syntax - Fort Collins, CO
Copyright © XTR Systems, LLC
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
Introduction to CSSCSS Syntax - Fort Collins, CO
Copyright © XTR Systems, LLC
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; }
Introduction to CSSCSS Syntax - Fort Collins, CO
Copyright © XTR Systems, LLC
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;
}
Introduction to CSSCSS 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 CSSCSS 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
Recommended