CSS Tutorials - Introduction To CSS Basics

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

By: FYICenter.com

Part: 1 2 3 4 5

(Continued from previous part...)

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":

<html><head>
<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}
</style>
</head><body>
<p>Welcome to FYICenter.com resource listings:<br> 
<table>
<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>
</table>
</body></html>

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

How To Use IDs to Override Classes?

Class is a nice way to separate a group of tag instances. To identify one or two special instances, you can use the ID attributes and ID selectors. In the CSS example below, the ID selector "P#hot" wins over all other selectors, so the third row in the table will be in red:

<html><head>
<title>CSS Included</title>
<style type="text/css">
  /* matches P instances with id="hot" only */
  P#hot {color: red}

  /* 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}
</style>
</head><body>
<p>Welcome to FYICenter.com resource listings:<br> 
<table>
<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" id="hot">www.google.com</p></td>
  <td><p id="hot">Google search.<p></td></tr>
</table>
</body></html>

Part: 1 2 3 4 5

Selected Developer Jobs:

More...