CSS SELECTORS

Tweet

Hi friend, Assalam-o-alaikum. As you know from few days we learn the html such as htmlbasic tags, html meta tags, text formatting in html. Today I am going to present tutorial on css selector. I don’t take your time much. lets start. What is css selector? Css selector contain of id and class with class and id you can specify any element on the page which you want to style. Css selector is used to identify or find the html elements which are based on their id, attribute etc. THE ELEMENT SELECTOR. The element selector is the base on element name. If you want to style paragraph use p tag identify the selector For example you want to select the paragraph and want to change its background or font. What you will do? Here is how we can do this is very easy P{ Background-color:violet red; font-family:Verdana; } In the above the case it design the all paragraph on the page and also their font but you want to design particular paragraph on the how we will do this? This is easy we can do this with css selector id and class. You add class or id tag. Like this. Html <p id=”important”>this is the important paragraph on the page we want design different from other</p> This is how we add id in html now we can indicate this paragraph particularly. Css #important{ Background-color:violet red; font-family:Verdana; }                                                                       What is id? For id selector we use id attribute with in the html tag. Id tag must be unique. It should be not repeated again and again The id is unique and it is use only one time in the whole page. The id can be identifying with the hash (#) character.                                                                                                  FOR Example #paragraph1 { Background-color:blue; } What is class? For class selector we use class attribute with in the html tag. The class can be used multiple times on the page. It can be repeated again and again. The class is not unique it can be use many times on the same page. The class selector can be identifying with the period (full stop). NOTE The same class can be use on multiple elements. The multiple classes can be use on same elements. For example. .paragraph2{ background-color:green; } GROUPING SELECTOR. The grouping selector is use when you want to apply same style to different elements. For this you can use group selector. It reduces your effort to write same code again and again. For example: if you want to change the font family of all headings. h1,h2,h3,h4,h5,h6{ font-family:Gorgia;  }                                                   FINAL WORDS. In the above we mentioned the basic selector which commonly used by every one Inshallah in few days we will discuss on the advanced css selector but it is important that you have basic understanding of selector. Please keep visiting and share our post with your friends. Thanks!

Hi friend, Assalam-o-alaikum.

As you know from few days we learn the html such as htmlbasic tags, html meta tags, text formatting in html. Today I am going to present tutorial on css selector. I don’t take your time much. lets start.

What is css selector?

Css selector contain of id and class with class and id you can specify any element on the page which you want to style.

Css selector is used to identify or find the html elements which are based on their id, attribute etc.

THE ELEMENT SELECTOR.

The element selector is the base on element name.

If you want to style paragraph use p tag identify the selector

For example you want to select the paragraph and want to change its background or font. What you will do? Here is how we can do this is very easy

P{
Background-color:violet red;
font-family:Verdana;
}

In the above the case it design the all paragraph on the page and also their font but you want to design particular paragraph on the how we will do this? This is easy we can do this with css selector id and class. You add class or id tag. Like this.

Html
<p id=”important”>this is the important paragraph on the page we want design different from other</p>

This is how we add id in html now we can indicate this paragraph particularly.

Css

#important{

Background-color:violet red;
font-family:Verdana;
}                                                                     

 What is id?

For id selector we use id attribute with in the html tag.

Id tag must be unique. It should be not repeated again and again

The id is unique and it is use only one time in the whole page.

The id can be identifying with the hash (#) character.

                                                                                                

FOR Example

#paragraph1 {

Background-color:blue;
}

What is class?

For class selector we use class attribute with in the html tag.

The class can be used multiple times on the page. It can be repeated again and again.

The class is not unique it can be use many times on the same page.

The class selector can be identifying with the period (full stop).

NOTE

The same class can be use on multiple elements.

The multiple classes can be use on same elements.

For example.

.paragraph2{
background-color:green;
}

GROUPING SELECTOR.

The grouping selector is use when you want to apply same style to different elements. For this you can use group selector.

It reduces your effort to write same code again and again.

For example: if you want to change the font family of all headings.

h1,h2,h3,h4,h5,h6{
font-family:Gorgia;
 }
                                                 

FINAL WORDS.

In the above we mentioned the basic selector which commonly used by every one Inshallah in few days we will discuss on the advanced css selector but it is important that you have basic understanding of selector. Please keep visiting and share our post with your friends. Thanks!