WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS Syntax and Selectors


CSS Syntax

CSS rules consist of two main parts: a selector, and one or more declarations:

Selectors are usually HTML elements that you need to change style.

Each declaration consists of an attribute and a value.

Property is the style attribute you want to set. Each attribute has a value. Properties and values are separated by colons.

Example

p
{
color:red;
text-align:center;
}
Try it yourself »

CSS Selectors

CSS selectors are utilized to choose HTML components dependent on their component name, class ,id, property, and more.


The component Selector

The component selector chooses components dependent on the component name.

You can choose all <p> components on a page this way (for this situation, all <p> components will be right-adjusted, with a green content color):

Example

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

The id Selector

id selector used to choose one extraordinary component

id selector utilizes the id quality of a HTML component to choose a particular component.

To select a component with a particular id, compose a hash (#) character, trailed by the id of the element.

The style rule underneath will be connected to the HTML component with id="para1":

Example

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

The class Selector

The class selector chooses components with a particular class attribute.

To select components with a particular class, compose a period (.) character, trailed by the name of the class.

In the precedent beneath, all HTML components with class="right" will be green and right-aligned:

Example

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

You can likewise determine that just explicit HTML components ought to be influenced by a class.

In the precedent beneath, just <p> components with class="right" will be correct aligned:

Example

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

HTML components can likewise allude to more than one class.

In the precedent beneath, the <p> component will be styled by class="right" what's more, to class="large":

Example

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

Grouping Selectors

If you have components with a similar style definitions, as this:

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

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

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

It is smart thought to amass selectors separate every selector with a comma.

It will be smarter to assemble the selectors, to limit the code.

In the precedent beneath we have gathered the selectors from the code above:

Example

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

CSS Comments

Comments are used to explain your code, and you can edit it at will, the browser will ignore it.

CSS comments start with "/*" and end with "* /", examples are as follows:

Example

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

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