CSS Quick Codes
This isn't a tutorial as such, more of a reference point. You can use the chunks of coding here to customise your pages without worrying about learning CSS yourself or trying to figure out what does what. This page will be constantly added to: i.e. never finished. Feel free to make a suggestion if you want to know how to achieve something specifically.
Page Text Customisation
Change your font colour (this example will give grey text):
<style type="text/css">
body, table, td, p {
color: #666666;
}
</style>
For a different colour, swap #666666 for another hex colour, or a 'colour word' such as red, black, green etc. For a list of various hex colours and colour words check out my Colour Guide.
Change your font to a different 'style' (family):
<style type="text/css">
body, table, td, p {
font-family: Verdana, Tahoma, Arial, Sans-Serif;
}
</style>
By declaring multiple fonts as above, users that don't have the first font installed on their system will see the second font. Users who don't have the first and second font will see the third font and so on. Lastly we declare the generic font-family for users who don't have any of the specific fonts included on their system.
Common sans-serif fonts include: Verdana, Tahoma, Arial, Trebuchet MS and Lucida Sans MS.
Common serif fonts include: Times New Roman and Georgia.
Make all text bold:
<style type="text/css">
body, table, td, p {
font-weight: bold;
}
</style>
Make all text appear in lowercase letters:
<style type="text/css">
body, table, td, p {
text-transform: lowercase;
}
</style>
Link Customisation
Change the colour of your links:
<style type="text/css">
a, a:link, a:visited, a:hover, a:active {
color: blue;
}
</style>
Make your links appear a different colour on-hover:
<style type="text/css">
a, a:link, a:visited {
color: blue;
}
a:hover, a:active {
color: red;
}
</style>
(Again, don't forget you can change the colour values for any named/hex colour!)
Combining CSS
To combine effects on this page, take the code between <style type="text/css"> </style> tags and 'add' them together. For example, if we want red text and blue links, we might have these two sections of coding:
<style type="text/css">
body, table, td, p {
color: red;
}
</style>
<style type="text/css">
a, a:link, a:visited, a:hover, a:active {
color: blue;
}
</style>
To save space, we can combine these two into one big block of styling like so:
<style type="text/css">
body, table, td, p {
color: red;
}
a, a:link, a:visited, a:hover, a:active {
color: blue;
}
</style>
If you have more one piece of styling which you want to apply to the same element, for example a font colour and font family change both applied to 'normal' text, we can combine those even further. So, instead of:
<style type="text/css">
body, table, td, p {
color: red;
}
</style>
<style type="text/css">
body, table, td, p {
font-family: Verdana, Tahoma, Arial, Sans-Serif;
}
</style>
We'd use:
<style type="text/css">
body, table, td, p {
color: red;
font-family: Verdana, Tahoma, Arial, Sans-Serif;
}
</style>
Tags:
css, reference,
Last Updated On: 27th February 06 by Jem
Bookmark At: StumbleUpon, Digg
Handy Stuff
Downloads
Friends of 'TT'
Resources