• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Css id & class selector
 

Css id & class selector

on

  • 384 views

 

Statistics

Views

Total Views
384
Views on SlideShare
384
Embed Views
0

Actions

Likes
0
Downloads
8
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft Word

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Css id & class selector Css id & class selector Document Transcript

    • 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;}
    • 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>
    • <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>
    • </head><body><h1 class="center">This heading will not be affected</h1><p class="center">This paragraph will be center-aligned.</p></body></html>