4WebHelp: CSS: Layout and Presentation Tricks

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:

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:

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:

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:

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
juliamark300
I am searching this forum from past one month.
ari_1965
Thank you. The highlighting and padding code worked perfectly for me. I appreciate you posting this info.
Bill Taylor
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!
mgsela
i still dont get it
Costin
Keep up the good work!
Jinksy
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.  
Jerry
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.
Dan Hughes
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>
tanveer
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.
Daniel, 4WebHelp Team Member
bekki: The only problem with the shorthand method is that you have to remember what goes where (the order: width, style, colour).
bekki
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. ^_^
Daniel, 4WebHelp Team Member
Frank P: Sorry, that was a mistake. The logo has been changed.
Frank P
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 ?
Rado Lovis
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
Rado
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
Daniel, 4WebHelp Team Member
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...
miaow
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


Page URL: http://www.4webhelp.net/tutorials/css/presentation_tricks.php
Back to the "pretty" page!

© 2017, 4WebHelp Team.