Chapter 3: Adding Some Style

What is CSS

Code Helps
- <strong style="color: red;">Red Text</strong> Red Color
- font-weight:
  - normal
  - bold
Adding Inline Styles
The span element

Why External Style Sheets are Better than Embedded Styles
Creating an External CSS File
Linking CSS to a Web Page
- <link href="style1.css" rel="stylesheet" type="text/css"/>

Cool New Tools
- color:
  hexadecimal color reference
  #ff00ae = ff(red), 00(green), ae(blue)
  keywords = red, yellow, blue, green, etc.
- font-family
  Arial, Verdana, "Times New Roman", etc.
  serif or sans-serif
- font-size
  keywords
  - xx-small
  - x-small
  - small
  - medium
  - large
  - x-large
  - xx-large
  a relative unit (e.g. 140%)
  fixed font sizes
  - pixels (e.g. 20px)
  - points (e.g. 12pt)
- font-weight
  bold or normal
- font-style
  normal or italic
- text-decoration
  none, underline, overline, or line-through
- text-transform
  uppercase, lowercase
- contextual selectors
  #tagline p
  #navigation a
  #footer p
  h1 strong
  h2 a
- style groups
  h1, h2, h3
  <!-- Comma = "Or" --!>
Heirarchy Rules
- of two identical declarations, the latter one wins
- Specificity - of declarations over different elements, the more specific wins
Styling Links
- 4 states of a link:
- 1. link - default blue (a:link)
  2. visited - default purple (a:visited)
  3. hover - no change in default (a:hover)
  4. active - default red (a:active)
Class Selectors
- .fun {}
Styling Partial Text Using span
- use, don't abuse