Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
CSS Selectors
What Is A Selector?

The “element” that you define and apply styles
to in your CSS rule.
HTML Selectors
HTML tags that have styles applied to them.

p {color: red;}
body {background: #ffffff;}
ID Selectors
• Matches the id attribute for HTML tags.
Ex. <p id=”example”>This is a paragraph of text</p>

• Value of the...
ID Selectors
Sample usage in a document:

<div id=quot;headerquot;>...</div>
<div id=quot;wrapperquot;>
 <div id=quot;main...
Class Selectors
• Matches the class attribute for HTML tags.
Ex. <li class=”example”>This is a list item.</li>

• Value of...
Class Selectors


Resist the urge to over-class!
Descendant Selectors

Used to apply styles
to HTML tags that are
descendants of other
HTML tags in the
document.
Descendant Selectors
Sample code:
<p>Lorem ispum dolorum
<a href=quot;http://www.xyz.comquot;>ipset</a>
</p>


Correspondi...
Upcoming SlideShare
Loading in …5
×

CSS Selectors

1,204 views

Published on

Published in: Technology
  • Be the first to comment

CSS Selectors

  1. 1. CSS Selectors
  2. 2. What Is A Selector? The “element” that you define and apply styles to in your CSS rule.
  3. 3. HTML Selectors HTML tags that have styles applied to them. p {color: red;} body {background: #ffffff;}
  4. 4. ID Selectors • Matches the id attribute for HTML tags. Ex. <p id=”example”>This is a paragraph of text</p> • Value of the HTML tag’s id attribute is matched by the ID selector. ID selector for the above example would be #example. •ID selectors are basically the HTML id attribute value preceded by an octothorpe (#). • ID selectors can only be used once in a web document. Typically used to label the sections (containers) of a page layout.
  5. 5. ID Selectors Sample usage in a document: <div id=quot;headerquot;>...</div> <div id=quot;wrapperquot;> <div id=quot;main_contentquot;>...</div> <div id=quot;sidebarquot;>...</div> </div> <div id=quot;footerquot;>...</div>
  6. 6. Class Selectors • Matches the class attribute for HTML tags. Ex. <li class=”example”>This is a list item.</li> • Value of the HTML tag’s class attribute is matched by the Class selector. Class selector for the above example would be .example. • Basically the HTML class attribute value preceded by a period (.). • Can be used multiple times in a web document. Typically used when the same style has to be repeated on a web page, with list items for example. • Can combine multiple class selectors in a HTML tag's attributes; each selector has its own set of rules. Ex. <li class=quot;main priorityquot;>...</li>
  7. 7. Class Selectors Resist the urge to over-class!
  8. 8. Descendant Selectors Used to apply styles to HTML tags that are descendants of other HTML tags in the document.
  9. 9. Descendant Selectors Sample code: <p>Lorem ispum dolorum <a href=quot;http://www.xyz.comquot;>ipset</a> </p> Corresponding style with descendant selector: p strong {color: red;}

×