CSS Comments
·
Comments
are used to explain your code, and may help you when you edit the source code
at a later date. Comments are ignored by browsers.
·
A
CSS comment begins with "/*", and ends with "*/", like
this:
CSS Id and Class
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”#".
·
The
style rule below will be applied to the element with id="para1":
Example
<!
DOCTYPE html>
<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>
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:
Example 1
<! DOCTYPE html>
<Html>
<Head>
<Style>
.center
{
Text-align: center;
}
</style>
</head>
<Body>
<h1 class="center">Center-aligned
heading</h1>
<p class="center">Center-aligned paragraph. </p>
</body>
</html>
Example 2:
<! DOCTYPE html>
<Html>
<Head>
<Style>
p.center
{
Text-align: center;
}
</style>
</head>
<Body>
<h1 class="center">this heading will not be
affected</h1>
<p class="center">this paragraph will be
center-aligned. </p>
</body>
</html>
No comments:
Post a Comment