Lecture 4
CSS (part 1)
Ketan Mayer-Patel
University of North Carolina
Assignment 1
- What to do.
- Saving HTML pages
- Transferring files to webspace
CSS
- Cascading Style Sheets
- Presentation instructions associated with HTML/XHTML
- Separate content from presentation
- Ideal case:
- XHTML provides structure and content
- CSS describes appearance
- Advantages?
Advantages
- Site-wide consistency
- Bandwidth savings
- Easier to maintain
Stylesheet format
- Usually a separate file
- Sequence of rules
- Form of a rule:
selector {
attribute: value(s);
attribute: value(s);
}
Specifying a stylesheet
- <link rel="stylesheet" type="text/css" href="file.css">
- Placed within <head> element.
- Example 1
Specifying style inline
- style attribute
- Valid for almost all (X)HTML elements
- Just sequence of attribute/value specifications
- Example 2
Versions of CSS
- CSS1
- Basic style controls (font, colors, etc.)
- CSS2
- Added positioning model, expanded style controls
- CSS3
- Translucency, more advanced selector model, other advanced features.
- Browser support varies
- Generally CSS2 support is widespread
- Older browsers problematic (but they always will be)
Selectors
- Element names
- class attribute value
- id attribute value
- General attribute value
- Heirarchical relationships
- Pseudo classes
- Pseudo element
Element Name
- Simply use element name as selector
- Matches all elements in document with that type
- * matches anything
- Example 3
Class name
- The
class
attribute is valid for any (X)HTML element
- CSS class selector:
E.class
Treats class attribute value as space-separated list
- Selector matches if specified class is in the list
If element name not given, same as matching anthing with that class name:
.class
*.class
Example 4
ID value
- The
id
attribute is valid for any (X)HTML element
- CSS id selector:
E#id
*#id
#id
Must match id attribute exactly
Why are first two forms of this selector not actually needed?
Example 5
General attribute value
- To match attribute value exactly:
E[attr="value"]
To match attribute value as space-separated list:
E[attr~="value"]
So class and id selectors really just special cases.
Example 6
Heirarchical Relationships
E F
Direct child:
E > F
Preceding sibling:
E + F
First child:
E:first-child
Example 7
Pseudo classes
E:link
visited
E:visited
active
E:active
hover
E:hover
focus
E:focus
Example 8
Pseudo elements
E:first-line
first-letter
E:first-letter
Example 9
Combining selectors
- List selectors with comma
- Applies attribute/values to all selectors in the list
- Chain selectors together
- Generally can replace any element name with a selector
- Creates compound selector
- Reads left to right
- Example 10
The Cascade
- Which selector prevails if more than one applies?
- First by where specified.
- Inline -> External -> Browser Default
- Then by
weight
- Number of elements in the rule +
- Number of classes specified * 10 +
- Number of IDs specified * 100
- Most style info inherited from parent if not specified.
- Example 11