03-03 And Now: CSS!

Matt Price

Reminder

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

Intro

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

div {
    border: 1px solid black;
}

div.main p {
    color:red;
}

#specialid {
    float:left;
}

When you look at a CSS file, you will see it is divided into a bunch of stanzas, like this. Each of these stanzas is called a "selector statement": They all follow the same pattern:

  • first, a selector that identifies the elements to which these instructions will apply
  • then an open brace "{" which marks the start of the actual instructions
  • then a series of property-value pairs. Each of these sets the value of a particular property (duh). Note that at the end of a property, there is always a semi-colon!
  • finally, a closing brace that ends the selector declaration.

Selector Anatomy

Selector types

<style>
h1 {
font-size: 2em;
color: red;
}
p {
font-size:5em}

.coolpara {
color:green;
}

#myfave {
color:yellow;
background-color: black;
}
</style>

<h1> Heading</h1>
<p class="coolpara">Some Content</p>
<p id="myfave">Some Content</p>

Though simple in principle, CSS selectors can be confusing. Here are some basic selector types:

  • Element selectors: these just give the element (like h1, p, div, span, etc.). they apply to all elements of this type.
  • Class selectors: these give the name of a class attribute that an HTML element may have. This selector will always begin with a period ("."). So for instance:
  • ID selector: this addresses the element with a particular ID:

Selector types


<style>
div#cssdemo h1 {
font-size: 3em;
color: red;
}
div#cssdemo p {
font-size:5em}

.coolpara {
color:green;
}

div#cssdemo #myfave {
color:yellow;
background-color: black;
}
</style>

<div id="cssdemo">
<h1> Heading</h1>
<p class="coolpara">Some Content</p>
<p id="myfave">Some Content</p>
</div>

Heading

Some Content

Some Content

More Selectors

<style>
 div#main p {
     color:red;
 }

 div#main > p.blue {
     color: blue;
 }
 </style>
 <div id="main">
     <p> regular (red) paragraph</p>
     <p class="blue"> not a regular paragraph (blue) </p>
 </div>

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%;
  }

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

Sizes

<style>
 p.fixed {
     font-size: 20px;
     background-color: gray;
     } 
 p.em-small {
     font-size: 0.6em;
     background-color: blue;
 }
 p.em-big {
     font-size: 2em;
     background-color: red;
 }
 div.pixel-box {
     width: 70px;
     height: 70px;
     border: 1px solid black;
 }
 div.percent-box {
     width: 20%;
     height: 30px;
     border: 1px solid black;
 }
 div.viewport-box {
     width: 30vw;
     height: 30vh;
     border: 1px solid black;
 }

</style>

<p class="fixed">This paragraph will follow the rules in p.fixed -- size 20px</p>
<p class="em-small">This paragraph will follow the rules in p.em-small -- size 0.6em</p>
<p class="em-big">This paragraph will follow the rules in p.em-big: 2em</p>

<div class="pixel-box">.pixel-box</div>
<div class="percent-box">.percent-box</div>
<div class="viewport-box">.viewport-box</div>

Simple Exercise

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