How to use CSS to Format Web Pages

A Cascading Style Sheet (CSS) is a great way to clean up your code and reduce a lot of code bloat because you don't have to repeat font sizes and colors on every little bit of text. When you repeat images several times, like in a list format using buttons, you can load those as a background image and thus eliminate having to include width and height or alt tag on every image. Google recently started using download speed as a ranking factor (all other factors being equal) so it's now even more important to move all formatting to the CSS file.

These CSS tips are written mainly for CSS beginners with step-by-step examples.

How to Add a Border to a Web Page with CSS

Instructions on how to add a border to a web page, container, box, table or any other item using CSS.

Your
Website Content
Goes Here

Format Multiple Tables on one Page in CSS

When you have multiple tables on one page with different formatting on each you need a separate CSS rule for each table.
format table in css

Using CSS Floats for Columns instead of Tables

How to calculate the width of columns and their margins and center floats on a page with CSS so they don't wrap to the next line.
5 column layout using CSS

Add Colored Borders Around Boxes in CSS and HTML Tables

This CSS tip gives instructions on how to add 3 color borders around boxes or table cells in either CSS or HTML.

Vertically align images with text in CSS

This CSS tip shows how to align images with the text on the page.

An image aligned with text in the middle:

Decorate your Web Pages with Red Hearts in CSS

Use character encoding to produce red hearts and other symbols:

Add Frames Around Images with CSS

Add frames around images with CSS without using table cells. This works on any size image.

Control Mouseovers with CSS

Several examples of controlling font colors and indents on mouseover with CSS (and without Javascript) can be seen on the menu samples page.

Also see HTML Tips

~ ~ Other CSS Resources ~ ~

Here is a great CSS memory game.

Check out this CSS Shorthand Cheat Sheet

Here is a neat video tutorial on How to Format your CSS file

Lori's Web Design, 1815 E. Nebraska, Spokane, WA., 99208, 1-509-443-8693 Home \| Website Redesigns \| Web Design Portfolio \| Portfolio #2 \| Portfolio #3 \| SEO Analysis and Website Evaluations Professional Web Design Services \| Design Quotes \| Design Rates \| Graphics Tutorials \| Links \| Site Map \| SEO Tips Blog
		Lori's Web Design Spokane, WA. Copyright © 2010 All Rights Reserved		Lori's Web Design