CSS Tutorials « The Choppr

2 Column Fluid Layout (100% height) with Left/Right Sidebar

Following the previous article, where I described how you can create a 3 column fluid layout with expanding 100% of the page height, I’ve decided to post another two similar layouts (both expand 100% of the page height):

The HTML Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>The Choppr - 2 Columns / Left Sidebar / Fluid Width / Scticky Footer</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">@import "style.css";</style>
</head>
<body>

<div id="container">

    <div id="main">

        <div id="header">
            <p>Luis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris.</p>
        </div>

        <div id="body">
            <div id="left-sidebar">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus adipiscing, nunc quis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris. Proin quam enim, luctus ut, faucibus quis, interdum vel, felis. Integer laoreet, justo quis placerat lobortis, metus mauris iaculis augue, sit amet fermentum lectus ante vel lorem. Integer non leo et enim tincidunt lobortis. Pellentesque fermentum fermentum justo. Nam sodales tempor tortor. Mauris sit amet tellus. Integer at dolor non felis vestibulum luctus. Ut pretium massa a metus condimentum faucibus. Quisque convallis, risus quis dapibus tempor, sem mi aliquam risus, eu ullamcorper metus sapien sit amet nunc. Fusce enim.</p>
            </div>

            <div id="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus adipiscing, nunc quis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris. Proin quam enim, luctus ut, faucibus quis, interdum vel, felis. Integer laoreet, justo quis placerat lobortis, metus mauris iaculis augue, sit amet fermentum lectus ante vel lorem. Integer non leo et enim tincidunt lobortis. Pellentesque fermentum fermentum justo. Nam sodales tempor tortor. Mauris sit amet tellus. Integer at dolor non felis vestibulum luctus. Ut pretium massa a metus condimentum faucibus. Quisque convallis, risus quis dapibus tempor, sem mi aliquam risus, eu ullamcorper metus sapien sit amet nunc. Fusce enim.</p>
            </div>
        </div>

    </div>
</div>

<div id="footer">
    <p>Luis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris.</p>
</div>

</body>
</html>

The CSS Code:


html, body {
    height: 100%;
    padding: 0px;
    margin: 0px;
}

body {
    background: url("left-sidebar-back.gif") repeat-y top left;
}

/* IE7 Fix */
* html #container {
    display: table;
    height: 100%
}

/* Opera Fix */
body:before {
    content: "";
    height: 100%;
    float: left;
    width: 0;
    margin-top: -32767px;
}

div#container {
    height: 100%;
    height: auto !important;
    min-height: 100%;
}

div#main {
    overflow: auto;
    padding-bottom: 100px;
}

div#header {
    height: 100px;
    background: #ba6f19;
    border-bottom: 1px solid #000;
    padding: 20px;
}

div#body {
    overflow: hidden;
    height: 100%;
}

div#content {
    margin: 0px 0px 0px 300px;
    padding: 20px;
}

div#left-sidebar {
    width: 260px;
    float: left;
    padding: 20px;
}

div#footer {
    background: #ba6f19;
    border-top: 1px solid #000;

    position: relative;
    height: 100px;
    margin-top: -101px;
    clear: both;
}

div#footer p {
    padding: 20px;
    margin: 0px;
}

And here is the other one:

The HTML Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>The Choppr - 2 Columns / Right Sidebar / Fluid Width / Scticky Footer</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">@import "style2.css";</style>
</head>
<body>

<div id="container">

    <div id="main">

        <div id="header">
            <p>Luis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris.</p>
        </div>

        <div id="body">
            <div id="right-sidebar">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus adipiscing, nunc quis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris. Proin quam enim, luctus ut, faucibus quis, interdum vel, felis. Integer laoreet, justo quis placerat lobortis, metus mauris iaculis augue, sit amet fermentum lectus ante vel lorem. Integer non leo et enim tincidunt lobortis. Pellentesque fermentum fermentum justo. Nam sodales tempor tortor. Mauris sit amet tellus. Integer at dolor non felis vestibulum luctus. Ut pretium massa a metus condimentum faucibus. Quisque convallis, risus quis dapibus tempor, sem mi aliquam risus, eu ullamcorper metus sapien sit amet nunc. Fusce enim.</p>
            </div>

            <div id="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus adipiscing, nunc quis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris. Proin quam enim, luctus ut, faucibus quis, interdum vel, felis. Integer laoreet, justo quis placerat lobortis, metus mauris iaculis augue, sit amet fermentum lectus ante vel lorem. Integer non leo et enim tincidunt lobortis. Pellentesque fermentum fermentum justo. Nam sodales tempor tortor. Mauris sit amet tellus. Integer at dolor non felis vestibulum luctus. Ut pretium massa a metus condimentum faucibus. Quisque convallis, risus quis dapibus tempor, sem mi aliquam risus, eu ullamcorper metus sapien sit amet nunc. Fusce enim.</p>
            </div>
        </div>

    </div>
</div>

<div id="footer">
    <p>Luis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris.</p>
