CSS Selectors Style

CSS Selectors Style

CSS selectors allow you to select manipulate HTML elements (that you define).

Selectors are used to "find" or select HTML elements that based on  their id (#id_name), class (.class_name), type(element_type), attribute, and more other.

Element Selector
It's based on the element name.

You can select all paragraph <p> elements on a page like this: (all <p> elements will be center aligned, with a blue text color and font size 14 pixel)

p {
    text-align: center;
    color: blue;
    font-size:14px;
}

ID Selector
id selector uses to the whole block attribute of an HTML element to select a specific element.

To select an element with a specific id, write a hash(#) character (#id_name).

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

#paragraph {
    text-align: center;
    color: blue;
    font-size:14px;
}


Class Selector
Class selector uses to the whole block attribute of an HTML element to select a specific element.

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

The style rule below will be applied to the HTML element with class="paragraph":

.paragraph {
    text-align: center;
    color: blue;
    font-size:14px;
}

Group selectors
you can group the selectors, to minimize the code.

To group selectors, each selector separate with a comma(,).

h1, h2, h3 {
    text-align: center;
    color: blue;
}