CSS Layouts are a standards-compliant method of creating your site's look, and so, are the best way to create the design. Not only will there be great forward compatibility, using CSS to position your content will make the pages more accessible and easy to update in the future.
The content of your html page is put into <div></div> tags or HTML5 tags such as <header><footer>and <article>that create chunks of content or blocks of content. These are positioned on the page by their order, and by the corresponding CSS rules.
Positioning is created not with classes (.name), but with IDs. These are indicated in the style sheet with the pound or number symbol (sometimes called "hash" tags): #.
What this looks like
In the style sheet (either embedded or as a separate file), the CSS would look something like this:
#box {
background: #fff;
position: absolute;
top: 0px;
left: 0px;
margin: 0 auto;
width: 770px;
height: 600px;
border: 1px solid #000000;
padding: 10px;
}
(This would be a fixed design that puts all the content in one box, 770px wide by 600px high. The auto margins (in conjunction with a width) center the page, and there is a black border around the whole thing with 10px of padding inside the box..)
In the HTML, the CSS is used within the DIV tag like this:
<div id="box">blah, blah, blah</div>
See it in action here.
The box model
Remember that your html elements in boxes include the:
- the width of your content
- the padding
- the border
- the margin.
Floats
Elements can be floated to the left or right, and the content then wraps to the other side. So, if you float an image to the left, all the content will wrap to the image's right.
We can use a combination of divs, floats, margin and padding to create layouts using the default static flow of CSS.
(We'll talk about positioning properties later in the term.)
Other important ideas
Block elements vs inline elements
A block element is any html tag that takes up the entire width available to it. They will also have space above and below the element. Examples are:
<p></p>
<h1></h1>
<div></div>
Inline elements only take up the space needed, and don't force a line break. For example:
<a></a>
<strong></strong>
<img />
Parent and child elements
This is the idea that some elements will be "descendants" of others. For example:
<body> would be a parent element and any element under the <body> tag would be a child of it.
You can also define these relationships. See the W3C Schools site for a full chart of selector references.
Inherited properties
Most textual properties are inherited in CSS. So if you set the font-family to verdana in the body CSS, type would be set in verdana by default.
Using the layouts in the resources section
Now, let's go to the sample CSS Layouts in the Resources section, and get one to play with. You may also want to download this image, so I can show you how to fake a sidebar:
