Introduction to CSS (Cascading Style Sheets)

In the early days of the web, people used to style their pages using explicit styling tags such as <font>, <center> and <strike> (all of which have long been deprecated and should never be used today). This was inflexible, difficult to maintain, and conflated presentation with the document structure.

CSS emerged in the mid-90s as a way to make styling webpages easier. It's core idea was to replace explicit styling in HTML with styling rules which could be applied to multiple elements; this would have the benefits of (a) reducing duplication, and (b) separating styling instructions from content.

CSS works by selecting some group of elements (using a special reference called a selector) and defining a set of properties and values to apply to that group of elements. The general syntax for this is:

selector {
  property: value;
  property: value;
}

A specific example is

p {
  font-size: 24px;
  color: white;
  background-color: green;
  border-bottom: 5px solid red;
}

Adding CSS to a Webpage

To add CSS to a page, either include it

  1. Inline, within an element.

  2. Between two <style> tags, typically in the the <head> of the document.

  3. Most Common In a separate file referred to by a <link> tag, also typically in the the <head>. The syntax for using a <link> tag is <link rel="stylesheet" href="..."> where 'href' is set to the location of the desired stylesheet.

Basic Selectors

There are many different types of selectors you can use (See the table below). For now let's keep it simple and try out one or two selectors.

Selector
Name

p, h1

Element selector

#container

ID selector

.todo-item

Class selector

.ancestor .descendant

Descendant selector

.parent > .child

Child selector

Properties

There are many, many CSS properties available to us. We will touch on a few properties, but we'll also want to get comfortable searching for what we need using the CSS property documentation.

Colour

We can declare the colour of text inside a given element with the color property. To declare background colour, we can use background or background-color.

h1 {
  /* Sets font color to black using a hex code */
  color: #000000;
  /* Sets background color to white using a hex code */
  background-color: #ffffff;
}

There are 6 different ways to specify colour in CSS. They are: keyword, hexadecimal, RGB, RGBA, HSL, and HSLA. All of these formats are reduced to RGB/A by the browser. In general, we want to use hexadecimal colours, whenever we aren't specifying transparency using the alpha channel provided in the RGBA or HSLA formats.

You will most often see the use of hex codes, or hexadecimal codes, which represent the red, green, and blue values of the colour using letters and numbers.

You don't need to memorise these codes, instead there are many resources to use to find the hexadecimal code of a given colour, such as the MDN Color Keywords Hex Code Table.

Fonts

We set fonts using the font-family property. In addition to the built-in fonts, you can also find fonts using Google Fonts or other services.

When defining a font, you can use family names, such as 'Garamond', or generic names, like serif.

p {
  /* Sets the font-family to use 'Garamond'. If that font cannot be loaded,
  uses the generic serif font as a default. */
  font-family: 'Garamond', serif;
}

We don't know what fonts are installed on our users' computers, so we always specify a generic font family as a back up (i.e., san-serif or serif). The generic should be the last in the list of supplied font-family values. Note that specific font names are quoted, but the generic is not.

p {
  /* If there's no Roboto available try Arial
    If there's no Arial use the default sans-serif
    font installed on the system.
  */
  font-family: "Roboto", "Arial", sans-serif;
}

Font sizes are controlled using the font-size property. px is a common unit in CSS (we will learn more of them in a future class). px sets an absolute pixel size.

p {
  font-family: "Roboto", "Arial", sans-serif;
  font-size: 24px;
  font-weight: bold;
}

We can set the boldness of a font using the font-weight property using values of normal, bold, lighter, bolder, and numeric values (read the docs for how the numbers correspond to the weight of a font).

p {
  font-family: "Roboto", "Arial", sans-serif;
  font-size: 24px;
  font-weight: bold;
}

Styling Lists

We can change the bullet style of HTML lists using the list-style-type property. The value can be disc, circle, square, any quoted text (like an emoji), and more.

ul {
  list-style-type: "🦆 ";
}
PreviousDay 3: CSS and JSNextIntroduction to JS (JavaScript)

Last updated

Was this helpful?