Introduction to Selectors

Part of the Styling with CSS section of Coddy's HTML journey — lesson 10 of 76.

In CSS, selectors are patterns used to select the HTML elements you want to style. They are a crucial part of CSS rules, as they determine which elements the styles will be applied to.

There are various types of selectors, each targeting elements in different ways. Understanding selectors is fundamental to mastering CSS and creating well-styled web pages.

Here's a basic CSS rule with a selector:

selector {
    property: value;
}

selector: Targets the HTML elements to be styled.
property: The style attribute you want to change (e.g., color, font-size).
value: The value you want to set for the property (e.g., blue, 16px).

For example:

p {
    color: blue;
    font-size: 16px;
}

In this example, p is the selector, targeting all paragraph elements. The declarations set the text color to blue and the font size to 16 pixels for all paragraphs.

Challenge

Easy

You are given an HTML document. Use internal CSS to style the document with the following properties:

Set the background color of all h1 headings to green.
Set the text color of all h1 headings to white.
Set the font size of all paragraphs (p) to 18px.

You are given starter CSS code for it.

Cheat sheet

CSS selectors are patterns used to select HTML elements you want to style. They determine which elements the styles will be applied to.

Basic CSS rule structure:

selector {
    property: value;
}

selector: Targets the HTML elements to be styled
property: The style attribute you want to change (e.g., color, font-size)
value: The value you want to set for the property (e.g., blue, 16px)

Example targeting all paragraph elements:

p {
    color: blue;
    font-size: 16px;
}

Try it yourself

<!DOCTYPE html>
<html>
<head>
    <title>Selectors</title>
    <style>
        h1 {
            
        }
        p {
            
        }
    </style>
</head>
<body>
    <h1>John Doe</h1>
    <p>Web Developer</p>
</body>
</html>