Class 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 occurences per page.

4.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.

5.This allows you to set a particular style for any HTML elements with the same class.

6.The class selector uses the HTML class attribute, and is defined with a "."
To add an extension to the CSS code and make sure to specify this extension in HTML.

Example: 1

.center

             {
              text-align:center;
             }
       </style>
</head>
<body>

<h1 class="center">Center-aligned heading</h1>

<p>This is a normal paragraph.</p>

<p class="center"> This is a paragraph that uses the p.center CSS code.</p>

</body>
</html>

Output

Center-aligned heading

This is a normal paragraph.

This is a paragraph that uses the p.center CSS code.

Example: 2

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>

Output

This heading will not be affected

This paragraph will be center-aligned.

Example: 3

p.one

{
border-style:solid;
border-color:red;
}

p.two

{
border-style:solid;
border-color:#98bf21;
}
</style>
</head>
<body>

<p class="one">A solid red border</p>
<p class="two">A solid green border</p>

<p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>
</body>
</html>

Output

A solid red border

A solid green border

Note: The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.

Example: 4

.mystyle

                 {
                   color: red;
                   background-color: blue;
                 }
</style>
</head>
<body>

<font class=mystyle> hello every body </font>

<br />

<a href="index.php" class=mystyle>click me </a>

</body>
</html>

Output

hello every body
click me

Example: 5

           ul.a {list-style-type:circle;}
           ul.b {list-style-type:square;}
           ol.c {list-style-type:upper-roman;}
           ol.d {list-style-type:lower-alpha;}

</style>
</head>
<body>
<p>Example of unordered lists:</p>

<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>

<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>

Output

Example of unordered lists:

Coffee
Tea
Coca Cola

Coffee
Tea
Coca Cola

Example of ordered lists:

Coffee
Tea
Coca Cola

Coffee
Tea
Coca Cola

CSS Tutorials

Adscend

9.9.13

Class Selector

Class Selector

Center-aligned heading

This heading will not be affected

No comments:

Post a Comment