Techniques for extending your website with CSS

Style Tricks

© graphic designer, Fotolia

© graphic designer, Fotolia

Article from Issue 94/2008

Cascading Style Sheets (CSS) can do much more than define the color and font of your web text. We'll show you how to build the power of CSS into your web creations.

If you ever work with HTML, you are probably familiar with the stylesheet language known as Cascading Style Sheets (CSS). The purpose of CSS is to let you separate the presentation of a web page from the content. The content is described through a markup language such as HTML or XHTML. The presentation is managed through CSS.

Separating content from presentation makes the HTML cleaner and easier to read, and it also means that you can change the presentation across a whole site much more easily. Do you want to change all your h1 headers from centered blue 20-pt to left-aligned red 24-pt? With CSS, you can do that by changing a single file. CSS also improves accessibility; users with special needs can easily create custom style rules for easier access.

CSS Rules

Although it is possible to put CSS rules in an HTML file, it is better to create a separate CSS file, because it gives you a central point for managing the style. In a typical CSS scenario, the HTML header will look like that shown in Listing 1, and the CSS file will look like Listing 2.

Note that you can apply styles to all instances of a particular HTML tag (as with <h1>) or only to certain instances by labeling them with a class type.

Listing 1


01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or
02 g/TR/xhtml1/DTD/xhtml1-transitional.dtd">
03 <html>
04     <head>
05         <title>Page Title</title>
06         <link rel="stylesheet" type="text/css" href="site.css" />
07     </head>
09     <body>
10                 <h1>Page Header</h1>
11                 <p class="firstpara">This is the first paragraph of the page.</p>
13                 <p>Some more text here</p>
14         </body>
15 </html>

Listing 2


01 h1 {
02         color: blue;
03         font-size: large;
04         text-align: center;
05 }
07 p.firstpara {
08         text-align: center;
09 }

Artful Expression

CSS does far more than allow you to change the color, size, or background. Artful use of CSS lets you add interesting new elements to your site, and CSS can even help you replace difficult-to-use tables and Javascript. This article goes beyond the headings and fonts to show how you can easily add new features to your website with CSS. Read on for a look at how you can employ the expressive power of CSS in your own environment. This article assumes you have some basic familiarity with CSS.

For additional information, try the W3C Cascading Stylesheets homepage [1]. You'll also find several CSS tutorials on the web [2].

A very common page layout is one that has multiple columns on a page. Previously, you might have handled multiple columns with the use of a table, but the table option is frowned upon from an accessibility point of view, and a table can be difficult to maintain. It's easy to get confused about what part of the page is where, and to forget to close off your tables, cells, and rows properly, which might confuse some browsers.


CSS to the rescue: You can use the float property to make your layout multi-columned but clear and easy to use.

Listing 3 shows the HTML for a two-column layout with a full-page-width header and footer; Listing 4 shows the CSS. Listing 3 uses id to identify the containers rather than name or class, although these options work in similar ways.

Listing 3


01 <div id="container">
02         <div id="header">
03         <h1>Header of page</h1>
04         </div>
05         <div id="columnone">
06         <h2>Column One text</h2>
07         <p>Put your text here.</p>
08         </div>
09         <div id="columntwo">
10         <h2>Column Two text</h2>
11         <p>Put your text here.</p>
12         </div>
13         <div id="footer">
14         <p>Footer text</p>
15         </div>
16 </div>

Listing 4


01 #container {
02         width: 100%;
03         background: #9cf;
04 }
05 #header {
06         width: 100%;
07         padding: 1%;
08     text-align: center;
09         background: #999;
10 }
11 #columnone {
12         width: 45%;
13         float: left;
14         padding: 1%;
15 }
16 #columntwo {
17         width: 45%;
18         float: right;
19         padding: 1%;
20 }
21 #footer {
22         clear: both;
23         text-align: center;
24         font-style: italic;
25         background: #999;
26 }

The class is best used when you have more than one example of the type on a page. With this column layout, you should have only one columnone per page. The id is better for identifying a particular type of an element, whereas name is good for identifying a particular instance of an element – for example, a specific menu item on a page. In this case, I want to identify a generic type of element (e.g., a columnone sort of div), so I use id.

The width of column 1, plus the width of column 2, plus twice the padding of column 1 (once for the left side, once for the right side), plus twice the padding of column 2 need to add up to 100% or less for the float to work correctly.

The footer uses the clear property to make sure it stays below both the previous floats. This means that the container element will extend around all of the other elements.

To explain that last statement a bit further: Floating elements don't "count" in the page layout. When the browser is laying out the page, floated elements are put "on top" of other elements, rather than placed in the regular flow of the page. If you don't have an element after your floats that uses clear, then they won't be within any container element – they look like they're floated on top of the container element, instead. This almost certainly isn't what you need, so here I use a footer. (It doesn't have to have any content!)

If you want to add a third column, you can add another float: left <div>, or you can float one column left and another one right, if you prefer, with a static central column. Again, make sure the width of all three columns plus their padding on each side adds up to less than 100% of the page width; otherwise, one of the columns will be forced below the others.

The use of percentages means that as people shrink or enlarge their browser windows, the columns and other elements will shrink and grow accordingly. This approach is more flexible than hard-coding the width of the elements. However, you can use min-width or max-width if you don't want them to be shrunk below a particular size. If you put min-width on the container element, scrollbars will appear if the user tries to shrink the browser window below this size. This technique can be useful if you want a fairly narrow column on one side and you don't want it to shrink beyond the width of, say, a menu item title.

The other attributes – background and font-style, for example – set other properties of the containers.

See Figure 1 for a look at this basic layout.

Buy this article as PDF

Express-Checkout as PDF
Price $2.95
(incl. VAT)

Buy Linux Magazine

Get it on Google Play

US / Canada

Get it on Google Play

UK / Australia

Related content

  • Cascading Style Sheets

    Cascading Style Sheets (CSS) help you polish up your websites without taking a crash course in programming.

  • AJAX Workshop

    Books were the original model for website design. Navigation was similar to flipping the pages. Thanks to AJAX, many state-of-the-art websites now behave like desktop applications.

  • Web Design with GIMP

    Good homepage design is a question of the layout. Sometimes the best option is to use a graphics program to design the page, then translate the result into HTML code. The versatile image manipulation program GIMP can help.

  • Server Side Includes

    Server Side Includes (SSIs) can save you time and make your website easier to maintain.

  • HTML5 Offline

    An offline cache in your browser and a bit of HTML5 acrobatics combine for interactive web applications that keep working even when the Internet connection breaks down.

comments powered by Disqus

Direct Download

Read full article as PDF:

026-030_css.pdf  (844.27 kB)