</div>

</body>
</html>

The CSS Code:


html, body {
    height: 100%;
    padding: 0px;
    margin: 0px;
}

body {
    background: url("right-sidebar-back.gif") repeat-y top right;
}

/* IE7 Fix */
* html #container {
    display: table;
    height: 100%
}

/* Opera Fix */
body:before {
    content: "";
    height: 100%;
    float: left;
    width: 0;
    margin-top: -32767px;
}

div#container {
    height: 100%;
    height: auto !important;
    min-height: 100%;
}

div#main {
    overflow: auto;
    padding-bottom: 100px;
}

div#header {
    height: 100px;
    background: #ba6f19;
    border-bottom: 1px solid #000;
    padding: 20px;
}

div#body {
    overflow: hidden;
    height: 100%;
}

div#content {
    margin: 0px 300px 0px 0px;
    padding: 20px;
}

div#right-sidebar {
    width: 260px;
    float: right;
    padding: 20px;
}

div#footer {
    background: #ba6f19;
    border-top: 1px solid #000;

    position: relative;
    height: 100px;
    margin-top: -101px;
    clear: both;
}

div#footer p {
    padding: 20px;
    margin: 0px;
}

3 Column Fluid Layout (100% Height)

Fluid layouts aren’t very easy to handle especially when you would like for your pages to expand not only horizontally but also vertically. With tables it’s much easier to handle this problem, however, when it comes up to table-less layouts there are a lot more things you would need to consider.

Here is an example of the 3 Column Fluid Layout expanding 100% of the page height & Sticky Footer.

The HTML code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>The Choppr - 3 Columns / Left/Right Sidebars / Fluid Width / Sticky Footer</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">@import "style.css";</style>
</head>
<body>

<div id="container">

    <div id="main">

        <div id="header">
            <p>Luis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris.</p>
        </div>

        <div id="body">
            <div id="left-sidebar">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus adipiscing, nunc quis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris. Proin quam enim, luctus ut, faucibus quis, interdum vel, felis. Integer laoreet, justo quis placerat lobortis, metus mauris iaculis augue, sit amet fermentum lectus ante vel lorem. Integer non leo et enim tincidunt lobortis. Pellentesque fermentum fermentum justo. Nam sodales tempor tortor. Mauris sit amet tellus. Integer at dolor non felis vestibulum luctus. Ut pretium massa a metus condimentum faucibus. Quisque convallis, risus quis dapibus tempor, sem mi aliquam risus, eu ullamcorper metus sapien sit amet nunc. Fusce enim.</p>
            </div>

            <div id="right-sidebar">
                <p>Luis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris. Proin quam enim, luctus ut, faucibus quis, interdum vel, felis. Integer laoreet, justo quis placerat lobortis, metus mauris iaculis augue, sit amet fermentum lectus ante vel lorem. Integer non leo et enim tincidunt lobortis. Pellentesque fermentum fermentum justo. Nam sodales tempor tortor. Mauris sit amet tellus. Integer at dolor non felis vestibulum luctus. Ut pretium massa a metus condimentum faucibus. Quisque convallis, risus quis dapibus tempor, sem mi aliquam risus, eu ullamcorper metus sapien sit amet nunc. Fusce enim.</p>
            </div>

            <div id="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus adipiscing, nunc quis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris. Proin quam enim, luctus ut, faucibus quis, interdum vel, felis. Integer laoreet, justo quis placerat lobortis, metus mauris iaculis augue, sit amet fermentum lectus ante vel lorem. Integer non leo et enim tincidunt lobortis. Pellentesque fermentum fermentum justo. Nam sodales tempor tortor. Mauris sit amet tellus. Integer at dolor non felis vestibulum luctus. Ut pretium massa a metus condimentum faucibus. Quisque convallis, risus quis dapibus tempor, sem mi aliquam risus, eu ullamcorper metus sapien sit amet nunc. Fusce enim.</p>
            </div>
        </div>
    </div>
</div>

<div id="footer">
    <p>Luis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris.</p>
</div>

</body>
</html>

You can see it’s pretty straightforward, all the major section of the page are labeled appropriately. The only section that you might have a question about is the #footer-push, which is used to straighten up the footer, as explained and shown on the Ryan Fait’s example of the Sticky Footer.

The CSS code:


html, body {
    height: 100%;
    width: 100%;
    padding: 0px;
    margin: 0px;
}

body {
    background: url("right-sidebar-back.gif") repeat-y top right;
}

/* IE7 Fix */
* html #container {
    display: table;
    height: 100%
}

/* Opera Fix */
body:before {
    content: "";
    height: 100%;
    float: left;
    width: 0;
    margin-top: -32767px;
}

/* IE6 Fix */
* html div#body {
    overflow: visible;
}

div#container {
    height: 100%;
    height: auto !important;
    min-height: 100%;
    background: url("left-sidebar-back.gif") repeat-y top left;
}

div#main {
    overflow: auto;
    padding-bottom: 100px;
}

