Creating CSS Styles
Lecture notes for IST 286: Web and Digital Media Development
Richard H. Hall, Professor, Information Science and Technology
Missouri University of Science and Technology
- Rule Structure
- A CSS rule consists of
- selector: what part of document does this rule apply to
- property: some characteristic of the document
- value: some value of the given property
- All property/value pair must be separated from the next by a semicolon
- A CSS rule consists of
- Types of selectors
- Define an html tag
- Create a class
- you assign the name and then use class attribute and name as value
- can be used multiple times in a page
- proceeded by a period (e.g., .myclass)
- Create an ID
- you assign the name and then use the id attribute and name as the value
- can only be used one time in a page
- preceded by a pound sign (e.g., #myid)
- Example
- Context selectors
- Ancestors, Descendents, Parents, and Children in html
- Within the hierarchical structure of an html page, an element that contains other elements is considered the ancestor of these other elements which are the descendents. The elements within one descendent step are considered to be parent (ancestor) and children (descendent) respectively.
- You can specify a style within the context of an ancestor or parent
- Ancestor/Descendent: When two selectors are used for a given set of properties and there is only a space between them the first is the ancestor and the second is the descendent (e.g., #menu p { ... means that all p tags that are descendents of the id menu are formatted a given way, but p tags that are not descendents are not effected by this rule)
- Parent/Child: When two selectors are used for a given set of properties
and they are separated by ">", the first is the parent
and the second is the child (e.g., #menu > p { ... means that
the p tags that are children of the id menu are formatted a certain
way, but other p tags that are descendents (but not children) or
not descendents are not effected by this rule
- Unfortunately not supported by IE 5.5 or 6
- Example
- Ancestors, Descendents, Parents, and Children in html
- Formatting Link Elements Based on their State
- types
- a:link = link
- a:visited = visited link (after it's been visited)
- a:hover = link when mouse is hovered over the link
- a:active = link when it is activated (clicked)
- It's important to put them in the order as listed above when defined (since a link can be in more than one state at once). Jeffrey Zeldman suggests the mneumonic: Love Ha! (lvha)
- These are called "pseudo classes"
- Example
- types
- Selecting Part of an element
- First-line and first letter
- You can select the first line of text that displays in a browser with the first-line pseudo element
- You can select the first letter of text that displays in a browser with the first-letter pseudo element
- Example
- IE 6, Mozilla, and Opera 6 support these pseudo-elements
- First-line and first letter
- Using multiple selectors with the same set of property/value sets.
- By separating selectors with commas you can identify multiple selectors for one set of property/values.
- You need to be careful to use commas or you will create contextual selectors
- Example