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

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-

<img src="http://www.website.com/picture.jpg" style="position:absolute; left:0px; top: 0px;">


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-


<img src="http://www.website.com/picture.jpg" style="position:absolute; left:250px; top: 100px;">


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

I'm sure it would be easy to diagnose if we could see the page in question (or at least a mock up of the problem).

tried it and still didnt work, must be some thing in my style sheet causing a conflict me thinks. I will work on it and get it refined and resolved though.

Cheers
Kev

Fair point,

I mean't Css in the linked to an external style sheet which defines the various parameters required, where as I use it in the tag.

Forgot to say the:



Also shows coloured scrollbars in a Mac browser (unsure of which version, think it's the newest one), hope its helped you Kev.

Dan

Me to :-) but I will give it a try and see if it resolves my problem.

Kev

GWD wrote:
> Dan 777 wrote:
> If you do it simply in HTML not this 'fancy Css' you could
> easily
>


In tag and change hex value all will be sweet

Dan


Digitrader wrote:
> How come when I added the following to the body of my CSS code it
> all went wron, the tesxt was on top of places it should not have
> been and it looked bad, its meant to change the colour of the
> scroll bar
>
> base color: #33ff00;
> scrollbar-arrow-color: #000000;
> scrollbar-3dlight-color: #000000;
> scrollbar-darkshadow-color: #999999;
> scrollbar-face-color: #ff9900;
> scrollbar-highlight-color: #999999;
> scrollbar-shadow-color: #000000;
> scrollbar-track-color: #999999;
> }
> and if I add it to the head of a page like this it still wont
> work, I think because I am using CSS? as this code works on
> pages with no CSS HELP anyone.
>
>
>
>
>
> Kev