Your SlideShare is downloading. ×
CSS Selectors
CSS Selectors
CSS Selectors
CSS Selectors
CSS Selectors
CSS Selectors
CSS Selectors
CSS Selectors
CSS Selectors
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

CSS Selectors

963

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
963
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. CSS Selectors
  • 2. What Is A Selector? The “element” that you define and apply styles to in your CSS rule.
  • 3. HTML Selectors HTML tags that have styles applied to them. p {color: red;} body {background: #ffffff;}
  • 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. 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. 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. Class Selectors Resist the urge to over-class!
  • 8. Descendant Selectors Used to apply styles to HTML tags that are descendants of other HTML tags in the document.
  • 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;}

×