CSS
  1. CSS intro
  2. CSS stylesheets
  3. CSS syntax
  4. CSS Classes & ID's
  5. CSS comments
  6. CSS BG properties
  7. CSS text properties
  8. CSS font properties
  9. CSS list properties
  10. CSS border properties
  11. CSS margin properties
  12. CSS padding properties
  13. CSS outline properties
  14. CSS table properties
  15. CSS dim properties
  16. CSS class properties
  17. CSS position properties
  18. CSS pseudo classes
  19. CSS pseudo elements
  20. CSS shortcuts
  21. CSS media types
  22. CSS summary

CSS Classes and ID's

Why should a particular style be specified only for particular tags? Classes and ID's make it possible to specify a particular style for a variety of tags. With classes and ID's, you can also define different styles for the same HTML tag.

This tutorial focuses on:

Classes

With classes, you can specify different styles for the same HTML tag.

For example, you can specify two paragraphs to have different color text:

Example:
p.green {color: green;} p.blue {color: blue;}

To specify a tag as part of a class, you have to use the class attribute within that tag:

Example:
<p class="green">This text is green</p> <p class="blue">This text is blue</p>

Styles for classes are specified with the . (dot) character followed by the class name in an internal or external stylesheet.

Example:
<style type="text/css"> .text{ font-family: tahoma; font-size: 16px; font-weight: bold; color: green; } </style>

In the above example, the class text is specified to have a font type of tahoma, a font size of 16 pixels, to be bold, and green. Any tag specified as part of the text class will get these properties.

Based on the stylesheet from above:

<p class="text">This text will be green, bold, tahoma, and have a font size of 16 pixels</p>
Will be displayed as:

This text will be green, bold, tahoma, and have a font size of 16 pixels

NOTE: Begin class names with letters only, not numbers. Class names that begin with numbers do not work in Mozilla/Firefox browsers.

ID's

ID's are specified with the # (pound sign) followed by the ID name in an internal or external stylesheet.

Example:
<style type="text/css"> #text{ font-family: georgia; font-size: 18px; font-weight: bold; color: blue; } </style>

In this example, the text ID is specified to have a typeface of georgia, a font size of 18 pixels, to be bold, and blue. Any tag specified as part of the text ID will get these properties.

Based on the stylesheet from above:

<p id="text">This text will be blue, bold, georgia, and have a font size of 18 pixels</p>
Will be displayed as:

This text will be blue, bold, georgia, and have a font size of 18 pixels

NOTE: Begin ID names with letters only, not numbers. ID names that begin with numbers do not work in Mozilla/Firefox browsers.

© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information