The id and class Selectors
In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called "id" and "class".The 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, and is defined with a "#".
The style rule below will be applied to the element with id="heading":
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#heading
{
color:red;
}
</style>
</head>
<body>
<h1 id="heading">Hello World!</h1>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
Do NOT start an ID name with a number!
The class Selector
The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.This allows you to set a particular style for many HTML elements with the same class.
The class selector uses the HTML class attribute, and is defined with a "."
In the example below, all HTML elements with class="center" will be center-aligned:
<!DOCTYPE html>
<html>
<head>
<style>
.heading
{
text-align:center;
color:#FF0000;
}
.para{
text-align:center;
color:#777;
}
</style>
</head>
<body>
<h1 class="heading">Center-aligned heading</h1>
<p class="para">Center-aligned paragraph.</p>
</body>
</html>
Do NOT start a class name with a number!
Other CSS Selectors:
The Universal Selectors:
Rather than selecting elements of a specific type, the universal selector quite simply matches the name of any element type :* {
color: #000000; } |
The Descendant Selectors:
Suppose you want to apply a style rule to a particular element only when it lies inside a particular element. As given in the following example, style rule will apply to <em> element only when it lies inside <ul> tag.ul em { color: #000000; } |
0 comments:
Post a Comment