Home >> Tutorials/FAQs >> CSS Tutorials >> Index

CSS Tutorials - Using Class Selectors to Differentiate Tag Instances

By: FYICenter.com

(Continued from previous topic...)

How To Use Class Selectors to Differentiate Tag Instances?

A more reliable way to identify tag instances is to use the class attributes and class selectors. In the CSS example below, class="url" is added to <P> tags for Web addresses, with a new CSS definitions using a class selector "P.url". All three selectors match the Web address text, but the class selector "P.url" wins because of the cascading order rules. So you will see Web addresses in bold "sans-serif":

<title>CSS Included</title>
<style type="text/css">
  /* matches P instances with class="url" only */
  P.url {margin-top: 0px; margin-left: 20px; 
    font-family: sans-serif; fond-weight: bold}

  /* matches P instances inside TABLE only */
  TABLE P {margin-top: 0px; margin-left: 40px; 
    font-family: serif; font-size: 12pt; color: blue}

  /* matches all instances of tag P */
  P {font-family: arial; font-size: 14pt; color: black}
<p>Welcome to FYICenter.com resource listings:<br> 
<tr><td><p class="url">www.w3.org</p></td>
  <td><p>W3 home page.<p></td></tr>
<tr><td><p class="url">www.php.net</p></td>
  <td><p>PHP home page.<p></td></tr>
<tr><td><p class="url">www.google.com</p></td>
  <td><p>Google search.<p></td></tr>

Note that Web address is displayed in blue. Why? Because color is not defined with "P.url", so "TABLE P" wins the color definition.

(Continued on next topic...)

  1. What Is CSS (Cascading Style Sheets)?
  2. What Is the Basic Unit of CSS?
  3. How Many Ways to Attach CSS to HTML Documents?
  4. How To Include CSS Inside an HTML Tag?
  5. How To Include CSS Inside the HEAD Tag?
  6. How To Store CSS Definitions in External Files?
  7. How Many Ways to Select HTML Tag Instances?
  8. What Is a Class Selector?
  9. What Is an ID Selector?
  10. What Is a Contextual Selector?
  11. What Is a Group Selector?
  12. What Is a Mixed Selector?
  13. What Are the Pseudo Classes on <A> Tags?
  14. How To Group CSS Definitions Together?
  15. What Is Style Property Inheritance?
  16. What Is CSS Cascading?
  17. What Are the CSS Cascading Order Rules?
  18. How To Remove the Top White Space of Your Web Page?
  19. How To Set Different Text Fonts Inside Tables?
  20. How To Use Class Selectors to Differentiate Tag Instances?
  21. How To Use IDs to Override Classes?

Selected Developer Jobs: