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.
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.
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:
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:
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 }
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 }
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 }
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).
a:hover { background-color: #cccccc }
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!
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
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.
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
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!
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.
I used to run a aim profile generator on one of my sites, but got tired of it.
<HTML><A HREF="http://yoursite.extension/profile.html?username=yourscreenname&u=%n" TARGET="_self"><B>Click to see my extended profile!</B></A></FONT>
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.
border-bottom: 1px solid #000000;
border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #000000;
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
WebDesignStudent: http://woodoven.tripod.com
Anyway, I really don't see the link with this tutorial...
Add a new comment