ankitweblogic logo
W e b t u t o r i a l s

Define CSS

CSS Comment

CSS Selectors

Types of CSS

CSS Color Property

CSS Font Property

CSS Background

CSS Box Model

CSS3 Border Radius

Styling HTML Table

Styling Links

CSS Menu

CSS Display and Visibility

CSS Overflow Property

CSS Position, Z-index

CSS Outline, Offset

CSS Cursor Property

CSS3 box-sizing

CSS Web Layout

CSS Website

Google Fonts

Google Map

Login Form

Google Page

Facebook Page

CSS Assignment List

CSS Selectors

CSS selectors allow you to select and manipulate HTML elements based on their element name, class name, id name, and attribute value.


The Element Selector

The Element Selector selects HTML Elements based on their element name. For example, you can select all <p> tag/elements on a page shown in the below example:
Example: To Style all paragraph with centered align and red color.

Output

The id Selector

An id selector uses the id attribute to style a particular HTML element. An id should be unique within a HTML page, So, the id selector is use to select a single element. An ID Selector starts with the hash (#) symbol, followed by a id name, and then style definition.
The style rule below will be applied to the HTML element with id="para1":

Output

The Class Selector

Class Selector is useful when you want to apply formatting to different HTML elements with the same format. The class selector starts with a period (.) character followed by the class name, and then style definition.
Example 1: All HTML elements with class="center" will be center-aligned:

Output

Example 2: All <p> elements with class="center" will be center-aligned.

Output:

Difference Between Class Selector and ID Selector

Class names are usually given to groups of elements instances sharing some common style whereas ID is used to identify one specific instance of an element.


Grouping Techniques

Grouping technique is useful when you are using the same style to different HTML tags.
"Without grouping, the syntax would be":

It can be grouped, to minimize the code. To group selectors, separate each selector with a comma.