Cascading Style Sheets
- Introduce Cascading Style Sheets concepts
- Separation of content and format - similar goals as XML
- Basic Terms
- Selector - the HTML element to be modified
- Declaration - the element's property to be modified and its value (property + value)
- Rule - The combination of selector and declaration
- Property - the specific aspect of a tag (i.e. color or size)
- Value - the new setting to be applied (i.e. black or 24pt)
- Placement of style sheet rules
- As a separate file
- can be linked to many files at site
- formatting is not visible in code
- keeps formatting consistent across many pages
- multiple references can call on rules from many sources
- In Header
- can override rules in an external file
- if file reference appears before header rules - header has priority
- if header rules appear before file reference - file has priority
- whatever is closest to the data has priority
- sets rules for entire page
- In element tag
- overrides any rules in files or header
- sets rule for single element
- lose some consistency and ease-of-updating
- Format for creating style sheet rules
- One selector, one declaration
- One selector, multiple declarations
- P{font-style:italic; font-weight:bold}
- Multiple selectors
- Nested selectors
- Look at example
- CSS Font Properties
- font-family
- can name a specific family (i.e. font-family:Garamond) or
- can name a class of fonts
- serif
- sans-serif
- monospace
- cursive
- fantasy
- font-style
- font-variant
- font-weight
- 100 - 900 in multiples of 100
- larger number is bolder font
- font-size
- absolute size
- xx-small
- x-small
- medium
- large
- x-large
- xx-large
- relative size
- length - points
- percentage
- text-decoration
- underline
- overline
- line-through
- blink (never use on an assignment for this class)
- text-transform
- capitalize
- uppercase
- lowercase
- none
- Lists
- List-style-type
- Options - choices for a list marker
- disc (filled circle)
- cirlce (open circle)
- square (filled)
- decimal (1, 2, 3...)
- lower-roman (i, ii, iii...)
- upper-roman (I. II. III...)
- lower-alpha (a, b, c...)
- upper-alpha (A, B, C...)
- none
- Example combining options to form personal list marker format
- OL {list-style-type:disc}
- OL OL {list-style-type:circle}
- OL OL OL {list-style-type:square}
- OL OL OL OL {list-style-type:lower-roman}
- List-style-image
- used to put a user-defined graphic as list marker
- UL {list-style-image: url(urlOfImage)}
- List-style-position
- inside (list marker is placed flush with text)
- outside (list marker is out from the text)