1. Contents
  2. 15. Styling the Web With CSS
  3. 15.2. CSS Syntax

15.2. CSS Syntax

In the HTML chapter, we added attributes to some elements to control their appearance on the webpage. This is called inline styling, because we assign different property values inside one line of HTML:

<tag_name style="property:value; property:value; property:value">Content</tag_name>

While this works fine, the syntax becomes tedious when we want to style multiple elements the same way.

Example

Let’s say we want every heading on our webpage to show blue text and be centered on the page. Using inline styling, the HTML might look something like:

1
2
3
4
5
6
7
8
9
<body>
   <h1 style="color:blue; text-align:center">Main Page Heading</h1>

   <h2 style="color:blue; text-align:center">Sub-heading #1</h2>
   <!-- Some content -->

   <h2 style="color:blue; text-align:center">Sub-heading #2</h2>
   <!-- More content -->
</body>

Notice that we include the same style="color:blue; text-align:center" attribute in each heading tag. We are repeating ourselves!

Fortunately, CSS allows us to DRY our code and reuse the same set of styling instructions across different elements.

15.2.1. Writing CSS

We can set many different style properties using CSS rules. A rule includes a selector and a declaration block. The selector determines which HTML elements the rule applies to. Inside the declaration block, we set CSS properties to specific values.

The general syntax is:

selector {
   declaration block
}

CSS includes a lot of different properties, and it would be difficult to memorize the names for them all. In this chapter, we will use only a few of the most common.

15.2.1.1. CSS Selectors

CSS has three different selectors that we can use to make our style choices.

  1. Element selector: Element refers to an HTML tag name. For example, if we use the selector p, then the styling we define applies to all paragraph elements on the webpage.
  2. Class selector: A class is a group of different HTML elements (like p and section) that need the same styling. The class name is determined by the programmer. Like variable names, a class name should be descriptive.
  3. ID selector: An id is a specific identification given to a single element in an HTML file. For example, if we want only one paragraph on our webpage to be bright pink, then we can assign it an id.

15.2.1.2. Declaration Blocks

The declaration block is a series of statements that assign values to a set of property names. Each line in the block sets one property value, and the block as a whole defines the style for the selector.

Examples

The syntax for a declaration block looks something like this:

1
2
3
4
5
selector {
   property: value;
   property: value;
   property: value;
}

For centered, blue h2 elements, the CSS would be:

1
2
3
4
h2 {
   color: blue;
   text-align: center;
}

Note that the second example above looks similar to the inline CSS we used at the start of this page, style="color:blue; text-align:center". In fact, the two produce the same result. The difference involves where we put the style instructions.

Inline styling instructions get placed inside the tags in an HTML file. As we will see in the next section, we can also put the CSS rules in the head element or even in a completely separate file.

Every property in CSS has a default value. For example, color, which controls text color, defaults to black. Therefore, we only need to set a CSS property if we want to change it from the default setting.

15.2.2. CSS Examples

Here are three different ways we can use selectors to make some of the text on a page pink.

15.2.2.1. Element Selector

This element selector sets the text color for <p></p> elements:

1
2
3
p {
   color: pink;
}

Using the element selector makes all paragraph elements on the page have pink text.

15.2.2.2. Class Selector

What if we only want a few of the paragraphs on the page to be pink? Also, what if we want some other elements on the page to have pink text as well?

For these cases, we can define a CSS class, like so:

1
2
3
.pink-text {
   color: pink;
}

In CSS, the class selector begins with a dot followed by a class name we choose (.class-name).

Unlike the element selector, class styling requires us to add a specific attribute to an HTML tag. For example, if we wanted one pink paragraph and one pink heading on our page, the HTML would look something like:

1
2
3
4
5
6
7
8
<body>
   <h1 class="pink-text">Main Page Heading (Pink)</h1>

   <h2>Sub-heading #1 (black text)</h2>

   <p class="pink-text">Some pink words here...</p>
   <p>Some black text here...</p>
</body>

By giving the elements on lines 2 and 6 the class attribute, we apply the pink-text styling rule to both. By leaving class="pink-text" out of the other tags, the text in those elements remains the default color (black).

15.2.2.3. ID Selector

If only one element on the page needs to have pink text, then we can add an id attribute inside that one tag. For example, <p id="pink-paragraph">Content</p>.

In CSS, we define the id selector like so:

1
2
3
#pink-paragraph {
   color: pink;
}

In CSS, the id selector begins with the symbol # followed by the name that we choose to give that one element.

Fun Fact

The # has several names/meanings.

  1. Number, as in #2 pencil (number 2 pencil).
  2. Pound weight, as in 77# (77 pounds).
  3. Pound, when referencing the button on a telephone keypad.
  4. Hashtag, for most appearances after 2006.

15.2.3. CSS Comments

Just like any programming language, we can add comments to our CSS code. The general syntax for this is:

/* Comment... */

The text of the comment comes between the /* and */ symbols.

15.2.4. Try It!

The editor below contains two files, index.html and style.css. We will learn about how to link these together on the next page. For now, just recognize that changes you make to the css file will change the styling applied to the HTML elements.

  1. Click on the file icon on the left side of the editor to switch between the .html and .css files. Flip back and forth between the two as you work with the code.

    Tip

    After making a change in either file, click on the Run button to update the webpage.

    Click the Open in a New Tab button in the output panel to see the whole webpage. You can refresh this tab at any time to update the view.

  2. The css file already contains the styling information for the h1 element. Using this as a model, add an h2 selector and assign only two property values in the declaration block:

    1. Set the text color to blue.
    2. Set the property text-decoration to underline.
    3. Click Run and notice how all of the h2 headings change.

  3. In the HTML file, two of the elements include the attribute class="gray-background". However, this class name does not exist in the css file yet!

    1. In the css file, add the .gray-background selector.
    2. Inside the declaration block, set the background-color property to lightgray.
    3. Set the text-align property to center.

  4. The styling for the id called main-article is defined in the css file. However, none of the elements in the HTML file use it.

    1. Select one element in the HTML file and add the attribute id="main-article" inside its starting tag. How does the webpage change?

    2. Try moving the id attribute to different elements in the HTML file.

      Note

      Only ONE element in an HTML file receives a particular id.

15.2.5. Check Your Understanding

Question

Which of the following correctly sets the text color inside a declaration block?

  1. color: green;
  2. color: "red";
  3. color = blue;
  4. color = "orange";