How does CSS make a layout?

liunx

Guest
I have been told that CSS is better for page layout than a table, (ahem) and I was just wondering how CSS does that. Like, what kind of code would you use, and what are all the aplications of CSS? :confused:You would manage the layout with divs, for the most part. Each div would contain something (usually), and you position them using various rules (float, relative, absolute, etc).

What I love about CSS is that you can change an entire layout just by changing a stylesheet - Check out <!-- m --><a class="postlink" href="http://www.csszengarden.com/">http://www.csszengarden.com/</a><!-- m --> for a great example of the power of CSS.See if this helps at all : <!-- m --><a class="postlink" href="http://bonrouge.com/3c-hf-fluid.phpYou">http://bonrouge.com/3c-hf-fluid.phpYou</a><!-- m --> can do all kinds of things with CSS. You can Just have your documents stay in their natural flow but style the fonts and colours etc without ever touching the markup, or you can do all kinds of groovy tweaks and tricks and go all out with fancy finishing touches. The fancy stuff does require that the users browser is a decent one, but hopefully everyone will have a capable browser some time soon.

In terms of how you apply it there's three basic ways:

1) You enter style instructions into style="" attributes in each element on the page that you want to style (which is rather inefficient and goes against much of what CSS is about).

2) You can enter all of your style instructions in a style block in a <style></style> element in the <head></head> element of your document (much better than the first method but still not the best).

or

3) Make a completely seperate file with all your style instructions in that (this is a stue style sheet). You then link the style sheet/file into and documents you wish to use it in. The beauty of this method is that you need only a tink bit of markup in your document to include the whole stylesheet, you can use the DOM and Javascript to dynamically alter which files are included (and in doing so completely transform a page with virtually zero effort), and that once the user has Download ed the stylesheet, they have it stored on their machine and they don't need to Download it again (unless it has been altered) to you can apply all those style rules to as many pages as you like and it will require zero bandwidth. Needless to say this is of great benefit to everyone involved.

The syntax of CSS is marvelously simplistic too.

To style a paragraph with the spanky-herer font and indent the first line by 5%, you simply write


p {
font-style:spanky-herer,sans-serif;// sans-serif because it is always good to have a font to fall back on.
text-indent:5%;
}

//This is a single line comment

/* And this is a comment
that goes over
a few lines. */


There are other selectors too but you'd be best getting the basics from somewhere like <!-- m --><a class="postlink" href="http://www.w3schools.com/css/Your">http://www.w3schools.com/css/Your</a><!-- m --> best bet is to to take a quick tutorial for the basics

and play with other people's style sheets
 
Back
Top