div#header {
    height: 100px;
    background: #ba6f19;
    border-bottom: 1px solid #000;
    padding: 20px;
}

div#body {
    overflow: hidden;
    height: 100%;
}

div#content {
    margin: 0px 300px 0px 300px;
    padding: 20px;
}

div#left-sidebar {
    width: 260px;
    float: left;
    padding: 20px;
}

div#right-sidebar {
    width: 260px;
    float: right;
    padding: 20px;
}

div#footer {
    background: #ba6f19;
    border-top: 1px solid #000;

    position: relative;
    height: 100px;
    margin-top: -101px;
    clear: both;
}

div#footer p {
    padding: 20px;
    margin: 0px;
}

The left and right sidebars are floating on each side of the page, they would need to have the same width as the two background images that you are using. Also if you would like to add padding to the sidebars you are going to need reduce the width with that amount.

Moreover, notice the body element, it will need to have 100% height and also to clear the floats we need to use the overflow: hidden option (for IE6 there is a bug and the overflow need to be visible to work out)

Here is an example of the 3 Column Fluid Layout expanding 100% of the page height.

CSS Navigation Elements

When you are creating a CSS/HTML page, you will definitely want navigational elements in that web page. The most common way to create navigational elements is through CSS styled lists. But you should remember one simple thing – your navigational elements should contain display: block.

The display: block property is very essential in CSS navigation because navigation buttons and areas are absolutely meant to be like buttons or blocks of the web page. In case you leave the links in your navigation as display: inline; (default for elements), then only the text area in your navigation will become clickable.

To get the best results, add horizontal navigation menu and vertical navigation menu that will help your pages to become more accessible while remaining compliant to standards.

Horizontal Navigation Menu

To create horizontal menu, start with the outside and work in. if you want your navigation to start in left corner, you need to set it with 0 left margin and padding, an float it to the left.


ul#navigation {
    float: left
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #039;
}

But the main magic in horizontal navigation menu lies in its list items. List items are normally block elements, which means that they will have new line placed before and after each one. By switching the display from block to inline, you can force the list elements to queue up next to one another.


ul#navigation li {display: inline;}

A top border can also be added to delineate the buttons when they are hovered over:


ul#navigation li a {
    display: block;
    text-decoration: none;
    padding: .25em lem;
    border-bottom: solid 1px  #39f;
    border-top: solid 1px #39f;
    border-right: solid 1px #39f;
}

a:link, a:visited {color: #fff;}

ul#navigation li a:hover {
    background-color: #fff;
    color: #000;
}

Vertical Navigation Menu

It is same as creating the horizontal navigation menu. The first move in such creation is to define the width of the menu. This will ensure that even if the menu items are long, they will not push the rest of the layout over or cause horizontal scrolling.


ul#navigation {width: 12em;}

Once the width is set, other things like list-style [get rid off the bullets], borders, text alignment, margins and background colors.


ul#navigation li {
    list-style: none;
    background-color: #039;
    border-top: solid 1px #039;
    text-align: left;
    margin: 0;
}

Once the basics for the list items are set, you can start playing with how the menu looks like in the links area. Firstly, you should style the ul#navigation li a, then the a:link, a:visited, a:active, and a:hover (if you want them). For the a:links, let it be made block element rather than default in-line. This forces them to take up the entire space of the li – and they act more like a paragraph, which makes them easier to style as menu buttons. The other best things that can be done are removing the underline (text0-decoration: none) as this makes the buttons look more like buttons.

Following are the codes:


ul#navigation li a {
    display: block;
    text-decoration: none;
    padding: .25em;
    border-bottom: solid 1px #39f;
    border-right: solid 1px #39f;
}

With the display block, you can set on the a:links, and the entire box of the menu item becomes clickable, and not just the letters. Make sure that you set the link colors (link, visited, active and hover), if you want them to be different than the default blue, purple and red.


