Type Selector

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

The type selector, also known as the element selector or tag selector, targets HTML elements based on their tag names. It is one of the simplest and most fundamental selectors in CSS.

Here's the basic syntax for using a type selector:

tagname {
    property: value;
}

tagname: The name of the HTML tag you want to style (e.g., p, h1, div).
property: The CSS property you want to set (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, the type selector p targets all <p> (paragraph) elements in the HTML document. 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 with various elements, including headings (<h1>, <h2>), paragraphs (<p>), and divisions (<div>). Your task is to use type selectors to style these elements. Follow the steps below:

Write a CSS rule that targets all <h1> elements. Set the text color of the <h1> headings to darkred.
Write a CSS rule that targets all <h2> elements. Set the text color of the <h2> headings to green.
Write a CSS rule that targets all <p> elements. Set the text color of the paragraphs to blue and the font size to 18 pixels.
Write a CSS rule that targets all <div> elements. Set the background color of the divisions to lightblue.

Cheat sheet

The type selector (also called element selector or tag selector) targets HTML elements based on their tag names.

Basic syntax:

tagname {
    property: value;
}

Example targeting all paragraph elements:

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

This applies the styles to all <p> elements in the document.

Try it yourself

<html>
<head>
    <title>Type Selector</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a main heading</h1>
    <h2>This is a subheading</h2>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>