HTML and CSS - THE BASICS Session SIX with Codehead

VAF Admin · #2 (**permalink**) 10-10-2009

Codehead: Tables just don't make sense when creating web page layouts. But 'divisions' are very clear and make good sense. Our meaningful IDs also help make them even more intuitive, if you read that code later, you know exactly what <div id="header">...</div> is or exactly what <div id="contents"> ... </div> is; But how about: <tr><td width="600">...</td><td width="200">...</td></tr> yuck!

There is also a notion of classes along with the IDs, so you could style a paragraph like this:

The CSS:

Code:

 
.indent { padding-left: 20px; }

The HTML:

Code:

<p class="indent">The indented text</p>

When you are targeting a class in your CSS, you use a dot or '.' (Instead of '#' which is for selecting IDs - discussed in Sessions 4 and 5).

So we could style our 'main-wrapper' using a class like this:

Code:

 
.main-wrapper { ... }

In HTML:

Code:

<div class="main-wrapper"> ... </div>

But sometimes, using ID is more appropriate. The difference is that ID stands for 'identifier' and an identifier is unique, but a class on the other hand refers to a whole class of things. For example, there could me more than one indented paragraphs on one page so they should belong the the indented class.

Likewise, we will only have one 'main-wrapper', one 'header', one 'content' and one 'footer' so ID is more logical in this case.

Now let's look at these boxes closely, a box is a triangle, it can have 'width', 'height', 'border', 'margin', 'padding', 'background color', it's own 'font', it's own 'font color' etc. So when you create a DIV it will have all of these properties.

Now let's take a closer look at a box, point your browser here: http://www.virtualassistantforums.com/courses/box1.html

Right click on that page and click 'View Source' (its 'View Source' or similar in every browser - to allow you to see the source code of that page), and you will see that there is one DIV on this page, it is not styled so you can't visually see it on the page, but it's there - and you can see it in the code. The default behaviour is that a DIV is not visual.

Let's look at another example: http://www.virtualassistantforums.com/courses/box2.html

Go ahead and right click on that page and view the source code, you can see that I changed some of the properties of this box:

Code:

.test-div {
   width: 100px;
   height: 100px;
   border: 1px solid #000000;
}

I set it's height, width and border. For the border property, there are 3 things you can set, the first one '1px' is the thickness of the border, the second one 'solid' is the style of the border line (a solid line), other options are 'dashed' and 'dotted', finally '#000000' is the color of the border.

You can see different styles of borders in the following page: http://www.virtualassistantforums.com/courses/box3.html

View the source and study the code on this page as well.

Notice how they are right on top of each other, we can move them apart by setting another property, and that is their 'margin', so let's add a 4th box and set it's margin property:
http://www.virtualassistantforums.com/courses/box4.html

View the source and study the code.

So as you can see, by adding 'margin: 10px;' we added a 10 pixel margin around the 4th box, but the margin is applied to all of it's sides, that is 'top', 'right', 'bottom' and 'left'. You could choose to only add a margin to either side of the box if you wish, for example, the fifth box here has a 'margin-top' (only):

http://www.virtualassistantforums.com/courses/box5.html

View the source and study the code.

As you can see the last box doesn't have any space on the left side.

You might have noticed that there is a lot of 'duplicate-code' in our css, every single box has 'width and 'height' in common, and you mighe be wondering, wasn't one of the points of CSS preventing this from hapenning?

One way to fix this 'duplicate-code' issue is to introduce a class called 'box' that has these 'width' and 'height' properties and apply that to ALL of our DIVs:

http://www.virtualassistantforums.com/courses/box7.html

View the source and notice how we got rid of all the duplicate-code.

There is one more point here, the DIVs have 2 classes:

Code:

<div class="box test-div-solid"> ... </div>

A DIV can have as many classes as you want, as long as you separate them with one space like:

Code:

<div class="class1 class2 class3"> ... </div>

This is not true for IDs, that is you can not have this:

Code:

<div id="id1 id2"> ... </div>

Another way to fix the 'duplicate-code' issue using CSS is to wrap all the boxes in one big box called 'boxes' and the set all of their heights and widths at the same time:

http://www.virtualassistantforums.com/courses/box6.html

View the source code and notice how all of the DIVs are now inside a parent DIV called 'boxes', also notice how in my CSS, I'm targeting all the boxes inside this parent box:

Code:

.boxes div { 
 width: 100px;
 height: 100px;
}

This tells the browser: find all the DIVs inside the DIV with 'boxes' class and set their 'width' and 'height' to 100 pixels.

The parent DIV is called the 'parent element' and the boxes inside of it are called 'child elements'.

You can use either of these two techniques in your designs, you will see that sometimes one is more appropriate than the other.

We can also have padding inside the boxes so the text is not very close to the border, open this page and notice the last box with padding:

http://www.virtualassistantforums.com/courses/box8.html

View the source code and notice this style rule:

Code:

.test-div-padding {
   border: 1px solid #000000;
   margin: 10px;
   padding: 10px;
}

Also notice that the box is now a little bigger, the padding added more width and height to the box, if you measure it on the browser, the box is now 120 pixels in width and height. So padding adds to the size of the box it's applied to. The box itself was 100 pixels, 'padding: 10px;' added 10 pixels of padding to all of it's sides. That is 10 pixels to it's right and 10 pixels to it's left and if you add that to 100, it's 120 pixels. Same for top and bottom.

Just as we can have 'margin-top', 'margin-right', 'margin-bottom' and 'margin-left', we can have 'padding-top', 'padding-right', 'padding-bottom' and 'padding-left', we can also have 'border-top', 'border-right', 'border-bottom' and 'border-left'.

We will build on this in the next session and we will create a more complicated layout. We will place boxes side by side to create a sidebar or a two column layout.

Please go ahead and ask me any questions you might have by replyig directly to this thread.

Session seven will continue to build on what we've discussed so far.