- Tag Selector
- Id Selector
- Class Selector
- Grouping
- Nesting
HTML Code-
<html> <head> <title>Title of Webpage</title> <style> h3{ color:red} p{ color:blue; text-align:center} </style> </head> <body> <h3>This heading will be red.</h3> <p>This text will be blue and center align.</p> </body> </html>
ID Selectors in CSS
ID Selector is used to call an HTML Element with id Attribute.
Id is always unique on a web page. We can not gives same ID to two different HTML Elements.
Id is basically an Attribute used in Opening or Start Tag. Inside double Quotation, the value of ID is given.
Id is always started with HASH ( #), than id value.
HTML Code-
<html> <head> <title>Title of Webpage</title> <style> #head1{ color:green} #para{ color:red; background:yellow} </style> </head> <body> <h3 id="head1">This heading will be green.</h3> <p id="para>This text will be red and background yellow.</p> </body> </html>
Class Selectors in CSS
Class Selector is used to call an HTML Element with class Attribute.
Class represesnt a group. We can gives same Class to two or more different HTML Elements.
Class is basically an Attribute used in Opening or Start Tag. Inside double Quotation, the value of Class is given.
Class is always started with DOT ( .), than class value.
HTML Code-
<html> <head> <title>Title of Webpage</title> <style> .head{ color:red} .para{ color:white; background:blue} </style> </head> <body> <h5 class="head">This heading will be red.</h5> <h3 class="head">This heading will be red too.</h3> <p class="para">This text will be white and background blue.</p> </body> </html>
Grouping in CSS
Grouping is used to call a group of HTML Element.
Unlike Class selector, we dont need to write class attribute with particular value.
We can group multiple tags, IDs and Classes. We use COMMA (,) to separate Selectors in grouping.
HTML Code-
<html> <head> <title>Title of Webpage</title> <style> h5,h3,p{ color:red; text-align:center; } </style> </head> <body> <h5>This heading will be red.</h5> <h3>This heading will be red too.</h3> <p class="para">This para will be red too.</p> </body> </html>
Nesting in CSS
Nesting is used to call a particular child of parent Element.
If we are calling a P tag, all Para Tags will be selected..
We can Nest a particular tag of parent using nesting.
We use single space bar to relate child of particular tag
HTML Code-
<html> <head> <title>Title of Webpage</title> <style> p{ color:red} .header p{ color:white; background:gray} /*This is Nesting */ </style> </head> <body> <div class="header"> <p>This para is inside div. </p> </div> <p>This para is outside div.</p> </body> </html>
No comments:
Post a Comment