a:link, a:visited {color: #fff;}
a:hover, a:active {color: #000;}

To pay some extra attention to the hover state, do the following:


a:hover {background-color: #fff;}

Classic Two Column Layout

In the previous tutorials, we have created a classic two-column layout with left-side navigation using CSS and a few types of HTML tags. In this tutorial, we will look at the actual HTML codes used so far and also take a quick glance at the CSS used.

All the content (text, images, Flash etc.) that the user sees when viewing a web page is marked up/coded with HTML in-between the <body> and </body> tags.

In this case we have this:


<body>
    <div id="navigation">
        <h2>The Main navigation</h2>
    </div>
    <div id="centerDoc">
        <h1>The Main Heading</h1>
        <p>

In the above code, we see that we have two main sections demarked by using <div> tags. These <div> tags are designed to create a ‘division’ in the document or to create something like a container. We have created two such containers and given each of them a unique ID:


    <div id="navigation">
        ...
    <div id= "centerDoc">

You will find that the entire contents of the page are contained in one of these two major page divisions. So the first question that demands reply, is what are the rules of ID’s in HTML pages and why do we use them and assign them to page elements like DIVs?

1. You can assign ID’s to any HTML tag. In that case, you can assign an ID to a <p> tag as well.
2. An ID in a page can be used just once. That is to say that no two elements should possess the same ID. ID’s are meant to uniquely identify a page element. So in the above example, there is only one page element with an ID of ‘navigation’ and only page element with an ID of ‘centerDoc’.
3. ID’s on HTML page elements (tags) are used just once in CSS. We can target ID’s in CSS code to change the appearance, behavior and even the position of that element by referencing the ID of that element.
4. Inside the <div> tags container, we are using header tags (<h1> and <h2>) to set the headers.
5. Finally, insert some text for <p> tags, to make up this simple page in-between them.

Now let us jump to CSS file that is attached to the HTML page. The CSS document is attached with the line of code in between the <head> </head> tags:


<head>
    <link href="myCSS.css" rel="stylesheet" type="text/css">
</head>

Like in a normal page link we have an ‘href’ attribute, all our CSS code will affect this page since it is linked to it.

So in the above link we name the CSS file name with this: ‘href=”myCSS.css”‘ and we tell the web browser that the link is to a CSS page with this attribute: ‘type=”text/css”‘. All that should be considered here is that the link point to a CSS file with the name: ‘myCSS.css’

So now that we got the style sheet linked to the document, lets look at some CSS codes. This first snippet of code ‘styles’ the unique ID’s we were talking about before:


#navigation {
    position: absolute;
    width: 210px;
    height: 600px;
    margin: 0;
    margin-top: 0px;
    border-right: 1px solid #C6EC8C;
    font-weight: normal;
}

#centerDoc {
    position: absolute;
    padding: 0 0 20px 0; /*top right bottom left*/
    margin-top: 50px;
    margin-left: 235px;
}

In the above elements we have 2 selectors, one for each ID and each selectors are grouped/contained by using the curly brackets: {}. So here is the CSS selectors code with all their guts removed:


#navigation {
    /*Look ma no CSS rules! */
}

#centerDoc {
    /*Look ma no CSS rules! */
}

I just inserted the text: ‘/*Look ma no CSS rules!*/’ to show you where the CSS code would normally be positioned. Now you can see that anything in between the curly brackets is part of one group or package that in CSS can generically be called a selector.

In the examples displayed above, you will find some text that appears before a curly bracket. This text gives a name to the selector. So here we have two selector names and thus two selectors: ‘#centerDoc’ and ‘#navigation’. Now the natural question would be why do we have the # symbol in front of the text? Why can’t we call it simply ‘centerDoc’ and ‘navigation’?

The answer to the above question is simple. Like HTML and programming certain text in certain places have special meaning that directs the system to do something in particular. In this case whenever you have that # symbol in front of a name of a CSS selector, it means that this selector is a special type of selector more commonly known as ‘ID’ selector. What is so special about an ID selector? This type of selector can only be applied to any one element at a time in the HTML page.

So those of you are aware of the computer, now see that there is a CSS ID selector for each of our HTML divs that in turn have an ID, and they have the same corresponding names. So the CSS selector #centerDoc applies to the div: ‘<div id=”centerDoc”>’. Whatever CSS rules/styles are required to code into ID selector will change what appears inside the corresponding div. So for the div with the ID of: ‘navigation’, following are the CSS rules:


#navigation {
    position: absolute;
    width: 210px;
    height: 600px;
    margin: 0;
    margin-top: 0px;
    border-right: 1px solid #C6EC8C;
    font-weight: normal;
}

Remember that at the bottom we say all text will have a common font-weight of ‘normal’:


font-weight: normal;

We could instead easily have told that we want all the text to appear in the div (the div with the ID ‘navigation’) bold instead:


font-weight: bold;

Now lets return to the original fact. In our page the navigation div is sitting on the left and it has a border. It also has a nice light green 1-pixel border because that is what is set in CSS coding:


border-right: 1px solid #C6EC8C;

The best thing would be changing the color of the border and changing the pixel thickness of the border and view how it looks like.

Why is the navigation sitting on the left of the page while the ‘centerDoc’ is positioned to the right of it? Well first thing to be considered is this line in the navigation selector:


position: absolute;

This orders the browser to just place this div on the page as is.

Therefore, the real magic in this is the CSS code for centerDoc:


#centerDoc {
    position: absolute;
    padding: 0 0 20px 0; /*top right bottom left*/
    margin-top: 50px;
    margin-left: 235x;
}

The line:


padding: 0 0 20px 0; /*top right bottom left*/

This tells the browser to insert 20px (pixels) of padding to the bottom of the div with the ID ‘centerDoc’.

However, if you are confused with the word ‘padding’, then the dimple definition to it is – Space that is wrapped around our element (tag).

CSS has this special feature and concept of a box model that essentially is a box that wraps around the HTML elements. This box model comprises: padding, margins, borders and the actual content. This allows us to place a border around elements and space elements in relation to other elements.

From the inside out it is ordered like so:

content -> padding -> border -> margin

