There are various ways or forms by which the selector can be defined. There are discussed along with examples one by one.
For example
Simple Selector Forms
The simple selector form is a single element to which the property and value is applied.
For example
h1{
font-size: 20pt;
color: red;
}
h2, h3{
font-family: script;
font-size: 28pt;
color: blue;
}
We can also apply property and value to group of elements. Following is an illustration for simple selector form.
<html>
<head>
<title>Simple selector form</title>
<style type="text/css">
h1{
font-size: 20pt;
color: red;
}
h2, h3{
font-family: script;
font-size: 28pt;
color: blue;
}
</style>
</head>
<body>
<h1>India is my Country</h1>
<h2>All the Indians are my brothers and sisters</h2>
<h3>I love my country</h3>
</body>
</html>
Class Selectors
Using class selector we can assign different styles to the same element. These different styles appear on different occurrences of that element.
For example
<html>
<head>
<title>Class selector form</title>
<style type="text/css">
h1.RedText{
font-family: Monotype Corsiva;
font-size: 14pt;
color: red;
}
h1.BlueText{
font-family: Arial;
font-size: 10pt;
color: blue;
}
</style>
</head>
<body>
<h1 class= "RedText" >India is my Country</h1>
<h1 class= "BlueText" >All the Indians are my brothers and sisters</h1>
<h3>I love my country</h3>
</body>
</html>
Note that in above given script we have used two different classes for the element h1. One class selector is for displaying the string in red color and another is for displaying the string in blue color. This definition is given in the head section. In the body section these class names appear in double quotes inside h1 tag.
Generic Selectors
We define the class in generalised form. In the sense, that particular class can be applied to any tag. Here is the HTML document which makes use of such generic selector.
<html>
<head>
<title>Generic class selector form</title>
<style type="text/css">
.RedText{
font-family: Monotype Corsiva;
color: red;
}
</style>
</head>
<body>
<center>
<h1> Tongue Twister </h1>
<center/>
<h2 class= "RedText" >
She sells sea shells on the sea shore.
</h2>
<h3 class= "RedText" >
The shells she sells are sea shells, I'm sure.
</h3>
<h4>
<p class= "RedText" >
Then I'm sure she sells seashore shells.
</p>
</h4>
</body>
</html>
Note that the class selector must be preceded by a dot operator.
id Selectors
The id selector is similar to the class selector but the only difference between the two is that the class selector can be applied to more than one elements where as using the id selector the style can be applied to the one specific element.
The syntax of using id selector is as follows -
For example
The syntax of using id selector is as follows -
#name_of_id {property:value list;}
For example
<html>
<head>
<title>id selector</title>
<style type="text/css">
#top{
font-family: Monotype Corsiva;
color: blue;
font-size:16pt;
}
</style>
</head>
<body>
<div id="top">
It is the mark of an educated mind to be able to entertain a thought without accepting it.
</div>
<p>
-Aristotle
</p>
</body>
</html>
Universal Selectors
This selector is denoted by * (asterisk). This selector can be applied to all the elements in the document.For example
<html>
<head>
<title>Universal Selector</title>
<style type="text/css">
*{
color: green;
}
</style>
</head>
<body>
<h2> Famous Proverbs </h2>
<hr/>
<ul type="disc">
<li>A friend in need is a friend indeed</li>
<li>Cleanliness is next to Godliness</li>
<li>God helps them who help themselves</li>
</ul>
<br/><br/>
<em>
-From Collection
</em>
</body>
</html>
....
ReplyDelete