CSS Syntax and Selectors

CSS Syntax

a CSS rule is a set of Selector and Declaration block shown in image blow

The Selector block is a HTML element which you want to style.

The Declaration block that consists of one or more property and values.

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 left-aligned, with a Green text color:

p {

    color: green;

    text-align: left;

}

---

CSS Selector:- 

CSS selectors are used to "find" (or select) HTML elements based on their element name, id, class, 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 left-aligned, with a green text color):

p {

    color: green;

    text-align: left;

}

---

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="green" will be green and center-left and size 24px:

.green {
    text-align: left;
    color: green;

    size:  24px;

}

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

In the example below, only <p> elements with class="green" will be left-aligned and size 24px:

p.green {
    text-align: left;
    color: green;

    size:  24px;

}

calling class in <p>

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

<p class="green red">Two classes are used in this paragraph</p>

if you want to use two or more class in one tag then you can use space and then type name of other class 

Note:

A Class name cannot start with a number!

---

ID Selector:- 

The 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 set of style rule below will be applied to the HTML element with named id="ana":

#ana {
    text-align: right;
    color: green;
     size: 24px;}

Note:

A ID name cannot start with a number!

---

CSS Comments:- 

Comments are used to explain the code, and may help to the other programmer who use your code or when you edit the source code at a later. Comments are ignored by the browsers 

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

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

/* This is
a multi-line
comment */

IF you have any question about this lecture you can comment blow. feel free to contact me.
you can also Visit my YouTube channel by clicking on this Link YouTube Channel.