Id and class selector
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


Id and class selector






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

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.

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

Id and class selector Presentation Transcript

  • 1. ID and Class Selector in CSS Describe ID selector Describe class selector Differentiate ID from class selector (or reverse) Identify ID and class selector combined within a given HTML code Grouping Selectors
  • 2. Class SelectorIndicates the class or classes to which aparticular element belongs. Elementsthat belong to the same class mayshare aspects of their presentation.A class name can be any text you likebut can made up only ofletters, numbers, hyphens (-), andunderscores (_).
  • 3. To assign the class selector named “info” to aparagraph and a div element in your HTML code : <p class=”info”> CSS stands for Cascading Style Sheets. CSS lets you apply styling information to specific parts of your HTML, identified by tag name, or by IDs and classes you specify.</p> <div class=”info”> The div tag is used for block elements so line breaks can be created.</div>
  • 4. In CSS, class selectors are preceded by a dot (.) to identify them .For example, this CSS code will style any elements belonging to the “info” class, whatever those elements happen to be: .info {color: purple;}
  • 5. ID Selector Specifies a unique can be any text you identifier for an like but can made up element. must be only ofunique within a single letters, numbers, hypdocument; more than hens (-), and one element cannot underscores. The first share the same character must be a identifier. letter.
  • 6. To assign the ID selector “introduction”to a heading 1 element containing thetext Hello World !<h1 id=”introduction”> HelloWorld!</h1>
  • 7. selectors are preceded by a hash symbol (# ).The following CSS code would give the element with the ID “introduction” a blue foreground color: #introduction {color: blue;}
  • 8. CLASS IDSELECTOR SELECTOR preceded by a dot (.) preceded by a hash symbol (#) . targets any element thatcontain the given class name in its class attribute. Any element can have an id attribute, but that attribute’s valueA class attribute can be assigned may be used only once to any element in HTML, and within a single any number of elements can belong to the same class document .
  • 9. Grouping Selectors Group theselectors together Separate each if they share the individual selector same properties. by a comma Example: h1, h2, h3 { font – family: Arial ; font – style: Italic; }