So in this case anything in between our <div> tags is basically the ‘content’. Right after that comes the padding. Then there is a border concept and finally a margin. Margin and padding may appear the same thing but if you think about it, you can see how you are being able to control the space before the border (padding) and after the border (margins) and how it can really affect your layouts.

In this example you notice that the navigation div sits higher up on the page than the centerDoc div. This is not because of the order in which they appear in the HTML, as they normally would without CSS, rather it is because of the margin settings I set for each selector; for centerDoc I set the top margin to 50px:


margin-top: 50px;

And for the navigation div I set it to:


margin-top: 0px;

The above declaration sets its top margin to 0 pixels so it will therefore be 50 pixels higher than the “centerDoc” div. A correct step would be to move the position of the navigation div under the center doc div in the HTML just to see if it changes anything. You will see that where the div appears in the actual HTML code has nothing to do with how it will appear to the user now that CSS positioning has been used.

Create a Multi-column and Float-based Layout

This tutorial will teach you to create a multi-column and float-based layout. This tutorial will allow you to create a multi-column liquid designs as well as fixed-width design.

Structuring HTML

Firstly, you need to create a CSS-based layout by identifying different series of layout elements on the page. You can conduct this by wrapping chunks of HTML inside of <div> tags, each of which will represent a different part of the page.

1. Open start.html file in a text editor, click the empty line following HTML comment: Before any style is to be created, you need to add the structure and content for the page. Next you need to add the <div> tag for the left sidebar.
2. Add an opening <div> for the sidebar: <div id= “sidebar”>. Then press Enter (Return) to create a new, empty line. If you are creating a web page from the beginning, you need to add the HTML for the page’s sidebar, a list of articles on the site, links to other related web sites etc. The HTML portion is already looked after. The code for an unordered list of links awaits you in another file. You just have to copy and paste it into this page.
3. Open the file sidebar.txt, copy all of the contents, and then return to the start.html file. Paste the HTML after the <div> tag you had created in step 2. The HTML for the sidebar is almost complete. You just need to close the <div> tag.
4. Just after the code you pasted, type </div> You have just added the first few layout elements on the page. When you style these HTML elements, they will look like a column. But first you need to add some more content to it.
5. Place cursor in empty line after HTML comment: <!-main content goes here–> and then type <div id= “main”> This div holds the main content of the page. However, you will get HTML element from another file, too.
6. Open the file story.txt, copy all contents, return to the start.html file and paste the code after <div> tag you created. Add the closing </div> tag you just created. Add the closing </div> tag exactly as in step4 That is all HTML you need to create and design.

Now we will conduct another tutorial on CSS:

Creating Layout Styles

If you view the page now, you will find banners, navigation buttons and texts are already styled.

We will create styles to format the page’s columns:

1. In text editor, click on empty space directly before closing </head> tag near the top of the file. Type <style type= “text/css”> and then hit on Enter (Return) This code becomes the opening tag for an internal style sheet. Once you complete creating styles in internal style sheet, you can create and style your sheet even better. Now you move the styles to external style sheet

2. Add a style for sidebar element


#sidebar {
    float: left;
    width: 160px;
    margin-top: 10px;
}

This class style makes the div float to the left side of the page, imparting a width of 160 pixels and add a bit of space to separate the sidebar from the banner. The width property is very essential in this style. Unless you don’t float an image that has a specific set width, you should always set a width for the floated elements. Otherwise, the browser also sets a width based solely on the content inside the float, leading to inconsistent results.

3. Press Enter (Return) type </style> to complete the internal style sheet and preview the page in web browser The sidebar also forms a left-hand column. Therefore, when text in the main column reaches the bottom of sidebar, it wraps around the bottom of the sidebar. While that is the way that floats work, here you need to make the main body text appear like a column on its own, you have to add enough of left margin to indent the main text beyond the right edge of the sidebar.

4. Create a style for second column


#main {
    margin-left: 180px;
}

Since the sidebar is 160 pixels wide, a margin of 180 pixels indents the main content an additional 20 pixels, creating a difference between two columns. This extra white space not only makes the text easier to read but also imparts a wonderful look and feel to the page.

Adding Another Column

While a two column is quite an easy task, a three column imparts a whole new world of information to the visitors.

Here are the steps:

1. You need to open the file secondary.txt. Copy all HTML from that file and return to start.html file. However, the HTML for this extra column goes between the page’s two divs
2. Click just after the closing <div> for the sidebar element (right before the HTML comment <!-main content goes here–>). Press Enter (Return) to create an empty line. It often becomes quite hard to find the right closing </div> when you have already used a lot of divs to structure a page. That’s why HTML comments truly help you identify and keep track of HTML in your page
3. Type <div id= “secondary”>, press Enter (return) and then paste HTML that you had copied in Step1. Hit enter (return) again and type </div>. When you close the <div> tag finally, you have completed HTML for the page’s third column. Start styling it next.
4. Below the #main style you created in step4, you need to add a new style to the internal style sheet.


#secondary {
    float: right;
    width: 180px;
}

