CSS - Element Selectors

Quiz

Element Selectors in CSS

CSS element selectors are used to target and style specific HTML elements. These selectors are defined by simply using the element's name in the stylesheet.

Syntax

The syntax for CSS element selectors is as follows:

element_name {
    /*property: value;*/
    color: red;
}

Using Element Selectors Setting Background Color

To set the background color and text color of all <p> elements, use the element selector.

Example

The following example sets the background color and text color for all <p> elements.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Element Selectors</title>
    <style>
        p {
            background-color: #04af2f;
            color: white;
        }
    </style>
</head>
<body>
    <p>Welcome to CSS Element Selectors</p>
    <p>This is paragraph 1</p>
    <p>This is paragraph 2</p>
</body>
</html>

Using Element Selectors Setting Border

The element selector can be used to add a border to all <div> elements.

Example

The following example adds a border to all <div> elements.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Element Selectors</title>
    <style>
        div {
            border: 3px solid #2a9d8f;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div>Welcome to CSS Element Selectors</div>
    <div>This is div 1</div>
</body>
</html>

Using Element Selectors Setting Font

To apply a font style to all <li> elements, use the element selector.

Example

This example sets the font size and font family for all <li> elements.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Element Selectors</title>
    <style>
        li {
            font-size: 18px;
            font-family: Verdana, sans-serif;
        }
    </style>
</head>
<body>
    <h2>Welcome to Tutorials Point</h2>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
    </ul>
</body>
</html>

Print Page