Style Sheets & XHTML, seperating content from style...
This is a short overview on making a layout with CSS. It shows several examples using different styles sheets.
1. The underlying structure
If you view the basiclayout.html you will see a well-structured XHTML document as it is seen with NO stylesheet. All of the examples presented here use the same HTML! You should start any web-page with its structure in mind. This has many advantages. For example, Header Tags properly placed can offer benefits in search engine ranking for your pages.
Step 2: Formatting the text
In this example, text-formatting.html, you can see how to set up font sizes and also, by setting borders and backgrounds for block elements such as header tags you can make the page easier to read.
Remember: Point sizes are for print, ems are for screen.
Use a base font size in the body class, and assign font sizes in the headers and paragraphs using ems. In the print CSS, set the body font to 12pt.
You can get better 'control' by setting font pixel height but using pixel height to determine text sizes is not recommended since this break the 'text-size' customization option in IE browsers.
Read more about making style sheets for print.
Step 3: Laying out the grid
Sketch on paper what kind of layout you want. Navigation menu? Top, bottom, left? A page split down the middle? Three columns? Two menus?
When using CSS for layouts, the <div> </div> tag is your friend. Each section is in it's own divider. Some dividers are nested to get centering, or to differentiate sub-sections
View the example and see how the div tags are used. We will take the Basic Document, and change this into a laid out page for our tutorial.
Tip when assigning padding or margins:
- margin: top right bottom left;
- padding: top right bottom left;
These websites have downloadable example layouts:
- Layout Reservoir http://www.bluerobot.com/web/layouts/
- CSS Layout Techniques: for Fun and Profit http://glish.com/css/
Step 4: Pretty Tricks
NB: These next examples use essentially the same layout as in 1-3, but I needed to add another div : <div class="pagewrap"> to get the content area to float.
As with other inventions such as 'Word Art', things that can possibly make your page pretty, can veer into making your page look gammy, naff, goofy or most dangerously: ugly.
With that caveat, you can try out some tricks that are available via CSS.
I've included some general design ideas that might help you pull in the reins if your creativity has gone amuck with eye candy.
- Image Backgrounds, Cascading Colors
- Here I used an image as the title, and hid the h1 text. It will still show up in textual browsers, and the image tag won't!
- Since the page background is black, I set different colors for the text and anchor link tags for the 'menu' divider.
- Transluscent fills, Anchor Tag Tricks
- View the CSS and the transparent gif which is used as a background fill in this example (on the content class). The leaf is used as a body background.
- While and underlined blue-red-purple link is the common standard, more and more we are seeing examples of changing the 'a' link to different colors, using a "hover" attribute, and removing the underline. Look for the a{} class in the CSS.