You need to float the column to the right side of the page to flank main content with sidebars on either side. The same problem might persist – where the main content wraps underneath the new sidebar. To fix it, however, you need to add a right margin to the #main style.

5. Edit the #main style t make it look like the following:


main {
    margin-left: 180px;
    margin-right: 200px;
}

Now the page becomes a full 3-column layout. You need to test the page in the web browser. When you need to resize the windows, you will find that the entire page resizes and adjusts to fit the window.

Note: In this design, you will find the right and left sidebars contain a fixed width, so even when you make the browser window much larger, they still retain the same size. You can make those columns change the width as well, simply by setting their widths to percentage values and changing the #main style’s left and right margin to percentages as well.

Understanding CSS

A single style cannot perform the miracle of transforming a web page into a work of art. To create some special designs in the web page, an understanding of web page is very essential. Usually a collection of CSS styles comprises a style sheet.

A style sheet can be of two types – external and internal, depending on where the style information is located- in the Web page itself or in a separate file linked to the web page.

Internal and External – How to choose

Most of the time external style sheets are preferred as they make it quite easier to build web pages and update web sites faster. They contain all style information in single file. You will have to attach the external style sheet with just a line of code to an HTML page and completely alter the appearance of the page. The external style sheets also assist in fast opening of web pages. When you are using an external style sheet, your web pages will contain only basic HTML – no byte-hogging HTML tables or

Moreover, when a web browser downloads an external style sheet, it usually stores the file on the visitor's computer [in a behind-the-scenes folder called a cache] for quick access. When your visitor hops to other web pages on the site that use the same external style sheet, so there is no need for the browser to download the style sheet again. The browser can simply pull the external style sheet from its cache - a significant savings in download time.

Note: When you are working on your web site and previewing it in a web browser, the cache can work against you.

Internal Style sheets

An internal style sheet is a collection of styles that forms a part of the web page’s code, always placed between opening and closing HTML


<style type= "text/css">
h1 {
    color: #FF7643;
    font-face: Arial;
}
p {
    color: red;
    font-size: 1.5em;
}
</style>
</head>
<body>

/* The rest of your page follows… */

Note: You can place the <style> tag and its style after the <title> tag in the head of the page, but Web designers usually place them right before the closing </head> tag.

The style tag is HTML, and not CSS. But the job is to let the web browser be aware that the information contained within the tags is CSS code and not HTML. Creating an internal style sheet is as simple as typing one or more styles between the <style> tags.

Internal style sheets are especially easy to add to a web page and provide an immediate visual boost to the HTML. But off course, they are not the most efficient method for designing an entire web site composed of several web pages. For one thing is you really need to copy and paste the internal style sheet into each of the pages of your web site, which becomes quite a time consuming chore that adds bandwidth-hogging code to each page.

Sometimes internal style sheets prove to be even more hassled when you want to update the look and feel of the web site.

For example, say you want to change the <h1> tag, which you originally decided should appear as large, bold and green type. But now you want a different look; you want it blue type using the courier typeface. Using internal style sheets, you just need to edit every page. So the simple solution is creation of external style sheets.

Note: It is also possible [though rarely advisable] to add styling information to an individual HTML tag without using a style sheet.

Creating your First Styles

You will be taken through the basic steps of creating the following:

Inline styles
Internal style sheets
External style sheets

Creating Inline styles

When you type a CSS rule directly into a page’s HTML, you are basically creating an inline style. Inline styles offer none of the time and bandwidth saving benefits of style sheets. Yet, it proves to be effective when you want to absolutely change the styling on a single element on a single page. To make the style work perfectly, the most important thing includes careful placement of style within the tag that you want to format.

Here is an example that shows you exactly how to do it.

1. In your web page editing program, open the file basic.html

This elegant XHTML file comprises a couple of different headings, a paragraph, an unordered list and a copyright notice inside an <address> tag. You will start by creating an inline style for the <h1> tag.

2. Click inside the opening <h1> tag and type style = “color: red”

The tag will look like the following:


<h1 style= "color: red;">

The style attribute is HTML, not CSS so you are required to use the equal signs after it and enclose all of the CSS codes inside the quotes. Only the stuff inside the quotes is CSS. In this case, you have added a property named color, which affects the color of the text- and you have set the property to red. The colon, however, separates the property name from the property value that you want. Next you will check the results in a web browser.

3. Open the basic.html page in a web browser

Choose File; select Open File, depending on your web browser. Many HTML editors might include a “Preview in Browser” function, which, with a simple keyboard shortcut, or menu option, opens the page in a web browser. It is worth checking your program’s manual to see if it is included in the time saving feature.

When you view this page in the web browser, the headline will now appear red. Inline styles can include a single or multiple CSS properties. You will now need to add another property text.

4.Return to your HTML editor, click after the semicolon following the word “red” and type font-size: 4em;

The semicolon separates two different property settings. The <h1> tag should look like the following:


<h1 style= "color: red; font-size: 4em;">

