You are using a browser which is not compatible with CSS (for more information, see Tara's tutorial). Because of this, it is possible that our website may not appear correctly in your browser. We apologise for the inconvenience, and recommend you upgrade your browser to one which is compatible with CSS. For more information, please visit our Browser Upgrade page.

4WebHelp

CSS: Layout and Presentation Tricks by Daniel

Last updated: 02/05/2012
Biography: Daniel has been interested in web design since 1999, when he first started designing a personal website. Since then, he has learnt much, and is interested in new web standards like XHTML and CSS, and in PHP.

Daniel is responsible for managing the 4WebHelp Forums, along with the forum moderators. He should be contacted for any modifications to your forum account (which you cannot do through the phpBB interface) and for any issues you may have with moderation.
See 9 more tutorials by Daniel

Ever wondered how those snazzy presentation and layout tricks are achieved? HTML is certainly no longer the way to go (not to mention Javascript!), but what is the way to go? CSS is your answer. If you're not familiar with CSS yet, be sure to read Tara's excellent introductory tutorial which will soon fill you in on what you've been missing.

Contents:

So, what can you do with CSS? Well, the possibilities are endless, but I will try to introduce you to a few of my favourite CSS effects:

  • A classic - link styling
  • Borders
  • Highlighting
  • Indenting

A classic - link styling:

Back when I started designing web sites, this effect was only just starting to emerge, with major sites such as Microsoft starting to use CSS. What it was most used for was removing the underlining on links - however you can do much much more to your links!

The first thing to know about link styling is that it is "special": you don't style links like you do paragraphs or images. With links, you have access to different "pseudo-classes": these pseudo-classes let you define different styles for different states of an element. What does this mean to you? This means that you can make your links show up differently depending on if they are active, being hovered over, visited, etc... The different pseudo-classes are:

  • hover: Applied when the mouse hovers over the link
  • visited: Applied when the link has been visited (of course this depends on your browser - if you've just emptied your History it won't know you've visited a certain URL)
  • active: Applied when you've clicked on the link (Internet Explorer puts a little box around the link when it is in the active state)
  • link (also applies when no pseudo-class is specified - this is the default state for a link): Applied when the link has not been visited, is not active, and is not being hovered over

So how can you use these pseudo-classes to style your links? Well, simply procede as if you were styling any other element, but add the pseudo-class name after the tag name, like so:

a:hover { color: red }

Now, let's get down to the interesting part: some examples of what you can do with this:

Remove underlining

a:link { text-decoration: none }

This tells the browser to remove any text decoration (underlining being a text decoration) on links. Note that to many visitors underlined words are links, and that removing the underlining can often disturb them. You should make sure that you have another method of making your links obvious. Just for reference, here is the CSS to turn underlining on (some browsers may not have it on by default, so if you want it on, to be safe):

a:link { text-decoration: underline }

Change the colours

Another commonly used effect is to change the colour of links when they are hovered over:

a:hover { color: red }

You can also change the colour of normal links, visited links and active links, if the default blue, purple and red (the colours used for links by most browsers today) don't suit you:

a:link { color: #000000 }
a:hover { color: #ff0000 }

Add a border

This is quite a rare effect, but if used with taste, it can make your site stand out from the others:

a:hover { border-style: dashed; border-width: 1px; border-color: black }

I am a link

border-style defines the type of border to put around the link. Types of borders you can use:

  • none!
  • hidden
  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset

border-width defines the width of the border to be used, usually defined in pixels. Most of the time for links you won't want to go over 1 pixel. border-color defines the colour of the border to be used (red or #ff0000 for example).

Change the background colour

a:hover { background-color: #cccccc }

I am a link

This will change the background colour around your link to grey when the link is hovered over.

You can of course combine these effects - just don't overdo it though. There is no need to change the background colour around your link and put a border around it and change it's colour!

Borders:

We've already looked at borders above, when talking about links, but they can of course be used on other elements such as paragraphs or images. Here we will look into borders in more detail.

Borders don't have to be the same on all sides of an element - just like in Excel, you can put different borders on different sides. One common use of this is to put a dashed border on the bottom of some text - this acts like a dashed underline:

border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: red

The properties which you can use are the following:

  • border-style (applies to all sides)
  • border-width (applies to all sides)
  • border-color (applies to all sides)
  • border-bottom-style
  • border-bottom-width
  • border-bottom-color
  • border-top-style
  • border-top-width
  • border-top-color
  • border-left-style
  • border-left-width
  • border-left-color
  • border-right-style
  • border-right-width
  • border-right-color

Here's one more example to illustrate this - let's say you want a solid border on the top and the bottom of your paragraph, and a dashed border on the sides of your paragraph:

<p style="border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: black; border-top-style: solid; border-top-width: 1px; border-top-color: black; border-left-style: dashed; border-left-width: 1px; border-left-color: black; border-right-style: dashed; border-right-width: 1px; border-right-color: black">Your text</p>

Your text

What you may have noticed by now is that the border is stuck to the text. What if we want to add a little space? Padding is the trick:

<p style="border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: black; border-top-style: solid; border-top-width: 1px; border-top-color: black; border-left-style: dashed; border-left-width: 1px; border-left-color: black; border-right-style: dashed; border-right-width: 1px; border-right-color: black; padding: 5px">Your text</p>

Your text

Highlighting:

This is a relatively simple application of the background-color property:

Your Text. <span style="background-color: yellow">Your Highlighted Text.</span>

Your Text. Your Highlighted Text.

Again, you can add some padding, although it is less necessary here:

Your Text. <span style="background-color: yellow; padding: 3px ">Your Highlighted Text.</span>

Your Text. Your Highlighted Text.

Indenting:

After a paragraph of text, you may want to add some notes, which are indented so as to differentiate them from the rest of the text:

<p>Normal paragraph.</p> <p style="margin-left: 30px">Your indented paragraph.</p>

Normal paragraph.

Your indented paragraph.

As with borders, you can apply a margin above or on the right:

<p style="margin-left: 30px; margin-right: 30px; margin-top: 30px">Your paragraph with a 30 pixel border on the top, left and right.</p>

You could also add a border around these notes:

<p style="margin-left: 30px; margin-right: 30px; margin-top: 30px; border-width: 1px; border-style: dotted; border-color: black">Your paragraph with a 30 pixel border on the top, left and right.</p>

Well, that ends this tutorial on using CSS for your presentational and layout needs. Just keep in mind that you can combine these effects. Now it's time to get experimenting - these effects can be used on links, paragraphs, images, code tags (like in this tutorial), tables, table cells, etc...

© 4WebHelp and Daniel

Latest comments on this tutorial
Name: juliamark300Email julia dot mark300 at gmail dot com
I am searching this forum from past one month.
Name: ari_1965Email holdenltd at msn dot com
Thank you. The highlighting and padding code worked perfectly for me. I appreciate you posting this info.
Name: Bill TaylorEmail b dot taylor dot esq at gmail dot com
Nice Tutorial, it covers the basics of CSS, wish it had been around when I struggled to learn the subject.
I have come quite a way in the past few years. For an example of some of the tricks I now employ visit my site. Your are free to steal any code you want!
Includes DIV positioning, changing styles on the fly picture gallaries and well the list goes on!
[http://www.thatsinspiration.com
ENJOY!
Name: mgselaEmail none
i still dont get it
Name: CostinEmail thanks at refresh dot ro
Keep up the good work!
Name: JinksyEmail pauljinks at onetel dot com
Nice opener to the increasingly important area of CSS.

Any chance of a follow-up on laying out pages with divs?

It's nice to see that some big commercial sites are now using CSS to layout their pages.  Take a look at www.lycos.co.uk and www.onetel.com.  Once these would have been a mess of nested tables.  Now, nice neat divs! Much more accessible.  
Name: JerryEmail jerry at whatevah dot com
AOL profile... you're not really decorating it, you place a link in your profile that loads another page (like those subprofile sites).

I used to run a aim profile generator on one of my sites, but got tired of it.
Name: Dan HughesEmail danhughes at armedandwilling dot com
I found that a great way to make an AIM or AOL profile is to make one with you website and put the link to it in your profile. To have it so it opens in the same page use.

<HTML><A HREF="http://yoursite.extension/profile.html?username=yourscreenname&u=%n" TARGET="_self"><B>Click to see my extended profile!</B></A></FONT>
Name: tanveerEmail tanveer_t2002 at yahoo dot com
Hello there,
   awesome tutorial. How do I do the shading like at the left side of this page where the links are defined. It showing like a curve shading of light dark color.
     Thanks in advance.
Name: DanielEmail use contact form
bekki: The only problem with the shorthand method is that you have to remember what goes where (the order: width, style, colour).
Name: bekkiEmail none
you can just do:

border-bottom: 1px solid #000000;
for a black border on the bottom instead of all the

border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #000000;
The output is the same. ^_^
Name: DanielEmail use contact form
Frank P: Sorry, that was a mistake. The logo has been changed.
Name: Frank PEmail **** at chello dot nl
okay css is cool stuff and your webhelp-pages are great.

however you show the CSS1.1 logo, and it even might validate for that. still you use a transitional doctype here.
Am i missing something ?
Name: Rado LovisEmail none
My wood burning pizza oven [Link Removed] tutorial on refractory concrete for building wood burning oven-s has a great hover links now. Thanks for a good ideas.
Rado
Name: RadoEmail none
Thank you very much for these great sugestions. I particulary like the background coloring and borders. Will come here more often...Kindest regards
WebDesignStudent: http://woodoven.tripod.com
Name: DanielEmail use contact form
How do you "decorate" your AOL profile? What AOL profile? I thought the only way to view it was through your Instant Messaging client. Is there some kind of web interface for it too?

Anyway, I really don't see the link with this tutorial...
Name: miaowEmail cutefairyboots at aol dot com
erm, how do you decorate your aol profile, y'know, i know there are sites for this but i dunno where :'( Help meh pwease OSmile

Add a new comment

This page is © Copyright 2002-2017, 4WebHelp. It may not be reproduced without 4WebHelp's prior permission.