Build Your First Web Pages With HTML and CSS

In this course part, you'll get a deeper dive into CSS than the small snippets you've already seen. We'll start with a closer look at CSS syntax; once you understand the basic structure of a CSS statement, you really can do anything you want with the language.

The basic structure of a CSS statement is as follows:

selector: the HTML element you want to modify. It's called a "selector" because you're selecting the element. Fancy that!
property: the element's CSS property you want to modify, like its color, spacing, etc.
value: the new value of the CSS property, like "blue" for its color.

Imagine you are ordering in a Thai restaurant. A custom order would involve selecting the item you want to modify and changing its properties. Let's say you want red curry that's extremely spicy, and you want them to hold the onions. Translated to CSS, your order might look like this:

curry {
    color: red;
    spice-level: extreme;
    onions: none;
}

Of course, you won't be working with food items in CSS!

Here is a real example that you might see in CSS that involve selecting HTML elements; not Thai food!

p {
    color: white;
    background-color: blue;
    font-family: Arial;
}

The code follow the same structure you saw above:

1. Select the HTML element using its name, like h1 or p. 

2. Open a set of curly braces. There will also be a space between the element name and the first curly brace.

3. Type a CSS property, and set its value. Conclude each of these lines with a semicolon. (You don't know many properties or possible values, yet, but that's fine!)

4. Close the curly braces on a new line.

You can also select elements based on class or id. To select an element using a class from its HTML, use a period. The following code selects all elements with a class of "warning":

.warning {
    background-color: orange;
}

To select an element using an id from its HTML, use a pound sign. The following code selects the element with an id of "intro":

#intro {
    color: blue;
}

Cascading effect

CSS stands for "Cascading Style Sheets," which means that the CSS you write "cascades" throughout your style file. When modifying the appearance of HTML content using CSS, you'll often have many CSS rules.

If the same element is affected by multiple appearance modifications, the line of code farthest down the CSS page will take precedence.

In the following example, the relevant paragraph would be teal -- not indigo!

p {
    color: indigo;
}

p {
    color: teal;
}

Bear this in mind as you write CSS so you don't get unexpected visual effects that are just the result of stray code.

In the next chapter, we'll look quickly at where to write CSS.

After that, we'll jump into an exploration of our first property (which is also one of the most satisfying): color!