CSS

INFO 253A: Frontend Web Architecture

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

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

ID & Class attributes

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

What's wrong with the above?

<strong id="logo" class="big red">Pinterest</strong>

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

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

ID & Class Selectors

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

.symbol {
    font-size: 32px;
    color: darkblue;
}
<span id="logo">Pinterest</span>
<span class="symbol">PINTEREST</span>
<span class="symbol">New York Times</span>

Comma = OR

 

all h1 or h2 or h3 elements

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

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