5. Preview the page in a web browser. For example, click your browser window’s Reload button (but make sure you have saved the XHTML file first)

The headline now gets massive into style. And you already know how labor-intensive inline styles are. It becomes tedious to make all the <h1> headings on a page look like this one could take days of typing and add acres of HTML codes.

6. Return to your page editor and delete the entire style property, which returns the heading tag back to its normal <h1>

Generic Stylesheets for Basic Page Template

Advanced CSS help you to create wonders by reducing the number of HTML tags that are used in the page.

Following are six tags required to layout the content:

<h> The heading tags range from ‘<h1></h1>’ to ‘<h6></h6>’ are used to mark/tag headlines in the pages. The most important headline, therefore, remains wrapped in a <h1> tag and the least important remains wrapped in <h6> tag.

An example of the heading:

<h1>CSS Template Layout</h1>

This tells the browser and search engines that this page is primarily describing “CSS Template Layout”
All browsers have a default size (for each <h> tag) as to how it renders text when placed between the tags. Most of these defaults remain unusable (especially <h1>) because they come out too big. However, you can use the CSS to make the text sizes more to the liking.

<p> The Paragraph tag is used to mark parts of pages as being “paragraphs”. Paragraph tags are called ‘block element’; which means that it can act like a block where a space is automatically inserted before and after each <p> tag pair.
<ul> and <ol> are list tags that are used to create our menus. The tag <ul> is the ‘un-ordered list tag’ that creates a list with bullets or other images/icons that do not specify or denote an order; hence the term ‘un-ordered’ is used. The other list tag mentioned (<ol>) is the ‘ordered list tag’, which creates a list that, instead of bullets, the list elements are marked with numbers or letters.
<div> We are all familiar with this tag, in CSS. This div’s tag is used to create containers for parts of our web page. One div will be used to ‘hold’ our navigational menu and another div to ‘hold’ the main page.
<a href=> this is one of the most important tags in HTML: the ‘link tag’ or the ‘hyperlink tag’. This tag makes the text ‘hyper’ so that when we click on it, we can load another page or activate/call some JavaScript (otherwise known as ECMA script).
<img> this is one of the most important image tags, that allow you to link to images so that they can show up in the web pages. In HTML images are not usually embedded into the actual age but instead the image tag (<img>) only points to where the image is and the web browser will attempt to load that image when a surfer loads your HTML page.

This covers the HTML tags that we will use in our layout. You do not need to use any table tags, nasty <font> tags and <br> tags.

Basics of basic page template

Here are few steps to show you how to create your basic HTML page.

Once you have already created a template page, create a folder and impart a name to it like: ‘myCSSwebsite’ and then drop the HTML page into it. In that same folder, try to create a new text document and call it: ‘myCSS.css’. Once it is created, open that file and paste in this template CSS code and then save it:

/* Generic Selectors */
body {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 14px
    color: #333333
    background-color: #F9F9F9
}

p {
    width: 80%;
}

li {
    list-style-type: none;
    line-height: 150%
    list-style-image: url(../images/arrowSmall.gif);
}

h1 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 18px;
    font-weight: bold;
    color: #000000;
}

h2 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: bold;
    color: #000000;
    border-bottom: 1px solid #C6EC8C
}

When it comes to Pseudo classes, following are the codes:

a:link {
    color: #00CC00;
    text-decoration: underline;
    font-weight: bold;
}

li:link {
    color: #00CC00;
    text-decoration: none;
    font-weight: bold;
}

a:visited {
    color: #00CC00;
    text-0decoration: underline;
    font-weight: bold;
}

li a:visited {
    color: #00CC00;
    text-decoration: none;
    font weight: bold;
}

a:hover {
    color: rgb(0, 96, 255);
    padding-bottom: 5px;
    font-weight: bold;
    text-decoration: underline;
}

li a:hover {
    display: block;
    color: rgb (0, 96, 255);
    padding-bottom: 5px;
    font-weight: bold;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #C6EC8C;
}

a:active {
    color: rgb (255, 0,102);
    font-weight: bold;
}

When it comes to IDs, following are the codes:

#navigation {
    position: absolute;
    width: 210px;
    height: 600px;
    margin: 0;
    margin-top: 50px;
    border-right: 1px solid #C6EC8C;
    font-weight: normal;
}

#container {
    position: absolute;
    padding: 0 0 20px 0; /*top right bottom left*/
    margin-top: 50px;
    margin-left: 235px;
}

However, to finish this code successfully, one last thing that needs to be done is adding some codes to the HTML pages.

In between the <body></body> tags, you will need to insert these codes:

<div id="navigation">
    <h2>The main navigation</h2>
</div>
<div id="container">
    <h1>The Main heading</h1>
    <p>You can best create the basic HTML page by following these instructions:</p>
</div>

And in between the <head></head> tags you will require to insert the following:

<title>First CSS Tutorial</title>
<meta http-equiv= "Content-Type" content= "text/html">
<link href= "mycss.css" rel="stylesheet" type="text/css">

With these coding on place, you can start styling your page.

