Freeola Internet Get Dotted Domains Blog Guides Forums
Menu

Viewing Thread:
'A breath of fresh air with CSS ...'

Wed 03/01/07 at 10:26:
"nitrogoat.co.uk"
Posts: 76
I've written this tutorial to help you break the rock-solid, clinical appearance of HTML layouts which can be a total eye-sore. Through using CSS you can breathe new life into your website designs and create a more dynamic, modern site.

Firstly ...

CSS stands for the term Cascading Style Sheets.
This is a rather confusing name and basically it means you can manipulate your HTML (Hyper Text Mark-up Language) so you can achieve the effects you desire. These Style Sheets tell HTML how to behave and how to be displayed in the browser when the page is loaded.

CSS is a life saver !

CSS is also a life-saver for web developers who run several large pages and want to make changes on each without having to hunt through millions of lines of coding. It is possible to create a style for each HTML element, and when this style is altered, all the pages which use it, will be changed accordingly.

A quick peek at the syntax...

CSS is very different to HTML tags. Attributes in CSS are easier to find and modify as the syntax is more forgiving than in HTML.

body {
background-color: orange;
}


This is a chunk of CSS that i used to modify the colour of the background in my webpage.

Syntax in CSS follows this pattern-

selector {
property: value
}


which can also be written as-

selector {property: value}


Selector, property and value- you what?!

As in HTML and other languages, CSS is about telling elements how to look and behave.
In CSS, often the "Selector" is the HTML tag that you want to alter- such as body, and table. The element you wish to change is the "Property", and this is controlled by the "Value". When the value is more than one word, such as the name of a font, then you must put quotes around the word.

An advantage of CSS is that it is much easier to read, so finding certain snippets of code is easier than in HTML.

selector {
property: value
property: value
property: value
property: value
property: value
}


As you can see, you are able to list the attributes you are changing, and so CSS is slightly more laid-back than HTML, where you need to be strict with what goes where.

Important changes don't take ages...

With CSS you can list together all the elements you want to control with one value. For example if you wanted to control the appearance of all the links on a page you could do this:

a, a:link, a:visited{
font-weight: bold;
font-size: 8pt;
color: red;
}


This method is very useful and can save you a lot of time!

Perhaps the most useful aspect of CSS ..

Is being able to move anything on your website to whatever position you want.

If i wanted to put this picture in the top left hand corner of the site, i would use-




To change the position all you need to do is alter the numbers until you find what you want. The higher the number is, then the further it will move from that side. For example-





This would move the picture slightly lower down, and further to the right. In otherwords- its 250 pixels from the left hand side of the page and 100 pixels from the top. Easy peasy!

This opens up thousands of possibilities for your web designs as now you can position anything, anywhere you want on your web page!

I hope you have enjoyed reading this and understand how useful CSS can be. Thanks!
nitro_goat
Sat 27/01/07 at 01:28:
Regular
Posts: 1,014
Many thanks for that and all your help, its much appreciated. I will alter the html part of the code tomorrow.

Kev
Fri 26/01/07 at 13:03:
Regular
"Devil in disguise"
Posts: 3,151
Ok now that all the errors are gone.... :)

The reason its not working is because of the doctype. You arent allowed to apply those properties to body under that doctype (not sure its allowed under any doctype in fact).
But...
If you have