davekilljoy AKA David B Stubbs. JACK-OF-ALL-TRADES WEB DEVELOPMENT WEB DESIGN 3D MODELING COMPUTER NERD

Continuing from where we left off, lets take a look at some of the awesome things CSS can really do.

The Basics

Let’s start with the most common and basic CSS attributes, width and height. Once you assign a class to an element you are free to style it any way you want. We will be using this code snipet and styling it as examples.

1
2
3

<div class="test">
  <p>Hello</p>
</div>

You can now assign height and width values, like this. Take special note that after each attribute, we add a ; to tell the browser to move to the next attribute.

1
2
3
4

.test{
  width:200px;
  height:200px;
}

Which would look like. Take note I added a background color so you could see the dimensions of the <div>.

We can also apply different colors to text and backgrounds. When applying colors to backgrounds of fonts, you can use color names like Red, Blue, Green (the full list can be seen here), hex values (#000000, #FFFFFF) or the RGB value (rgb(0,0,0)). To recap, to change the color of a font, we use color, and to change the color of a background we use background-color. This is how it would look.

1
2
3
4

.test{
  color:Pink;
  background-color:Blue;
}

Which would look like this.

There are many font modifiers was have available to us as well. Here are a few.

• font-family – Defines a either a certain font (Times New Roman) or a font type (San-Serif)
• font-weight – Defines if the font will be bold or not.
• font-size – Defines the size of the font either in pixels(px), points(pt), multiply(em)

The CSS would be something like this.

1
2
3
4
5

.test{
  font-family:Georgia, "Times New Roman", Times, serif;
  font-size:24px;
  font-weight:bold;
}

And it would look like this.

Moving Forward

Now that you have a good footing on CSS syntax, lets step it up a notch and introduce the float. Firs we’ll take a little history lesson. Traditionally, if you ever wanted a 2 column layout done in HTML, you would have to resort the tables, which looked something like this.

1
2
3
4
5
6

<table width="100%" border="0" cellspacing="2" cellpadding="2">
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
  </tr>
</table>

While it doesn’t look so bad now, tables are a nightmare and most importantly, they are not semantic. Why this is an issue is because tables were made for 1 thing, to display tabular information. This is a problem when Google or Yahoo are indexing your page, it thinks that your whole page is actually a table of information and treats it differently than it would if you have the information in a <div>. So how do we get around this? We use CSS of course.

First you must understand the difference between a Block Element and an Inline Element. A Block Element, like a <div>, is an element that will take up all available horizontal space. Lets take a look at an example. I’m going to use a <div> (Block Element) and a <span> (Inline Element). I’m going to apply a background-color to each one so you can really see what space they take up.

1
2
3
4

<div class="test4">
  <div>Block Div</div>
  <span>Inline Span</span>
</div>

With no styles applied, the defualt behavior of each element is as follows.

Do you see the difference? The Block Element fills up all the horizontal space it can, where the Inline Element only takes up the space its needs. So then I bet your asking yourself how do we make Block Elements sit next to each other horizontally? We use the magic of Floats. Unfortunately that will take a full tutorial. Stay tuned for the next one =).