Cascading Style Sheets

Written by Amanda Kern

Anatomy of a style

We should clarify a few points that are important to know prior to beginning a CSS layout. There are many resources available to aide you in learning additional aspects of CSS. But for now it's important we break down what makes up a style so that we are familiar with what we are looking at.

• Rules. Cascading style sheets are comprised of rules which style elements within our html documents. Rules are made up of selectors (either an html tag, class or id) which define properties and values for each rule. The example below will change the style of our selector (h2 heading tag) so that it's property (color) now has a value of #000000. This first example basically redefines an html tag. By redefining an html tag every time the tag is used in our html document it will be styled accordingly.
  
• Classes. Classes are a way to apply a style to an html tag. For instance, if we wanted just one element such as our h2 in the previous example styled differently than all other h2 elements we can apply a class so that it has a different appearance. You must apply a class to an html tag. Often times you can use a <span> tag to help you apply a class. This is important to know if you are using dreamweaver, as it seems to throw in span tags, sometimes unnecessarily. Additionally, classes are useful because they can be useful because they can be applied to multiple elements in a document. Let's introduce a class declared in our CSS file:
  
  

  .white {color: #FFFFFF;}

  Notice in the above example that a class can be identified by a period (.) prior to the name of the class. The above class would then be applied in your html document to an html tag, for example:
  
  

  <h2 class="white">This is a heading 2</h2>

  Once applied this example will change the style of our h2 tag to the color white.
• ID's. Similar to classes, ID's can apply additional styles to a document, usually to "identify" specific individual sections of a web page. ID's are generally applied to <div> tags (which we'll discuss in a moment). It's important to understand that an ID can only be applied to one html element in a document. Let's take a look at an example of the way the ID would be applied in a CSS file:
  
  

  #nav {float: left;}

  It's important that we recognize an ID can be spotted because it has a pound (#) sign preceding it. Just as in the last two examples, the properties and values are contained within the curly braces. This would then be applied to an html document, usually to a <div> tag which will discuss next.
• The <div> tag. So one of the most crucial elements in helping you learn to ditch tables is learning and understand the <div> tag. Generally the <div> tag is used in conjunction with an ID. A <div> should be considered as a division of a web page, think logically when creating a div tags (header, nav, content, footer). Don't create <div> tags for every single element in a web page. For those first learning tableless layouts in programs such as Dreamweaver, the <div> tag becomes misused by creating <div> tags or drawing layers for every element. If using Dreamweaver it is discouraged to use the drawing layer feature because it creates inline styles which should be avoided at all costs. Using inline styles causes you to mix your content with your presentation, in other words you are defeating the purpose of not using tables. Let's look at an example of how to apply an id to a div tag:
  
  

  <div id="nav">Navigation</div>

  Any elements within the div tags have the styles applied according to what is in your CSS file.