CSS ID Selector
1.ID = A person's Identification (ID) is unique to one person.
Class = There are many people in a class.
2.Sometimes it is often confuse to use CSS IDs and CSS Classes in appropriate place.
3.Use IDs when there is only one occurrence per page. Use classes when there are one or more occurrences per page.
4.We can use ID in that sense, there are usually only one menu per page, one banner, and usually only one content pane.
5.An "id" is a unique identifier.
6.Each time the attribute of ID is used in a document it must have a different value.
7.The id selector uses the id attribute of the HTML element, and is defined with a "#" symbol.
Example: 1
<html>
<head>
<style type="text/css">
#right{text-align:right}
#center{text-align:center}
</style>
</head>
<body>
<p id="right">This paragraph will right aligned.</p>
<p id="center">This paragraph will center aligned.</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
<head>
<style type="text/css">
#right{text-align:right}
#center{text-align:center}
</style>
</head>
<body>
<p id="right">This paragraph will right aligned.</p>
<p id="center">This paragraph will center aligned.</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
Output
This paragraph will right aligned.
This paragraph will center aligned.
This paragraph is not affected by the style.Example: 2
<html>
<head>
<style type="text/css">
P#right{text-align:right}
P#center{text-align:center}
</style>
</head>
<body>
<p id="right">This paragraph will right aligned.</p>
<p id="center">This paragraph will center aligned.</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
<head>
<style type="text/css">
P#right{text-align:right}
P#center{text-align:center}
</style>
</head>
<body>
<p id="right">This paragraph will right aligned.</p>
<p id="center">This paragraph will center aligned.</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
Output
This paragraph will right aligned.
This paragraph will center aligned.
This paragraph is not affected by the style.
No comments:
Post a Comment