CSS – Back to Basics

So, trying to get into the world of CSS eh? Well trust me, you’ll never regret this decision. CSS, or cascading style sheets, are the absolute best way of laying out your site while still providing an easy ability to completely change the look of your site with little work. So here is the lowdown on CSS:

CSS is a simple addition to any HTML file that you have. HTML tells the browser what to display with tags (<p>, <h1>, <a>, etc.). CSS, tells the browser what that content should look like by describing it with “style”. For a great rundown/tutorial of CSS, try w3 schools… and always, when in doubt, google it!

So let’s just give a basic example HTML file with some very simple CSS. This document shows you the style tag where you can put all of your CSS (this goes in the head tag). There are three ways of identifying what tags in your HTML get what styling, tags, classes, and IDs. Use a tag definition if you want all of one type of tag (such as a p tag) to be the same. Use a class if you’ll be using that same style for multiple items (i.e. if you want all the links in your header to look the same then use a class). Use an ID if you only plan on having one item with that style (a specific link needs to look different to have emphasis so it has different style). So this example is as simple as it gets. It shows you how to define the style of a paragraph tag, then change a group of paragraph tags using a class, and then uses an ID to make a specific instance of that paragraph tag.

The CSS and HTML

<html>
 <head>
  <style type="text/css">
    p {
      font-size: 13px;
      font-weight: bold;
      color: #000000;
    }
    .red {
      color: #A60000;
    }
    #blue {
      color: #1240AB;
    }
  </style>
 </head>
 <body>
  <p>This is a bolded, black, size 13 paragraph</p>
  <p>This is another paragraph with the same style</p>
  <p class="red">This is styled red using a class</p>
  <p class="red">This is another red paragraph</p>
  <p id="blue">This is styled blue using an ID</p>
 </body>
</html>

The Outcome:

This is a bolded, black, size 13 paragraph

This is another paragraph with the same style

This is styled red using a class

This is another red paragraph

This is styled blue using an ID

So you’ll notice in the inside the style tag there are three definitions: one for the p tag, one for any tag with a class of redText, and one for a tag with an ID of blueText. You use a period before the name for a class, and a # before the name for an ID. Don’t mix them up or your browser won’t read them.

Safe CSS practice will encourage you to put a p in front of your .redText or #blueText definitions. This tells the browser that that specific definition for redText and blueText only applies to p tags. Then if you gave a class of redText to a link, it would not follow that styling. Sometimes however, you want to apply the same styling to different types of tags. In that case, it is alright to leave it out. Basically, use your best judgment. If you are working with a huge website, then you will have a lot of CSS, so be specific and purposeful in your naming of classes and IDs (and probably use the tag name before your definition (i.e. use p.redText instead of just .redText). If you are working with a smaller site, then you can be a little more lenient in your CSS naming efforts.

Coming up, external CSS files with a step up in CSS.

Questions? Post a comment!

Comments are closed.