WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS Syntax and Selectors


CSS Syntax

A CSS must be follow - set consists of a selector and a declaration block:

CSS selector

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon.

A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.

In the following example all <p> elements will be right-aligned, with a green text color:

Example

p {
    color: green ;
    text-align: right;
}
Try it yourself »

CSS Selectors

CSS selectors are used to select HTML elements based on their element name, class ,id, attribute, and more.


The element Selector

The element selector selects elements based on the element name.

You can select all <p> elements on a page like this (in this case, all <p> elements will be right-aligned, with a green text color):

Example

p {
    text-align: left;
    color: green;
}
Try it yourself »

The id Selector

id selector used to select one unique element

id selector uses the id attribute of an HTML element to select a specific element.

To select an element with a specific id, write a hash (#) character, followed by the id of the element.

The style rule below will be applied to the HTML element with id="para1":

Example

#para1 {
    text-align: right;
    color: green;
}
Try it yourself »

The class Selector

The class selector selects elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the name of the class.

In the example below, all HTML elements with class="right" will be green and right-aligned:

Example

.right {
    text-align: right;
    color: green;
}
Try it yourself »

You can also specify that only specific HTML elements should be affected by a class.

In the example below, only <p> elements with class="right" will be right-aligned:

Example

p.right {
    text-align: right;
    color: green;
}
Try it yourself »

HTML elements can also refer to more than one class.

In the example below, the <p> element will be styled according to class="right" and to class="large":

Example

<p class="right large">This paragraph refers to two classes.</p>
Try it yourself »

Grouping Selectors

If you have elements with the same style definitions, like this:

h1 {
    text-align: left;
    color: green;
}

h2 {
    text-align: right;
    color: green;
}

p {
    text-align: right;
    color: green;
}

It is good idea to group selectors separate each selectors with a comma.

It will be better to group the selectors, to minimize the code.

In the example below we have grouped the selectors from the code above:

Example

h1, h2, p {
    text-align: right;
    color: green;
}
Try it yourself »

CSS Comments

Comment are very useful it help ignoble by browser.

Comment are used to explain code and you can edit source code at a later date.

A CSS comment starts with /* and ends with */. Comments can also span multiple lines:

Example

p {
    color: green;
    /* This is a single-line comment */
    text-align: right;
}

/* This is
a multi-line
comment */
Try it yourself »