CSS introduction

A quick introduction to CSS, what it is, what it does, and how to write it.

Go fullscreen: ⌃⌥F

CSS introduction

CSS — the look

The chocolate to our peanut

The only thing CSS knows how to do is make something look a certain way

It doesn’t understand content—only style

In a separate file — main.css

The folder structure we’re following, a folder named “css” with a file named “main.css” inside.

An example piece of CSS, h1 selector, with the colour set to purple.
The different parts of CSS code: rule set, selector, declaration, property & value.
HTML
<h1>Brontosaurus</h1>
<p class="intro">The “Thunder Lizard” with a long neck and long tail.</p>
<p>Not a <b>dinosaur</b> for a long time, but now, again, real.</p>
CSS
html {
  background-color: cornsilk;
  font-family: Georgia, serif;
}
b {
  color: forestgreen;
  font-weight: normal;
}
.intro {
  color: darkolivegreen;
  font-style: italic;
}
HTML
<h1>Brontosaurus</h1>
<p class="intro">The “Thunder Lizard” with a long neck and long tail.</p>
<p>Not a <b>dinosaur</b> for a long time, but now, again, real.</p>
CSS
html {
  background-color: cornsilk;
}
b {
  color: #22bb22;
}
.intro {
  background-color: rgba(85, 107, 47, .4);
  color: #fff;
}
CSS
h1 {
  background-color: #f2f1ed;      /* Colour behind text */
  color: #222;                    /* Text colour */
  font-family: Georgia, serif;    /* Suggested typeface & backup */
  font-size: 2rem;                /* Suggested size of the type */
  font-style: italic;             /* Italic or normal */
  font-weight: bold;              /* Bold, normal, or number like 200 */
  line-height: 1.5;               /* Multiplier against the size */
  list-style-type: square;        /* Bullets: none, circle, decimal, lower-alpha, etc. */
  text-align: center;             /* Left, right, center, justify */
  text-decoration: underline;     /* Underline or none */
  text-transform: uppercase;      /* Uppercase, lowercase */
}
img {
  width: 100%;                    /* Make the width fill the whole space */
}

Font sizes

Suggestions for the size to be displayed—user is always in control

  • rem — scalable size based on browser settings
  • em — scalable size based on parent element
  • px — don’t use for font-size—ever

Core typefaces

  • Arial
  • Verdana
  • Georgia
  • Times New Roman
  • Comic Sans (um… really!?)
  • Courier
  • Impact (not as reliable)

Google Fonts

Can’t just use any typeface available on your computer

Google has many good typefaces (Typekit too)

Include another CSS <link> tag

Start

CSS introduction

A quick introduction to CSS, what it is, what it does, and how to write it.