In addition to setting a style for a HTML element, CSS allows
you to specify your own selectors .
Types of selectors:
1.Tag selectors/Element selectors: Every html tag’s attributes
can be implemented as properties of a selector.These are called
Tag selectors.
Example :5
<html>
<head>
<style type=”text/css”>
Body{background-color:#00ddcc}
</style>
</head>
<body>
<h2>example for tag selector</h2>
<p> An external style sheet is a separate file which contains
css rules .with this file, we can apply uniform style to one or
more web pages using <link> element.</p>
</body>
</html>
2.Type selectors:
It is like user-defined selector and we can use it as tag
selectors.
Example:6
<html>
<style>
type1{ color:#00ff00; font-size:16px; }
</style>
<body>
<type1> just an example of type selector</type1>
</body>
</html>
3. Id selector : The id selector is used to specify a
style for a single, unique element.The id selector
uses the “id” attribute of the HTML element .
It is defined as "#".
Example:7
<html>
<head>
<style>
#color
{
text-align:center; color:red;
}
</style>
</head>
<body>
<p id="color">welcome to identifier World in cascading
style sheets. It is one kind of selector.which we
are implementing with
color red and centering the text</p>
<p>This paragraph is not affected by the style.</p>
</body></html>
4.Class selector:
The class selector is used to specify a style for a group of
elements. Unlike the id selector, the class selector is used
on several Html elements, with the same class.The class
selector uses the HTML
class attribute, and is defined with a "."
Example:8
<html>
<head>
<style>
.cls1
{
text-align:center;color:blue;background-color:yellow;
}
h2.cls2 { text-align:right;color:green}
</style> </head>
<body>
<h1 class="cls1">Class selector </h1>
<h2 class="cls2"> medha computers </h2>
<p class="cls1"> The class selector is used to specify a style
for a group of elements. Unlike the id selector, the class selector
is used on several Html elements, with the same class. </p>
</body></html>
Note: You can also specify that only specific HTML elements should
be affected by a class.in the above example, h2 element only
aligned right,and colored with green.
5.Group Selectors: If same rule applies to a set of elements,
they
can be grouped together.such selectors are called group selectors.
Example:9
<html>
<head>
<style>
h1,h2,h3 {font-family:arial;color:blue;size:16px}
</style></head>
<body>
<h1>welcome to medha computers</h1>
<h2>welcome to medha computers</h2>
<h3>welcome to medha computers</h3>
</body></html>
6.Universal selector:
Universal selector properties are applicable for all html elements
of webpage.it is donoted as ‘*” (asterisk).
Example:10
<html><head>
<style>
* {font-family:arial;color:blue;}
</style></head>
<body>
<h1>example for universal selector</h1>
<hr>
<p>welcome to css class..universal selector will be implemented
for all html elements in a web page</p>
</body></html>
