Css id & class selector

484 views

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
484
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Css id & class selector

  1. 1. CSS Id and Class« Previous Next Chapter »The id and class SelectorsIn addition to setting a style for a HTML element, CSS allows you to specify your own selectors called"id" and "class".The id SelectorThe 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="para1":Example#para1{text-align:center;color:red;}Try it yourself » Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.The class SelectorThe class selector is used to specify a style for a group of elements. Unlike the id selector, the classselector 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.center {text-align:center;}
  2. 2. Try it yourself »You can also specify that only specific HTML elements should be affected by a class.In the example below, all p elements with class="center" will be center-aligned:Examplep.center {text-align:center;}Try it yourself » Do NOT start a class name with a number! This is only supported in Internet Explorer.<html><head><style type="text/css">#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><html>
  3. 3. <head><style type="text/css">.center{text-align:center;}</style></head><body><h1 class="center">Center-aligned heading</h1><p class="center">Center-aligned paragraph.</p></body></html><html><head><style type="text/css">p.center{text-align:center;}</style>
  4. 4. </head><body><h1 class="center">This heading will not be affected</h1><p class="center">This paragraph will be center-aligned.</p></body></html>

×