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;
}

Indentation is important!

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?