Scenario.

Now, you'll learn to know the most common types of CSS selectors, and how to implement them the right way, the right time and into the right document.

What Are CSS Selectors?

Selectors are the basic elements in CSS. They are used, to select HTML elements, which a defined declaration should be applied.

They are the connectors between HTML elements and CSS declarations.

Their works are to instruct the stylesheet to format specific elements in an HTML document using the defined declarations.

Types Of Selectors In CSS.

There are different types of Selectors in CSS.

Standard Selectors are used to select one or more elements in a document.

The values of their defined declaration could then be applied to the element in that document.

The Type Selector. [HTML Element]

The Type Selector, also known as Element Selector, is the most standard and often used selector in CSS.

This is always an HTML Element used as a selector, and declared in a CSS file [Stylesheet] with properties and values. And if the Element is used in an HTML document linked to the stylesheet, its contents will then be formatted accordingly as defined in the stylesheet.

See illustration below.

h1 {color:#FFD700;}
/*This will select all h1 elements in a 
document and format them to the color [gold].*/

The Class Selector.

The class Selector is defined with a [.] (period) before any choice of a name or a word without spaces or special signs. Except for the underscore.

This could be used in a document repeatedly to format the content of every HTML Element. Below is an example of a class definition.

.myFirstclass {font-size:12px; color:#FF0000;}

Almost every HTML Element has a CLASS Attribute. To use the CLASS Attribute for an Element in your document, use the name of the CLASS Selector you defined in CSS as the value of the HTML Attribute. Its declaration will then take effect on the content of that Element.

See illustration below.

<p class="myFirstclass">
Font size will be 12 pixels, and its 
color will be red when displayed in a browser.
</p>

The ID Selector.

The ID Selector, like the CLASS selector is also defined, but with [#] (hash) before any choice of a name or a word without spaces or special signs. Except for the underscore.

The ID Selector is also used for almost every HTML Element. However, this can and must be used uniquely.

The ID selector must be used just once in a document, unless defined with a different name.

Below is an example of an ID definition.

#myFirstID {background-image: url(header.png);} 
/*This will display a background 
image in a document.*/

Almost every HTML Element can contain an ID Attribute. To use the ID Attribute for an Element in your document, use the name of the ID Selector you defined in CSS as the value of the HTML Attribute. Its definition will then take effect on the content of that Element.

See illustration below.

<div id="myFirstID">
This will display the header.png image 
behind the DIV Element in this document.</div>

The Universal Selector.

The universal selector will select all Elements in a document at a time. It will then format them with the defined declaration.

This selector was introduced with CSS version 2. It's defined with [*] (Asterisk)

The example below will format all Elements in a document with the color green.

*{color:#009900;}

CSS Selectors Tutorial Video.