CSS selector

CSS selector:

There are five types of selectors used in the CSS language.


Here, we will discuss the simple selectors of the CSS language.


The CSS element selector:

By name, this selector is select direct the elements of HTML

Example:


h1{

Color: red;

Background-color:white;

text-align:center;

}


The CSS id selector


The id attribute is used in the HTML page for selecting the unique element. These id attributes are also used for styling in the CSS.


css-simple-selector

How to style the id in CSS?

For the select elements with a unique id use hashtag(#) followed by the name of the id.

Example:


#header{

Color: red;

Background-color:white;

text-align:center;

}



How to style class in id?

The CSS class selector:

The class selector selects the element of HTML which uses the class attribute.

The dot(.) followed by the class name used for styling the class attribute. Following is an example of the class selector.

.classname{

Color: red;

Background-color:white;

text-align:center;

}


The universal selector:

The asterisk(*) is used as a universal selector selects all tags in the HTML page in the styling.

Example:

*{

Color: red;

Background-color:white;

text-align:center;


}


The group selector:


We can also select multiple-element at a time of HTML during the styling.

Example:

p{

color:red;

background-color:white;

font-weight:bold:

h1{

color:red;

background-color:white;

font-weight:bold:

}

h2{

color:red;

background-color:white;

font-weight:bold:

}


We can also style by grouped selecting due to saving time, and space.

The comma(,) is used as separator of grouped selector 

p, h1, h2{

color:red;

background-color:white;

font-weight:bold:

}

In this way, we can choose multiple elements that needed to be the same styling on the webpage.




If you have any confusion about the above topic, you can comment your query and subscribe to this programming blog.



Comments

Popular posts from this blog

how to cout in cpp

Flutter layout

input by cin in c++