Linking of style sheets – Using HTML and CSS

Linking of style sheets using HTML

One of the best methods of adding an external style sheet to a web page is to use HTML <link> tag. You can write the tag in a slightly different manner depending upon whether you are using HTML or XHTML.

For example, here is an HTML:


<link rel="stylesheet" type="text/css" href="css/global.css">

Here’s XHTML:


<link rel="stylesheet" type="text/css" href="css/global.css" />

The only difference is how you need to end the tag. The link tag is an empty element, since it has only an opening tag and no matching, closing </link> tag. In XHTML, you need to add closing slash (like this: />) to terminate the tag; HTML does not require the extra slash.

Otherwise, the link tag remains the same in HTML and XHTML and requires three attributes:

rel indicates the type of link – in this case, a link to the style sheet
type lets the web browser know what kind of data can be expected – a text file, containing CSS
href points to the location of the external CSS file on the site. The value of this property is an URL, and works the same as the src attribute you use when adding an image to a page, or the href attribute of a link pointing to another page.

Tip: you can attach multiple style sheets to the web page by adding multiple <link> tags, each of them pointing to a different style sheet file. This technique is basically a great way to organize the CSS styles

Linking a style sheet using CSS

CSS includes a built-in way to add external style sheets – the @import directive. You can add the directive inside of an HTML <style> tag, like the following:


<style type="text/css">
    @import url (global.css);
</style>

Unlike HTML’s <link> tag, @import is part of the CSS language and contains some definite un-HTML-like qualities:

To make any connection to the external CSS file, you should use url instead of href, and encloses the path in parentheses. So in this example, css/global.css is the path to external CSS file. Since quotes around the URL are optional, so url(css/global.css) and url(“css/global.css”) both work.

Note: Not only does quoting the path of an URL in CSS add a couple of extra characters to the file, Internet Explorer 5 for the Mac has trouble understanding URLS with quotes.

As with <link> tag, you can include multiple external style sheets using move than one @import:


<style type="text/css">
    @import url(css/global.css);
    @import url(css/forms.css);
</style>

You can add regular CSS styles after the @import directives if, for example, you want to create a rule that applies just to that one page, but take advantage of the same design rules used throughout the site to format the rest of the web page.

Here is an example:


<style type="text/css">
    @import url (css/global.css);
    @import url(css/forms.css);
    p {
        color: red;
    }
</style>

Technically, you should be placing all the @import lines before any of the CSS rules, but does not create any problem, in case you don’t. web browsers are supposed to ignore any style sheets you import after a CSS rule, but all current web browsers ignore that particular restriction.

Creating an Internal Style Sheet

1. With the file basic.html open it in your text editor, click directly after the closing </title> tag. Then hit Return and type <style type= “text/css”>

The HTML should look like the following:


    <title>Basic web page</title>
    <style type= "text/css">
    </head>

The opening <style> tag marks the beginning of the style sheet; you will follow this tag with a CSS selector that marks the beginning of your first style

2. Press the Enter or Return key and type h1 {

The h1 indicates the tag to which the web browser should apply the upcoming style

The bracket thing after the h1 is called an opening brace, and it marks the beginning of CSS properties for this style. In other words, it says: ‘the fun stuff comes right after me”

3. Press Enter [Return] to create a new line, hit the Tab key and type color: red;

You have typed the same style property as the inline version – color – and set it to red. The final semicolon marks the end of the property declaration

4. Press Enter [return] again and add four additional properties, like:


    font-size: 2em
    font-family: Arial, sans-serif;
    margin: 0;
    border-bottom: 2px dashed black;

Each of these properties adds a different visual effect to the headline. The first two assign a size and font to the text, the third removes space from surrounding the headline, and the last property adds a line underneath the headline.

Your work on this style is completed, so next you will indicate its end.

5. Press Enter [return] and type a single closing brace on the last line: }

As the partner of the opening brace that you had typed in step2, this brace’s job is to order the web browser “here ends this particular CSS rule.” All you need to wrap up the style sheet is a closing tag.

6. Press Enter [Return] and type </style>

The closing </style> tag marks the end of the style sheet. And guess what? You have just now created an internal style sheet. The code in your page should now look like the following:


<title>Basic Web Page</title>
<style type= "text/css">
h1 {
    color: red;
    font-size: 2em;
    font-family: Arial, sans-serif;
    margin: 0;
    border-bottom: 2px dashed black;
}
</style>
</head>

7. Preview the page in web browser

You can preview the page by opening it in a web browser or opening it in a browser window, then just click the Reload button.

Now you will add another fascinating style.

8. Back in your text editing program, click after the closing brace of h1 style you just created, press return and then add the following rule:


p {
    color: #003366;
    font-size: .9em;
    line-height: 150%;
    margin-top: 0;
}

This rule formats every paragraph on the page. You do need to worry about what the CSS property is doing.

9. Preview the page in a web browser.

The processes that you have worked through are CSS in a nutshell: Start with an HTML page, add a style sheet and create CSS rules to make the page look great.