Overview of CSS

This lesson is part of the Web Programming 1 Course.

The 3 programming languages used when a browser displays a web page are:

  1. HTML - the content layer
  2. CSS - the presentation layer
  3. JavaScript - the behavior layer

We can put CSS code inside a style element (which is usually put inside the head element).

Rule Sets

CSS code is made up of rule sets.

A rule set starts with a selector, then a pair of curly braces. Inside the curly braces we place individual rules.

A rule consists of a property name, and the value that it is set to. A colon must come after the property name, and a semi-colon must come after the the value.

h1{
  color: red;
  background-color: gray;
}

The selector in this rule set is h1, which means that all the rules that are inside the curly braces will be applied to h1 elements. There are two rules inside the curly braces. The first one sets the 'color' property to red, and the second one sets 'background-color' property to gray. Note that the two rules are indented within the curly braces. Indentation is important! We'll be digging much deeper into selectors and rules/properties in the upcoming lessons.

Comments

You can put comments in your CSS code like so:

/* This is a comment */

3 ways to put CSS code into a web page

You can add a style element (inside the head element), and put CSS code in it like so:

<style>
  h1{ 
    color: red;
    background-color: gray; 
  }
</style>

You can create a stylesheet (a file that has a .css extension), put your CSS code in it, and then use a link element inside a web page to 'link' it to the stylesheet:

<link rel="stylesheet" href="some-folder/some-style-sheet.css">

You can add a style attribute to an element, and then use CSS code for the value:

<h3 style="color:orange; background-color: yellow;">This is an H3</h3>

Questions

  1. What is the purpose of a selector in a CSS rule set?
  2. What property would set inside a rule set to specify text color?
  3. What property would set inside a rule set to specify a background color?
  4. What are 3 ways that you can incorporate CSS code into a web page?