Reminder

Exercise for today: https://github.com/DigitalHistory/css-styling/

What you Need to Learn Today

  • syntax: selectors, rules, punctuation;
  • jargon: colors, sizes
  • where to look stuff up (!)

CSS Basics

css-cascade.jpg

With and without CSS

nytimes-w-css.png
nytimes-no-css.png

CSS Selectors

h1 {
    color:blue;
    font-family:serif; 
    font-size:24px; 
}

div {
    border: 1px solid black;
}

div.main p {
    color:red;
}

#specialid {
    float:left;
}

Selector Anatomy

selector.has > #funny:stuff { rule: value in (approved); }

Selector types



Heading

Some Content

Some Content

Selector types

Heading

Some Content

Some Content

More Selectors

div.main p {
      color:red;
  }

div.main > p.blue {
      color: blue;
}

More Selectors

regular (red) paragraph

not a regular paragraph (blue)

Selectors and the Cascade

  • Priority: inline → id → class → element/tag
  • fine gradations within this
  • the awful !important rule

Color Values

Various representations:

  • color: # 00 7F FF ;
  • color: rgb( 00, 127, 255 );
  • color: rgba( 00, 127, 255, 0.6);

(also hsl, hsla)

Fonts, colors and borders

div.main {
      color: rgb(150,150,150);
      background-color: (#b0c4ee);
      text-align: center;
      text-decoration:underline;
      font-family: "Times New Roman", Times, Serif;
      font-style:italic;
      font-size:1.25em;
      border: 4px green solid;
      border-radius:20%;
  }

Fonts and Colors in Action

here is a sample paragraph doing all of this stuff...

Sizes



This paragraph will be syled differently from its peers

This paragraph will be syled differently from its peers

This paragraph will be syled differently from its peers

Sizes

This paragraph will be syled differently from its peers

This paragraph will be syled differently from its peers

This paragraph will be syled differently from its peers

Simple Exercise

https://github.com/DigitalHistory/css-styling/