Css Selectors
Uploaded by
aswinsreekumar124Css Selectors
Uploaded by
aswinsreekumar124CSS Selectors
Css selectors are used to find (or select) HTML
elements based on their name,id,class attributes
• Element selector
• Id selector
• Class selector
• Universal selector
• Grouping selector
Element Selector
• The element selector selects elements based on the element name
For example if you can select all <p> elements on a page
<html><head><style>
p{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p >Me too!</p>
<p>And me!</p>
</body>
</html>
ID selector
• The id selector uses the id attribute of an HTML element to
select a specific element.
• The id of an element is unique within a page, so the id selector
is used to select one unique element!
• To select an element with a specific id, write a hash (#)
character, followed by the id of the element.
• An id name cannot start with a number
The CSS rule below will be applied to the HTML element with
id="para1":
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
Class Selector
• The class selector selects HTML elements with
a specific class attribute.
• To select elements with a specific class, write a
period (.) character, followed by the class
name.
• A class name cannot start with a number
In this example all HTML elements with class="center" will be red and
center-aligned:
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
• In this example only <p> elements with class="center" will be red
and center-aligned:
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
</body>
</html>
• In this example the <p> element will be styled according to
class="center" and to class="large":
<html><head><style>
p.center {
text-align: center;
color: red;
}
p.large {
font-size: 300%;
}
</style></head><body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and
center-aligned.</p>
<p class="center large">This paragraph will be red,
center-aligned, and in a large font-size.</p>
</body></html>
Universal Selector
The universal selector (*) selects all HTML elements on the page.
<html>
<head>
<style>
*{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
Grouping Selector
• The grouping selector selects all the HTML elements with the same
style definitions.
Look at the following CSS code (the h1, h2, and p elements have the
same style definitions):
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p{
text-align: center;
color: red;
}
• It will be better to group the selectors, to minimize the code.To group
selectors, separate each selector with a comma.
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>
