Introduction to CSS

Kay Ashaolu

CSS

Cascading Style Sheets

Style

  • color, size, visibility, positioning
  • Specified separately from HTML
  • Why separate?

CSS


<strong>hello</strong>

strong {
    font-weight: bold;
    color: magenta;
    font-size: 45px;
}

How else could we do it?

Just like the funky ASCII symbols, we could set the style of each element


<!-- Warning: Invalid HTML -->
<strong font-color="magenta" font-size="45px">hello</strong>

CSS File


h1 {
    color: #B3D4FC; /* light blue */
    text-align: center;
}
  • Now all main headers are centered and have a light blue look
  • What's the trade-off we made?

ID & Class attributes

  • id: Identifier. Unique per page
  • class: Grouping. Multiple per page and per element

<strong id="logo" class="big green">Ancestry</strong>

What's wrong with the above?

Compromises

  • Truth is, most sophisticated sites make a compromise
  • Sharing styles between semantic elements
  • Frameworks that are used by different sites

Leaky Abstraction

  • When details of the composition or layers merge
  • Often must write your HTML with knowledge of how you will style it
  • But avoid too much coupling!
  • Bootstrap

Element Selectors


strong {
    font-weight: bold;
    color: red;
    font-size: 45px;
}
  • Selectors specify the element to apply a style
  • This is selecting all strong elements

ID & Class Selectors


#logo {
    font-size: 64px;
    color: red;
}

.symbol {
    font-size: 32px;
    color: darkblue;
}
						

<span id="logo">Ancestry</span>
<span class="symbol">ANCESTRY</span>
<span class="symbol">New York Times</span>

Comma = OR


h1, h2, h3 {
    color: #B3D4FC; /* light blue */
    text-align: center;
}

all h1 or h2 or h3 elements

Descendant

  • Think nested tags
  • Let's write a table in HTML
  • What is an example of a descendant?

Descendant CSS = (space)


table a {
    font-weight: bold;
}

Cascading & Inheritance

  • Some properties are passed down to descendants, like font-family
  • Some elements may be affected by multiple rules, which "cascade"
  • Most specific wins

Cascading


table {
  font-family: sans-serif;
  color: blue
}

.data {
   border: 1px solid rgba(0, 0, 0, 0.2);
   color: red
}
						

<table>
<tr><td>Color blue</td></tr>
<tr><td class="data">Color red</td></tr>
</table>

What's the trade-off?

  • Now we can specify styles in another file
  • Can select groups of tags or tags with IDs
  • But how can we style individual tags?

Style Attribute

  • Change the style of individual elements in-line in HTML
  • Value of the style attribute is the same format as the definition block
  • Only for very special cases!

<h1 style="color: brown;
	background-color: yellow;">
	Individual</h1>

The power of CSS

Sneak Peak

  • JavaScript can manipulate CSS too!
  • Composability: they play well together, but don't require each other

Overview