Setting Up The CSS
Take a look at the code we’re in the middle of working on. Notice how each div is assigned an id, and then given a name? These names correspond with the css we’re now going to build to start giving this site some backbone.
Right above the opening < body > tag we’re going to create a stylesheet, by creating opening and closing < style > tags and placing the following between them. The final result should look like this:
[css]
[/css]
If you pay attention, you’ll notice that the three css values are shown with number signs in front of them, followed by opening and closing brackets. These css elements also have the same names as the divs do in our html. This is because in Xhtml, the xhtml and stylesheet work together to layout the site. CSS elements with number signs (#) in front of them are known as div ID’s, while css elements with periods (.) in front of them are known as classes. The difference between divs and classes are ID’s may only be used once, because they are unique. Classes may be used an unlimited amount of times on one page. Look at it like this: In a natural progressing number lines, one number will only appear once (divs). In writing, periods are used at the end of every sentence, so they are used over and over again (classes).
As Steve and Phu have pointed out in the comments below, it’s important to remember that ID’s and classes can be used to name anything. For example, ID’s serve as unique names for things, so an image could be given ID = "pic1", or a form can be given the ID form1. ID’s must remain unique throughout the entire page, but for the sake of our introduction article, you shouldn’t need to worry about this until you begin further developing your code.
Let’s start adjusting some things now and demonstrate floats.
Magic CSS
CSS can perform many special functions, one of these being floating. Floats shift a container to either the right or left side of a page. We’ll use some floats in our basic layout.
Floats can be used on either ID’s or Classes, but I prefer to use them as classes and place them inside a div. In this case, we’ll split our content div into two columns. To do this, we start by adjusting the html and adding two < div class = "classname" >< / div> in between the opening and closing < div > tags of “content.”
[html]
[/html]
Now let’s adjust the stylesheet to make these fit. We’ll add this right above the closing < style >.
[css]/*
Let’s split into two columns
*/
#content .left {
width: 45%;
margin-right: 5%;
border-right: 1px solid #efefef;
float: left;
}
#content .right {
width: 45%;
float: right;
background-color: #F9F8F2;
}[/css]
By using both the div name and class name in naming the css elements, it allows us to reuse the name of the class in another div, say inside the footer, and still specify its own characteristics to those classes.
Now we’ll tweak our css a little more by setting up body and text properties. We’ll also specify style settings for content paragraphs and headers < h2 >. Notice that classes inside a div take on the same properties as the parent container, unless new properties are specified. So for example, if the parent div has a background color of white, all div classes inside will follow suit, unless a background color is assigned.
Below is our final entire stylesheet, including opening and closing style tags:
[css]
[/css]
Now let’s go back and adjust our html to include our newly created paragraph (< p >) tags and header (< h2 >) tags. We’ve also added in some filler text to demonstrate text in each different float location. The content between the < body > tags looks like this:
[html]
News Posts.
This is only a test. You can download this entire html file to see exactly how we did what we did. Pretty niffty eh?
[/html]
You’ll notice we wrapped the entire thing in a wrap, to contain all the divs inside and have them restricted to a certain size. To get the page to center, we used a margin: 0 auto;.
Upon a save and opening in your favorite browser, you’ll see your first ever valid xhtml layout. All coded from scratch, without the use of any graphics. You’ve setup the three basic containers that form almost every site out there, and you experienced floats.
Afterschool Reading Material
PSD to Xhtml – Trash Imageready code for Xhtml
Making the Transition – Use a basic understand to stop using tables
Learn XHTML from W3Schools – A deep guide on learning xhtml
Markup Maker – Generate a XHTML valid page using just div ID names.
