Dan Williamson
01-02-2006, 12:11 AM
Hey,
I saw somebody create a CSS tutorial which was to be honest awful, it didn't explain anything.
Anyway here we go, hopefully it's detailed enough!
Well CSS ( Cascading Style Sheets ) is one of the most popular styling languages at the moment, I myself code my layouts in full CSS. There are lots of good things with CSS such as better accessability to your site.
Also it keeps your code nice and clean as you can store the CSS in an external style sheet. Anyway we will be focusing on the standard XHTML document and adding the DIVS and CSS in the document and explaining what happens when you use that code.
Ok anyway we start off with the basic document so open notepad and key in this. You can edit the title or whatever.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Introduction to CSS - Dan Williamson</title>
</head>
<body>
</body>
</html>
To be honest you should know what this is but i'll explain it to you. It's the basic concept of a XHTML document. The Doctype at the top to the <head> tag is where you store all your internal CSS if you wish. But it's also where you store the external stylesheet.
Ok anyway the first way we will learn is the simple way to store all the CSS Syntax in the <head> tags and inside an internal Stylesheet.
Here is the code to open up an internal stylesheet:
<style type="text/css">
</style>
Normal HTML style the </style> closes the tag so you can't put no CSS codes outside it otherwise the browser won't excecute it.
Now we move onto selectors which grow to be an important part of your CSS document.
Ok here is the basic codes for the selectors:
p {
font-family: Verdana, Tahoma, Arial;
This is to choose the font and if the user doesn't have Verdana then it will change to Tahoma and so on.. Fonts can be one of the most valuable things on the content of your site.
color: red;
Now this is choosing the font colour but it music go in the p { selector and it can have either Hexademical codes or red, blue, black, pink, purple and so on..
font-size: 12px
Now this I think to be of is the most important thing in the content aspect of your site. I usually have it around 10-12 on content and around 20 on the header sections of places. Anyway the code is pretty much self explanitory it determines the font size.
Now we put all this together and we have the basic concept of the fonts line up for your content:
p {
font-family: Verdana, Tahoma, Arial;
color: red;
font-size: 12px
}
Now we move onto the whole body { section where you can change the background colour and images and whatnot. To start off the selector it's just as above except with body instead of p
body {
}
now we can add such things as background color:
background-color: black;
Now again basically self explanatory and you can use Hexademical codes or the colour name black, pink, yellow, blue, red, green..
Here is the code for background images:
background-image: url(background2.gif);
Now you can add other things onto the CSS code for background images. Such as the whole No-Repeat code.
background-repeat: no-repeat;
Ok so we've learnt some extreme basics now. We can create a nice XHTML page with a few selectors which change the background and fonts ready for the content.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Introduction to CSS - Dan Williamson</title>
<style type="text/css">
p {
font-family: Verdana, Tahoma, Arial;
color: red;
font-size: 12px
}
body {
background-color: black;
}
</style>
</head>
<body>
</body>
</html>
Now you may be getting confused with the whole situation if your a total newcomer to CSS styling. What this whole CSS code does is change the background colour black and set the font colour red, and the size to 12 pixels.
Now more selectors that come in handy with your links you can style your link for rollovers and text decorations. It's fun choosing what colours and decorations you set your links as.
a:link { }
a:visited { }
a:hover { }
a:active { }
These are the 4 selectors. The a:link is the standard colour of the link when nothing is hovering, active or visited. Then the a:visited is when you have succsessfully clicked a link it turns the colour of what you set this. Most people actually have the link and visited the same colour to stop confusion. The a:hover is where your mouse is rolling over the link this is called a text rollover you can have it totally different colour and it looks toally awesome!.
Now here are some decorations you can use on your link effects:
color
allows you to change the colour of the text.
text-decoration
gives you a few options on the formatting of your links. Set this to none to get rid of the underlines on links. If you want to bring them back, or put them in as a hover attribute, use text-decoration: underline. To get overline effects (a line above the text), set it to overline.
font-weight
This can format it to boldness or whatever
font-style
This can change the whole style of the text
font-family
This is just like used before in the actual CSS code.
font-size
Self explanatory
background-color
allows you to give your link-text a background color.
Anyway moving onto ID's you will find yourself using these a lot in your layouts.
Here is how to open the ID's code.
#IDname {
}
And then when you've done this you also put in your <body> tag:
<div id="IDname"></div>
Now this is the DIV in which you add your content to the ID. Now you can add lots of stuff and decorations to your ID's.
Here are some basic tags to go into the ID. I have commented in the HTML code box.
background-color: #Hex Code;
Adds the background colour for the DIV we went through this at the beginning
border: 1px decoration #000000;
This is the border you change decoration to whatever you want it to be, like solid or dashes. And also you can change the colour.
font-size: 12px;
Like we learnt before the font size and again I have gone for 12 PX
padding: 3px;
Padding is the padding between the edges and the text.
width: numberpx;
And the width is the length across 0f the ID
I explained in the tags to make it easier and quicker really.
Now you can use as many ID's as you want and you just select them into the <div id=""></div>
Anyway i'm pretty bored of typing now I think I have explained the minimilistic basics of Cascading Style Sheets. I hope I have gone into enough detail. I can stress this enough it is an introduction to CSS not advanced. I only wrote it as somebody didn't explain well and hopefully this is explained 10 x better.
- Dan
I saw somebody create a CSS tutorial which was to be honest awful, it didn't explain anything.
Anyway here we go, hopefully it's detailed enough!
Well CSS ( Cascading Style Sheets ) is one of the most popular styling languages at the moment, I myself code my layouts in full CSS. There are lots of good things with CSS such as better accessability to your site.
Also it keeps your code nice and clean as you can store the CSS in an external style sheet. Anyway we will be focusing on the standard XHTML document and adding the DIVS and CSS in the document and explaining what happens when you use that code.
Ok anyway we start off with the basic document so open notepad and key in this. You can edit the title or whatever.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Introduction to CSS - Dan Williamson</title>
</head>
<body>
</body>
</html>
To be honest you should know what this is but i'll explain it to you. It's the basic concept of a XHTML document. The Doctype at the top to the <head> tag is where you store all your internal CSS if you wish. But it's also where you store the external stylesheet.
Ok anyway the first way we will learn is the simple way to store all the CSS Syntax in the <head> tags and inside an internal Stylesheet.
Here is the code to open up an internal stylesheet:
<style type="text/css">
</style>
Normal HTML style the </style> closes the tag so you can't put no CSS codes outside it otherwise the browser won't excecute it.
Now we move onto selectors which grow to be an important part of your CSS document.
Ok here is the basic codes for the selectors:
p {
font-family: Verdana, Tahoma, Arial;
This is to choose the font and if the user doesn't have Verdana then it will change to Tahoma and so on.. Fonts can be one of the most valuable things on the content of your site.
color: red;
Now this is choosing the font colour but it music go in the p { selector and it can have either Hexademical codes or red, blue, black, pink, purple and so on..
font-size: 12px
Now this I think to be of is the most important thing in the content aspect of your site. I usually have it around 10-12 on content and around 20 on the header sections of places. Anyway the code is pretty much self explanitory it determines the font size.
Now we put all this together and we have the basic concept of the fonts line up for your content:
p {
font-family: Verdana, Tahoma, Arial;
color: red;
font-size: 12px
}
Now we move onto the whole body { section where you can change the background colour and images and whatnot. To start off the selector it's just as above except with body instead of p
body {
}
now we can add such things as background color:
background-color: black;
Now again basically self explanatory and you can use Hexademical codes or the colour name black, pink, yellow, blue, red, green..
Here is the code for background images:
background-image: url(background2.gif);
Now you can add other things onto the CSS code for background images. Such as the whole No-Repeat code.
background-repeat: no-repeat;
Ok so we've learnt some extreme basics now. We can create a nice XHTML page with a few selectors which change the background and fonts ready for the content.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Introduction to CSS - Dan Williamson</title>
<style type="text/css">
p {
font-family: Verdana, Tahoma, Arial;
color: red;
font-size: 12px
}
body {
background-color: black;
}
</style>
</head>
<body>
</body>
</html>
Now you may be getting confused with the whole situation if your a total newcomer to CSS styling. What this whole CSS code does is change the background colour black and set the font colour red, and the size to 12 pixels.
Now more selectors that come in handy with your links you can style your link for rollovers and text decorations. It's fun choosing what colours and decorations you set your links as.
a:link { }
a:visited { }
a:hover { }
a:active { }
These are the 4 selectors. The a:link is the standard colour of the link when nothing is hovering, active or visited. Then the a:visited is when you have succsessfully clicked a link it turns the colour of what you set this. Most people actually have the link and visited the same colour to stop confusion. The a:hover is where your mouse is rolling over the link this is called a text rollover you can have it totally different colour and it looks toally awesome!.
Now here are some decorations you can use on your link effects:
color
allows you to change the colour of the text.
text-decoration
gives you a few options on the formatting of your links. Set this to none to get rid of the underlines on links. If you want to bring them back, or put them in as a hover attribute, use text-decoration: underline. To get overline effects (a line above the text), set it to overline.
font-weight
This can format it to boldness or whatever
font-style
This can change the whole style of the text
font-family
This is just like used before in the actual CSS code.
font-size
Self explanatory
background-color
allows you to give your link-text a background color.
Anyway moving onto ID's you will find yourself using these a lot in your layouts.
Here is how to open the ID's code.
#IDname {
}
And then when you've done this you also put in your <body> tag:
<div id="IDname"></div>
Now this is the DIV in which you add your content to the ID. Now you can add lots of stuff and decorations to your ID's.
Here are some basic tags to go into the ID. I have commented in the HTML code box.
background-color: #Hex Code;
Adds the background colour for the DIV we went through this at the beginning
border: 1px decoration #000000;
This is the border you change decoration to whatever you want it to be, like solid or dashes. And also you can change the colour.
font-size: 12px;
Like we learnt before the font size and again I have gone for 12 PX
padding: 3px;
Padding is the padding between the edges and the text.
width: numberpx;
And the width is the length across 0f the ID
I explained in the tags to make it easier and quicker really.
Now you can use as many ID's as you want and you just select them into the <div id=""></div>
Anyway i'm pretty bored of typing now I think I have explained the minimilistic basics of Cascading Style Sheets. I hope I have gone into enough detail. I can stress this enough it is an introduction to CSS not advanced. I only wrote it as somebody didn't explain well and hopefully this is explained 10 x better.
- Dan