Element Selectors

Written by

in

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;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;p&gt;Welcome to CSS Element Selectors&lt;/p&gt;&lt;p&gt;This is paragraph 1&lt;/p&gt;&lt;p&gt;This is paragraph 2&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</pre>


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;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div&gt;Welcome to CSS Element Selectors&lt;/div&gt;&lt;div&gt;This is div 1&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


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;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;h2&gt;Welcome to Tutorials Point&lt;/h2&gt;&lt;ul&gt;&lt;li&gt;HTML&lt;/li&gt;&lt;li&gt;CSS&lt;/li&gt;&lt;li&gt;Javascript&lt;/li&gt;&lt;/ul&gt;&lt;/body&gt;&lt;/html&gt;</pre>

Comments

Leave a Reply Cancel reply

More posts