March 3rd, 2019 
Nilesh Chaurasia CSS id selector
id selector is used to apply the CSS Style to an HTML element with the use of id attribute. CSS id selector is defined by the Hash(#) character.
id selector is used to apply the CSS Style to a unique HTML Element. The id of an HTML Element define unique in the Web Page
Example 1 – Style with CSS id selector
<!DOCTYPE html>
<html>
<head>
<style>
#red{
color: orange;
background-color: olive;
}
</style>
</head>
<body>
<h1 id="red">This is a heading</h1>
</body>
</html>
The above syntax shows that how can you apply the id CSS Style. Here an id with name is red create for the heading design specification.
Application of CSS id for Designing p HTML Elements
Their are different-different ways to apply the CSS Style through id selector.
Example 2 – Another example of CSS id to provide design specification for an HTML element
<!DOCTYPE html>
<html>
<head>
<style>
#top {
color: yellow;
background-color: teal;
}
#right {
color: olive;
background-color: darksalmon;
}
</style>
</head>
<body>
<p>This is a first paragraph<p>
<p id="top">This is a second paragraph.</p>
<p id="right">This is a third paragraph.</p>
</body>
</html>
Here three p elements and I want to have different look and feel in all the three p elements. In this example I have been provided CSS Style with two different id(top and right).
In the HTML part I have one p Element without any id, and browser will apply default design style to this p element.
In the HTML part I have one p Element with id attribute value as top, and browser will apply design style of top id to this p element.
In the HTML part I have one p Element with id attribute value as right, and browser will apply design style of right id to this p element.
Example 3 – You can apply an id to the different HTML Elements.
<!DOCTYPE html>
<html>
<head>
<style>
#right {
color: olive;
background-color: darksalmon;
}
</style>
</head>
<body>
<h1 id="right">This is a heading.</h1>
<p id="right">This is a paragraph.</p>
</body>
</html>
Here p and h1 two HTML elements and I want to have same look and feel in both HTML element.
In the HTML part I have one h1 Element with id attribute value as right, and browser will apply design style of right id to this h1 element.
In the HTML part I have one p Element with id attribute value as right, and browser will apply design style of right id to this p element.
Caution: class and id both selector work similar but the weightage of the id selector is more than class selector.
Posted in 
Tags: 
