CSS

A CSS rule finds elements with a selector (by element name, class or id) and formats them with the properties inside its curly braces, such as color, border, width and display.

Novice · HTML · CSS · Updated October 29, 2026

After this lesson you can

Target elements with element, class and id selectors, and list several selectors with commas
Style elements with color, background-color, border, width, height and display

Key takeaways

A CSS rule is a selector, then curly braces holding the formatting for the elements the selector finds.
An element selector, such as p, finds every element of that type on the page.
A class selector starts with a dot and finds every element with that class. An id selector starts with a hash sign and finds the one element with that id.
Commas between selectors apply one rule to all of them.
The display property can make any element block, inline or inline-block.

CSS (Cascading Style Sheets) is used to format a web page. A CSS stylesheet is made of rules, and each rule has 2 parts: the selector, and the formatting inside its curly braces.

CSS Selectors

A selector is used to locate one or more HTML elements on a page.

In order to apply formatting to an element it must first be located.

Element Selectors

An element selector (CSS's own name for it is a type selector) targets all matching HTML elements on the page. This is done by specifying the name of the HTML element before the curly braces as follows:

/* this will target all <p></p> elements */
p {

}

/* this will target all <a></a> elements (hyperlinks) */
a {

}

<body>
    <h1>Welcome to Introduction to CSS</h1>

    <p>
    This course will help you learn how to format your web pages
    using <a href="https://www.w3schools.com/css/default.asp">CSS</a>
    </p>
</body>

Class Selectors

A class selector allows developers to mark HTML elements on the page with a special class name, and then target those elements using CSS. This is done by specifying the name of the class before the curly braces. In the CSS file the class name must be preceded by a dot (.) as follows:

/* this will target all elements with a class named highlight */
.highlight {

}

<body>
    <h1>Welcome to Introduction to CSS</h1>

    <p>
    This course will help you learn how to format your web pages
    using <a class="highlight" href="...">CSS</a>
    </p>

    <p class="highlight">
    You will learn through projects and practical exercises.
    </p>
</body>

Notice that the highlight class can be added to different types of elements. This allows you to control how different elements are formatted just by marking them with a class.

Id Selectors

An Id selector allows developers to mark HTML elements on the page with a unique id, and then target that element by id using CSS. This is done by writing the element's id before the curly braces. In the CSS file the id must be preceded by a hash sign (#) as follows:

/* this will target the one element with the id first-paragraph */
#first-paragraph {

}

<body>
    <h1>Welcome to Introduction to CSS</h1>

    <p id="first-paragraph">
    This course will help you learn how to format your web pages
    using <a class="highlight" href="...">CSS</a>
    </p>

    <p class="highlight">
    You will learn through projects and practical exercises.
    </p>
</body>

Think of an id like you would a primary key in a database. There should only be one element on the page with the id of first-paragraph. This allows you to pinpoint exactly which element you want to target.

Combining Selectors

Often you want to apply the same formatting to multiple types of elements. You can target multiple elements by adding a comma-separated list in your CSS. A comma-separated list of selectors is called a selector list.

/* this will target all h1 through h6 tags on the page */
h1, h2, h3, h4, h5, h6
{

}

<body>
    <h1>Welcome to Introduction to CSS</h1>

    <p id="first-paragraph">
    This course will help you learn how to format your web pages
    using <a class="highlight" href="...">CSS</a>
    </p>

    <h2>What you will learn</h2>

    <p class="highlight">
    You will learn through projects and practical exercises.
    </p>
</body>

CSS Formatting

Once you have located your target elements you can apply formatting to those elements. The type of formatting that you can apply may depend on the element you have targeted.

Common formatting options include:

p {
    background-color: lightyellow;
    color: #990000; /* dark red text */
    border: solid 1px black;
    font-family: arial, sans-serif;
    width: 200px;
    height: 50px;
}

background-color fills the area behind the content.
color is the color of the text.
border draws a line around the element: its style, thickness and color.
width and height set the element's size.
font-family picks the typeface.

Changing the Display Type

We noted earlier that HTML includes 3 main display types: block, inline and inline-block. The default display type dictates whether an element can be on the same line as other elements, or even if the width and height can be adjusted.

Using CSS you can alter the display type of any element.

div {
    display: inline-block;
    /* divs will no longer occupy a full row */

    width: 300px;
}

a {
    display: inline-block;
    /* the width and height of hyperlinks can now be altered */

    width: 150px;
    height: 25px;
}

Check yourself

2 questions to try on the lesson page.

So what

Every style on every site starts the same way: find the elements with a selector, then say how they should look.

CSS