Syntax:-
#element's id attribute
{
property_name1:value1;
property_name2:value2;
....................
......................
}
When
we Should go for ID Selectors:-
§
You should use IDs if only one element
on the page should have the style applied, and/or you need a unique identifier
for that element.
§
For example suppose we wants to just
change the text color of that paragraphs whose id is first to red not all
paragraph - the id selector is very strong!
§
you can target particular paragraph
elements (<p>) simply by writing the id of it in your style sheet:
<!DOCTYPE html>
<html>
<head>
<style>
#first{
color: red;
}
</style>>
</head>
<body>
<p id="first">This is the paragraph-1</p>
<p id="second">This is the paragraph-2</p>
<p id="third">This is the paragraph-3</p>
<p id="fourth">This is the paragraph-4</p>
<p id="fifth">This is the paragraph-5</p>
</body>
</html>
Output:
The CSS class Selector
§
The CSS class selector selects elements
based on the contents of their class attribute.
§
TO select element with a specific class,
write a period (.) character, followed by the name of the class.
syntax:-
.className
{
property_name1:value1;
property_name2:value2;
....................
......................
}
When
we Should go for class Selectors:-
§
You should use class if you should use
classes when your style needs to be applied multiple times on the same page.
§
For example, you might have many <p>
elements that need the same style applied. - The class selector is very strong!
§
you can target many paragraph elements
(<p>) simply by writing the class of it in your style sheet:
§
In given example we want to change the
color of first ,third, fifth paragraph you can target first ,third, fifth paragraph elements
(<p>) simply by applying class selector in your style sheet:
Example:-
<!DOCTYPE html>
<html>
<head>
<style>
.color{
color: red;
}
</style>>
</head>
<body>
<p class="red-text">This is the paragraph-1</p>
<p>This is the paragraph-2</p>
<p class="red-text">This is the paragraph-3</p>
<p>This is the paragraph-4</p>
<p class="red-text">This is the paragraph-5</p>
</body>
</html>
CSS Class Selector for specific element
§
Using class selector you can specify
that only specific html elements should be affected by a class.
p.center{
color:green;
text-align:center;
}
§
Now only paragraph elements should be
affected by this class.
Example:-
<!DOCTYPE html>
<html>
<head>
<style>
p.center{
color: red;
text-align: center;
}
</style>>
</head>
<body>
<h1 class="center">This heading is not affected</h1>
<p class="center">This paragraph is red and center-aligned.</p>
</body>
</html>
Output:
Applying more than one CSS Class Selector to html element
§
In class selector Html element can also
refer to more than one class.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.red {
color: #f33;
}
.yellow-bg {
background: #ffa;
}
.fancy {
font-weight: bold;
text-shadow: 4px 4px 3px #77f;
}
</style>>
</head>
<body>
<p class="red">This paragraph has green text.</p>
<p class="red yellow-bg">This paragraph has red text and a yellow background.</p>
<p class="red fancy">This paragraph has red text and "fancy" styling.</p>
<p>This is just a regular paragraph.</p>
</body>
</html>
Output:
<!DOCTYPE html>
<html>
<head>
<style>
/* All elements with class="intro" */
.intro {
color: red;
font-weight: bold;
}
/* All <li> elements with class="yellow-bg" */
li.yellow-bg {
background: #ffa;
}
/* All <li> elements with a class list that includes both "yellow-bg" and "fancy" */
li.yellow-bg.fancy {
font-weight: bold;
text-shadow: 4px 4px 3px #77f;
}
</style>>
</head>
<body>
<h1 class="intro">Programming Lang:</h1>
<ul>
<li class="yellow-bg">Java</li>
<li >Python</li>
<li>NodeJS</li>
<li>SQL</li>
<li class="yellow-bg fancy">NoSQL</li>
</ul>
</body>
</html>
The CSS Group Selector
§
Whenever you want to apply same style of
number of Html elements then we should go for Group Selector.
Example:
h1, h2, h3, h4, h5, h6 { color: greenyellow; }
§
Each element is separated by a comma
(except for the last element before the start of the declaration).
When
we Should go for CSS Group Selectors:-
§
Suppose you want to apply the same style
on every heading (h1, h2, h3, h4, h5, h6) tag just we want to change the color: greenyellow; and text-align: center
for all heading tag, and then you have needed to define
style separately for everyone. That maximizes the lines of code. Than defining same
style for every heading tag is not better then we moves group selector.
§
For example, you might have all heading
(h1, h2, h3, h4, h5, h6) tag elements that need the same style applied. - The group
selector is very strong!
§
you can target all heading elements
(<h1-h6>) simply by writing the group selector of it in your style sheet:
§
In given example we want to change the color
and text-align of all heading tag (<h1>…<h6>) you can target all
heading elements (<h1>...</h6>) simply by applying group selector in your style sheet:
<html>
<head>
<style>
h1, h2, h3, h4, h5, h6 {
color: blue;
text-align: center;
}
</style>
</head>
<body>
<h1>This is a heading-1</h1>
<h2>This is a heading-2</h2>
<h3>This is a heading-3</h3>
<h4>This is a heading-4</h4>
<h5>This is a heading-5</h5>
<h6>This is a heading-6</h6>
</body>
</html>
CSS Universal Selector (Star)
§
The universal selector can be used to
represent any element at all, and is specified using an asterisk (*).
§
Thus, use this declaration to make sure
all elements are purple:
§
Assume for a moment that you have a
document containing the following HTML elements: an H1, some paragraphs, a
table, some preformatted text, and an unordered list.
§
Now we want to change color for of all
the elements of a html page.
§
For the purposes of this specific
document, we are using universal selector.
§
writing * {color: green;} is exactly
the same as writing:
BODY, H1, P, TABLE, TR, TD, TH, PRE, UL, LI {color: green;}
§
Let’s try to understands some scenario .watch
the given below output here suppose we want to apply border to all paragraph
elements.
<html>
<head>
<style>
p{
border: 2px solid red;
}
</style>
</head>
<body>
<div>
<p>This is Paragraph-1</p>
<p>This is Paragraph-2</p>
<p>This is Paragraph-3</p>
<p>This is Paragraph-4</p>
<p>This is Paragraph-5</p>
</div>
</body>
</html>
§
Similarly I want to Apply the border for
this div element also I can use the help of group selected so I say here div
also should have the border 2px solid red;
§
go to file and with-in style tag use p,div{border: 2px solid
red;}and
save the file go to the browser and refresh we can see that the div element has
the border red border similarly what I want is I want to apply the border to
the body also then I can use p,div,body{border: 2px solid
red;} here
file save go to browser and refresh can see that the body also has the red
border I also want to apply to the HTML element so I say here p,div,body,html{border: 2px solid
red;} file
save go to browser and refresh you can see that even the HTML document has the
red border around it I am using so many tags here you can see if I have 100
HTML element then I have to write here all those HTML elements and then I say
border 2px solid that instead of writing like this we can simply write here star. star indicates
Universal selector.
§
It selects every HTML element on the
page or it selects any HTML elements on the page and applies to 2PX solid red border.
*{border: 2px solid red;}
§
I am telling to the browser locate any
HTML element apply the border 2px solid save file go to browser and refresh we
can see that all of them have that border.
§
Universal selector is used to target
every HTML element on the page and apply styles on all HTML elements on the page.
§
Now suppose I want to apply styles to
only first two paragraphs so I have to you take help of class attribute.
<html>
<head>
<style>
.firsttwo{
border: 2px solid red;
}
</style>
</head>
<body>
<div>
<p class="firsttwo">This is Paragraph-1</p>
<p class="firsttwo">This is Paragraph-2</p>
<p>This is Paragraph-3</p>
<p>This is Paragraph-4</p>
<p>This is Paragraph-5</p>
</div>
</body>
</html>
§
I am telling to the browser locate any
HTML element if it has a class attribute value set to firsttwo
apply the border 2px solid green save file
go to browser and refresh we can see that only first two paragraphs are
having the green border .even if I write
here *.firsttwo{border:
2px solid red;} it
works what is the meaning of star any HTML element right Universal selector it
is I am telling to the browser locate any HTML element on this page if it has
the class attribute value set to firsttwo then apply
the border 2px solid green file save go to browser and refresh let me show it
is working properly you can see that
first two paragraphs are having the red border applied without writing this
star also the same meaning star is something like of the optional thing like
that here I am telling star means any HTML element remember that .
*.firsttwo{border: 2px solid red;}
§
It selects any html element which has
class attribute value set firsttwo.
