Introduction
This tutorial consists of several page examples.
Use each one as a starting point for your own work, adding more CSS to change the margins, fonts, and colors. You can also combine any of these techniques together. For example, the multipleBoxLayout can be included inside a single column of the 2ColLayout by changing the image size and amount of text. Or, add a pullQuote to one of your content blocks.
Getting Setup
To start, download the XHTML files and graphics. Right-mouse click on
each link and select "save target as" to download to your computer.
You should organize your files using this screen shot as a guide:
Notice
that all the graphics are inside a folder named: graphic.
Here are the XHTML files:
2ColLayout.html
3ColLayout.html
cssLayoutTutorial.html
(this tutorial page)
multipleBoxLayout.html
overlapBox.html
pullQuoteDemo.html
Here are the graphic files:
blueGreenLight.jpg
glassCeilingGrid.jpg
hero.jpg
spy.jpg
thumbprint.jpg
Here are some gradients that you might want to use to add texture to the page. Right-mouse click on the ones you want and select "save target as" to save to your computer. Put these in a folder named: gradient inside of the graphic folder.
Noticed how I used this class rule to make the gradients
easier to see:
/* put an outline around each gradient so it is more visible */
.gradient {
border: 1px solid black;
}
Each img tag contains a class="gradient" attribute that utilizes this
CSS rule:
<img ... class="gradient"
/>
Some CSS Tips 'n Tricks
Here's some tips 'n tricks that will help make your CSS development a little easier:
- Use different colored borders and background-colors to see what is really happening on the page. If the outline does not show you have a problem, check for a missing # or period "." or a misspelled word in your CSS code. Also look for colons ":" that are semi-colons ";" and vis versa. A colon goes after the attribute and a semi-colon goes at the end of each rule.
- Use the Outline options with the FireFox extension: Web Developer. ( See my blog entry, FireFox Extensions ) This will outline different CSS boxes in red and is even more helpful if you select the labels option as well.
- Use a CSS validator to make sure your code is correct. The Web Developer Extension has one under Tools or you can go out and use the CSS Validator at the W3C (use the Validate by File Upload option)
- If you are using DreamWeaver, watch the status bar of the
window to tell which block you have selected.
Also, DreamWeaver will shade the various parts of the box model. Simply mouse over to see the attributes. Here's a graphic that shows you these features in action. Notice the <body> <div#content> in the lower left status bar showing that this is the element that is selected. The mouse cursor is sitting right underneath the upper left corner of the popup box showing the margin, border, and padding settings for the #content box.
- Use consistent class and id names for common blocks on all your pages.
- Do one thing at a time and then view the page to see if the change is what you intended.
Two Column Layout
Start with the two column layout.
The key to this page is the float:left attribute used in the sidebar rule. Normally each element will "flow" onto the page, each one starting on the left margin. By using the float:left attribute you are telling the browser to allow other elements to flow to the right.
The other important attribute is the clear:left found in the footer id rule. This tells the browser to clear any left floats and to start this block on the left margin.
Noodling around with the code:
- Comment out the float: attribute. What happens?
- Change the float:left to float:right
- Try float:center
- Comment out the clear:left in the footer id rule. What happens?
- Change the margins and padding attributes so there is less space around the text
- Change the color of the text and background for each block following
a specific color scheme
color: #000099; /* changes the text color */
background-color: #AEAEAE; /* changes the background color */ - Add a gradient to some of the elements
background-image: url(graphic/gradient/horizontalWhiteBlue.jpg);
background-repeat: repeat-y; /* repeats down the page (repeat-x repeats across) */
Three Column Layout
The three-column layout is very similar to the two-column.
Position is Everything.
The trick here is to use the float for left and
right to position the two outer columns. Then use add the middle column
setting the left and right margin so there is no overlap with the other
two columns.
The order of the text in the <body> of the page is important. If you put the blocks of type in this order:
- left column text
- content column text (the center column)
- right column text
then the right column will position itself vertically starting at the bottom of the content column text. As soon as you move the text blocks around to this order:
- left column text (push everything to the right)
- right column text (push everything to the left)
- content column text (flow up between the two)
Than all the float: attributes will be able work as they should.
Another rule when using float: The browser needs to know how wide a column is so always include the width: attribute when using float.
When you want the footer block to move to the left you have to use
clear: both;
in order to clear both the left and right float.
Noodling around with the code:
- Move the content block of text in between the two column blocks of text. What happens?
- Change the clear:both in the footer CSS to clear:right
- Try clear:left
- What happens if you comment out the clear attribute?
- Add some greeking text to either column. Does the page accommodate longer columns for any of the columns or just the center one?
- What is causing the text in all the columns to drop down from the top border? Change the CSS to remove most of the space above the column heading text.
Click on the image for a larger view
Professional Tip: Establish a set of standard id class names and use them on all your pages. That will allow you to quickly adapt the CSS code from one site to another. Make sure these are unique names that won't conflict with HTML or CSS keywords. Some of the more common element names might include:
- header
- menu
- leftCol
- centerCol
- rightCol
- footer
- graphic or logo
Multiple Box Layout
Using the class=" " attribute.
So far we've been using the id=" " attribute which designates a single entity on the page. You can also use the class=" " attribute which can be used multiple times on the same page. For example, let's say you want to display several photographs along with summary text. You could set up a class="summary"and use it for each photo/text set.
The Multiple Box Layout page shows how this is done. Notice how the Two Column Layout was used, adding the summary blocks in as content for the right column.
Controlling How Excessive Text is Handled (auto scroll bars)
The CSS code establishes the height of the summary block to be just
a little larger than the highest image. But, what if the text summary
takes up more space?
By using
overflow: auto;
the browser will automatically add scroll bars so the user can access
the overflowing text.
You can see the vertical and horizontal scroll bars by changing the size of the window.
Specific Styling using Sub-blocks
This example also demonstrates how you can style specific sub-blocks of content. Look at the code:
.summary {
border: 3px solid
blue;
background-color: #FFFFFF;
padding: 5px;
height: 160px; /*
height of highest image */
overflow: auto; /* if the page
width narrows, add scroll bars */
}
.summary .graphic {
border: 3px solid purple;
float: left;
width: 100px;
}
.summary p{
border: 3px solid gold;
margin: 0px;
}
First, the .summary class sets up the main
block.
Don't forget the period "." at the front of the class name.
Then, inside of each summary block there will be .graphic classes
and paragraph objects. The .graphic classes are designated by including
the class=" " attribute inside of each <img /> element. Here's an example
using the first image. The class attribute is highlighted using blue:
<img src="graphic/hero.jpg" alt="Silouhette against
the light" class="graphic" />
Back in the CSS code you can see where we tell the browser to apply
the style ONLY to the graphic class that are inside the summary class:
.summary .graphic {
That allows us to use the graphic class other places on the page without
having an all or nothing style.
(Notice that both of these items start with a period "." because they are
both classes.
We do the same thing with all the paragraphs that are inside of the
summary block:
.summary p {
You don't need a period in front of the p designator because p is a
standard XHTML element and not a custom class like .summary or .graphic.
Overlapping Boxes and Transparency
The Overlapping Box example shows how to use the z-index: attribute to layer boxes that might overlap each other. It also demonstrates the Parchment Effect or changing the transparency of a box.
The Z-Index
CSS has been set up so several boxes can overlap each other and the designer can designate the order that they appear to the user. The higher the number the closer the box will be to the user.
In the example code you will see that the #content id has a z-index
of 5:
z-index: 5; /* higher numbers closer
to user */
and the #graphic id has a z-index of 0.
When the page is displayed you will see the text layer (id #content) on the top and always visible. You could use numbers like 0 and 1 but it is nice to have some flexibility allowing other layers to be inserted, so I recommend numbering in sets of 5.
This is a very useful technique when two blocks on the same page may overlap if the window is made smaller. As the developer you will have to determine which one should be visible. The box with the most critical information should always be visible.
The Parchment Effect (Setting Transparency)
This example also includes several lines of code which change the transparency
of the id #content object. Here's the code:
/* Set the opacity of the layer
*/
filter: alpha(opacity=90); /* IE 5.5 or higher
*/
-moz-opacity: .90; /*
Mozilla 1.5 or higher */
opacity: .90; /*
Mozilla 1.7 & FireFox
*/
Each line covers the different browsers as noted in the comments. Try to keep the transparency levels fairly high so the text is always easy to read no matter what the graphic is underneath.
This effect seems to trigger the JavaScript security features of IE 6.0 so the user may have to "unblock" the content in order to see the effect when using IE 6.0.
Noodling around with the code:
- Change the transparency levels to see the different look that is available. ( change all three lines so no matter what browser you are using you will be able to see the change.)
- Make graphic and content smaller so they adjoin when the page is viewed full screen. Then make the screen smaller to see how the boxes move around.
- Add one of the gradients to a third box and set the z-index levels accordingly. Don't forget to resize the window each time you test the page.
Adding PullQuotes
The final example uses a little JavaScript as well as the DOM (Document Object Model) which are more advanced techniques, but if you can copy and paste you will be able to easily add this effective technique to your pages.
A block quote is text from the page that is enlarged and styled to catch the reader's attention.
Simply copy and paste the <style> and <script> element into your pages,
making certain they are inside the <head> section of the page. To
create a block quote simply put a <span> element around
the text you want to highlight:
<span> class="pullquote">
The text that should be included in the pull quote
</span>
The elegance of this technique is that it uses existing copy. You don't have to write (or maintain) a separate block of copy for the pull quote. This means that if JavaScript is turned off, or the user is viewing the page in an old browser that doesn't understand the DOM, no information is lost.
Don't worry if you don't understand JavaScript or the DOM. Just make sure you copied the code correctly.
On the other hand, feel free to change the CSS code for the pullquote class to match the font and color scheme of whatever web site you are building. This is the beauty of CSS!
Summary
You now have several valuable tools to include in your designer's tool box.
Keep them handy and include them as a regular features of every template you build. Once you have a well designed template you will be able to replicate for all the pages of the web site you are building.
Here's what you should now be able to do:
- Quickly build a two-column (2ColContent.html) or three-column layout (3ColContent.html)
- Display multiple objects with specific sub-block formatting (multipleBoxLayout.html)
- Add gradients to a page giving you a professional edge
- Layer boxes on top of each other (multipleBoxLayout.html)
- Make any box object semi-transparent giving it a parchment effect (multipleBoxLayout.html)
- Understand and use the float: and clear: attributes.
- Display pull quotes on any page.
- Have tools set up to help you write and debug your CSS code
*** *** ***
This is the end of the CSS Layout Tutorial
Written by Peter K. Johnson.
Read my blog at
http://webexplorations.com/blog
