Perad
11th January 2006, 04:49 AM
Firstly even though I am English my grammer isn’t great so please PM if you see any glaring errors.
The idea behind this tutorial is to give you a basic knowledge of everything then go into more depth.
Before you begin, please check out XHTML, CSS works best with XHTML strict :)
Please PM any parts which you think are unclear, this is a draft and while I have tried hard to be clear there may be parts which I have just run through without explaining.
Part 1-Draft
The aim of part 1 is not to teach you tags but more to give you an idea of what is going on with CSS as a whole.
What is Cascading Style Sheets (CSS)
In short it’s a language used to specify the appearance of text and other elements in a webpage. HTML builds the webpage, it creates the content and puts images on the page. CSS then formats the content, it makes the text a certain font, size and style. It also formats the picture and puts it in a certain place on the page.
It is also used to make html code more tidier. If you format your page using html code alone it becomes very messy and very hard to edit. With CSS the only thing the html will display is the content.
The final thing that CSS helps with is web standards, web standards are important because browsers are supposed to comply with them. It means you have a much higher chance of your web page being compatitble on multiple browsers and devices. At the moment the current web standards are leaning towards CSS, many html formatting tags are being phased out, so in all honestly CSS is the way to go.
Finally you don't need any special editors to create CSS, all you need is a simple program like notepad.
www.jasonstanley.co.uk/gua/example1
How CSS works
Firstly you will need to link a html page to a Style Sheet. This is very easy and there are several methods of doing it. The first and most common method is linking to an external style sheet.
Its very simple, in the head of your document insert this line of code.
<link href="example.css" rel="stylesheet" type="text/css" />
This is in most cases the best way to insert styles to your webpage. The benefit of this is that you are now able to insert this line on all of your pages and format them all in one go. It also keeps things simple, you know where your formatting is.
Also if you want to change your whole site you can just insert a Style sheet and poof your done.
This method will be used in most of the tutorial.
The second method is inserting a style sheet into the html code. In your head just insert this...
<style type="text/css">
/* CONTENT HERE */
</style>
The only real advantage of this is if you don't have much to style and what you do have is only on one page. If you are going to make a big style sheet then i recommend that you make an external style sheet as mentioned above.
The final bit is inline styles, this is much like your html formatting and makes your code very messy.
<p style="font-size:25px"> text </p>
When you use this you will want to format more than just the text size and what you will end up with is a mess. Don't forget, CSS is there to make things easier, by inserting it directly into your html you are losing one of the key benefits of using it. I see no reason why you should ever need to use this so its best avoided.
_________________________
CSS works by applying a style to a specified tag. This is probably best shown in the above example.
Above we have the HTML code
<body>
<p>Text with some CSS styles applied</p>
<strong>unstyled text</strong>
</body>
Then the CSS
p {
border:solid 5px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:18px;
background-color:#FFFF00;
padding:20px;
margin:20px;
}
As you can see, the style has been applied to the paragraph <p> tag because p was specified in the CSS code. The strong tag wasn’t specified so it has just done what it is supposed to and made the text bold. If I inserted another paragraph after strong, you will see that the style is automatically applied.
<body>
<p>Text with some CSS styles applied</p>
<strong>unstyled text</strong>
<p>Text with some CSS styles applied</p>
</body>
www.jasonstanley.co.uk/gua/example2
The way CSS can pick out each element is what makes it such a powerful tool to design with.
Targeting
3) Basically you have a few ways of targetting:
Tags within other tags
This is where you have for example: <ul><li><a>link</a></li></ul> (hoping the way I laid those out will help. As you can see a is withing li and li is within ul. So if we want to target the li element we use:
ul li { }
ul begins it aiming the CSS at ul, then we see li, and that changes the target to any li within a ul. We can target the a element in the same way:
ul li a { }
Classes and ID's
These are more specific measures. Using the same list type with some more links we could have something like this:
<ul>
<li>
<a href="link.html title="description" class="link first">Link</a>
<a href="link.html title="description" class="link">Link</a>
<a href="link.html title="description" class="link">Link</a>
</li>
</ul>
<ul id="second">
<li>
<a href="link.html title="description">Link</a>
</li>
</ul>
Now in this example you can see how there are class="" and id="" bits attatched to the elements, this gives us the name for our CSS classes. A CSS class can be specified in two ways, either a full-stop "." and then the class name e.g. ".class { }" or you can make it more specific by adding the elements tag name before it like so: "a.class". In this example we could have CSS like this:
ul {
margin: 0;
padding: 0;
}
ul#first {
margin: 5px;
}
a {
background-color: inherit;
color: #f00;
}
a.link {
background-color: inherit;
color: #00f;
}
a.first {
text-decoration: none;
}
That may look horrendous, but it's fairly simple. All <ul> elements are set to have no margin or border, then for the <ul> (there can only be one ID element on the page, more causes an error) which is ID="second" it's margin becomes 5px, overriding the generall tag CSS.
The styles are similar, links are made red, then those with class="link" are made blue. Also a useful feature of classes is that we can combine them as we wish, so class="link first" (note the space) is both blue from .link and has no underline from .first.
The div tag <div> This is essentially a way to group things
www.jasonstanley.co.uk/gua/example3
Now you think this is a bad link, but its not. See it styled now.
www.jasonstanley.co.uk/gua/example3-1
<body>
<div id="main">
<p>Text with some CSS styles applied</p>
<strong>unstyled text</strong>
<p>Here is some more text</p>
</div>
<p>Text with some CSS styles applied</p>
<strong>unstyled text</strong>
<p>Here is some more text</p>
</body>
p {
border:solid 5px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:18px;
background-color:#FFFF00;
padding:20px;
margin:20px;
}
#main {
background-color:#3333CC;
border:solid 5px;
}
#main p {
background-color:#000000;
color:#FFFFFF;
}
#main simply specifies the div.
#main p specifies the <p> tag in the div.
Note: There are two forms of div tags, div id and class, essentially they both do the same thing, the only main difference is you can only use the id attribute once on each page.
Why use a div?
www.jasonstanley.co.uk/gua/example3-2
Divs are very good for positioning which is the next topic.
Positioning
There are several key concepts here, you must understand them all before we continue. The first key concept is the box model.
http://www.jasonstanley.co.uk/gua/boxmodel.jpg
This is the first key concept. You have to understand this before you continue.
CSS doesn’t treat the text in a <p> tag as just text… its actually a box.
http://www.jasonstanley.co.uk/gua/example4
Here I have switched on the border and coloured the background.
As you can see, the <p> tag is a box. Now to add padding to the box…
http://www.jasonstanley.co.uk/gua/example4-1
Here you can see that the text has been brought off the border.
The margin…
http://www.jasonstanley.co.uk/gua/example4-2
At some point you will need to use all of these. There are a few things to bear in mind with the box model
> Page width – The total width of an object is margin + padding + border(on both sides) + content. You need to remember this. If you are trying to make a page 800x600px, this will come in important. (As I have found out several times)
> With margins, margins are collapsible, if you have 2 elements, one with a top margin of 20 and one with a bottom margin of 30 the game between them will be 30. They do not add up.
> If you are trying to get an exact width on a page always remember to count the border twice
Absolute, Relative and Fixed positioning
Relative positioning is the easiest to understand, it is the position relative to other elements. Lets have a quick look at it.
http://www.jasonstanley.co.uk/gua/example4-3
position:relative;
top:50px;
left: 100px;
Here you can see the second paragraph is 50px down from the above element which stays in position. Its also 100px from the edge of the page as there is no element to its left. All the other paragraphs have stayed in position
Absolute positioning is where things get a bit more interesting, by using this you are actually removing the element out of the page flow and placing it else where.
www.jasonstanley.co.uk/gua/example4-4
position:absolute;
top:300px;
left: 250px;
Do you see what has happened here? I have moved the second element down and fixed it so the top left corner is 300px from the top and 250px from the left. The third element has automatically moved up to fill the gap in which the second paragraph was sitting.
Fixed positioning is like absolute but it effectively bolts a paragraph to the screen, the only use it has is with menu’s and keeping them on the sides of the screen as you scroll down.
http://www.jasonstanley.co.uk/gua/example4-5
position:fixed;
top:300px;
left: 250px;
As you can see, its uses are limited but there will be times when this becomes useful.
__________________________________________________ ___
If i do anymore today i will kill myself, i am already eyeing my network lol.
In Part 2 we will put all this into action and make a site in which to house this tutorial. In part 3 it will go on to more complex things.
I have covered the very basics here, if i lost you then please post and i will do my very best to help you. In the next part we will attempt to apply a style sheet to a page and build it up step by step. We will also cover several important things like float's.
The idea behind this tutorial is to give you a basic knowledge of everything then go into more depth.
Before you begin, please check out XHTML, CSS works best with XHTML strict :)
Please PM any parts which you think are unclear, this is a draft and while I have tried hard to be clear there may be parts which I have just run through without explaining.
Part 1-Draft
The aim of part 1 is not to teach you tags but more to give you an idea of what is going on with CSS as a whole.
What is Cascading Style Sheets (CSS)
In short it’s a language used to specify the appearance of text and other elements in a webpage. HTML builds the webpage, it creates the content and puts images on the page. CSS then formats the content, it makes the text a certain font, size and style. It also formats the picture and puts it in a certain place on the page.
It is also used to make html code more tidier. If you format your page using html code alone it becomes very messy and very hard to edit. With CSS the only thing the html will display is the content.
The final thing that CSS helps with is web standards, web standards are important because browsers are supposed to comply with them. It means you have a much higher chance of your web page being compatitble on multiple browsers and devices. At the moment the current web standards are leaning towards CSS, many html formatting tags are being phased out, so in all honestly CSS is the way to go.
Finally you don't need any special editors to create CSS, all you need is a simple program like notepad.
www.jasonstanley.co.uk/gua/example1
How CSS works
Firstly you will need to link a html page to a Style Sheet. This is very easy and there are several methods of doing it. The first and most common method is linking to an external style sheet.
Its very simple, in the head of your document insert this line of code.
<link href="example.css" rel="stylesheet" type="text/css" />
This is in most cases the best way to insert styles to your webpage. The benefit of this is that you are now able to insert this line on all of your pages and format them all in one go. It also keeps things simple, you know where your formatting is.
Also if you want to change your whole site you can just insert a Style sheet and poof your done.
This method will be used in most of the tutorial.
The second method is inserting a style sheet into the html code. In your head just insert this...
<style type="text/css">
/* CONTENT HERE */
</style>
The only real advantage of this is if you don't have much to style and what you do have is only on one page. If you are going to make a big style sheet then i recommend that you make an external style sheet as mentioned above.
The final bit is inline styles, this is much like your html formatting and makes your code very messy.
<p style="font-size:25px"> text </p>
When you use this you will want to format more than just the text size and what you will end up with is a mess. Don't forget, CSS is there to make things easier, by inserting it directly into your html you are losing one of the key benefits of using it. I see no reason why you should ever need to use this so its best avoided.
_________________________
CSS works by applying a style to a specified tag. This is probably best shown in the above example.
Above we have the HTML code
<body>
<p>Text with some CSS styles applied</p>
<strong>unstyled text</strong>
</body>
Then the CSS
p {
border:solid 5px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:18px;
background-color:#FFFF00;
padding:20px;
margin:20px;
}
As you can see, the style has been applied to the paragraph <p> tag because p was specified in the CSS code. The strong tag wasn’t specified so it has just done what it is supposed to and made the text bold. If I inserted another paragraph after strong, you will see that the style is automatically applied.
<body>
<p>Text with some CSS styles applied</p>
<strong>unstyled text</strong>
<p>Text with some CSS styles applied</p>
</body>
www.jasonstanley.co.uk/gua/example2
The way CSS can pick out each element is what makes it such a powerful tool to design with.
Targeting
3) Basically you have a few ways of targetting:
Tags within other tags
This is where you have for example: <ul><li><a>link</a></li></ul> (hoping the way I laid those out will help. As you can see a is withing li and li is within ul. So if we want to target the li element we use:
ul li { }
ul begins it aiming the CSS at ul, then we see li, and that changes the target to any li within a ul. We can target the a element in the same way:
ul li a { }
Classes and ID's
These are more specific measures. Using the same list type with some more links we could have something like this:
<ul>
<li>
<a href="link.html title="description" class="link first">Link</a>
<a href="link.html title="description" class="link">Link</a>
<a href="link.html title="description" class="link">Link</a>
</li>
</ul>
<ul id="second">
<li>
<a href="link.html title="description">Link</a>
</li>
</ul>
Now in this example you can see how there are class="" and id="" bits attatched to the elements, this gives us the name for our CSS classes. A CSS class can be specified in two ways, either a full-stop "." and then the class name e.g. ".class { }" or you can make it more specific by adding the elements tag name before it like so: "a.class". In this example we could have CSS like this:
ul {
margin: 0;
padding: 0;
}
ul#first {
margin: 5px;
}
a {
background-color: inherit;
color: #f00;
}
a.link {
background-color: inherit;
color: #00f;
}
a.first {
text-decoration: none;
}
That may look horrendous, but it's fairly simple. All <ul> elements are set to have no margin or border, then for the <ul> (there can only be one ID element on the page, more causes an error) which is ID="second" it's margin becomes 5px, overriding the generall tag CSS.
The styles are similar, links are made red, then those with class="link" are made blue. Also a useful feature of classes is that we can combine them as we wish, so class="link first" (note the space) is both blue from .link and has no underline from .first.
The div tag <div> This is essentially a way to group things
www.jasonstanley.co.uk/gua/example3
Now you think this is a bad link, but its not. See it styled now.
www.jasonstanley.co.uk/gua/example3-1
<body>
<div id="main">
<p>Text with some CSS styles applied</p>
<strong>unstyled text</strong>
<p>Here is some more text</p>
</div>
<p>Text with some CSS styles applied</p>
<strong>unstyled text</strong>
<p>Here is some more text</p>
</body>
p {
border:solid 5px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:18px;
background-color:#FFFF00;
padding:20px;
margin:20px;
}
#main {
background-color:#3333CC;
border:solid 5px;
}
#main p {
background-color:#000000;
color:#FFFFFF;
}
#main simply specifies the div.
#main p specifies the <p> tag in the div.
Note: There are two forms of div tags, div id and class, essentially they both do the same thing, the only main difference is you can only use the id attribute once on each page.
Why use a div?
www.jasonstanley.co.uk/gua/example3-2
Divs are very good for positioning which is the next topic.
Positioning
There are several key concepts here, you must understand them all before we continue. The first key concept is the box model.
http://www.jasonstanley.co.uk/gua/boxmodel.jpg
This is the first key concept. You have to understand this before you continue.
CSS doesn’t treat the text in a <p> tag as just text… its actually a box.
http://www.jasonstanley.co.uk/gua/example4
Here I have switched on the border and coloured the background.
As you can see, the <p> tag is a box. Now to add padding to the box…
http://www.jasonstanley.co.uk/gua/example4-1
Here you can see that the text has been brought off the border.
The margin…
http://www.jasonstanley.co.uk/gua/example4-2
At some point you will need to use all of these. There are a few things to bear in mind with the box model
> Page width – The total width of an object is margin + padding + border(on both sides) + content. You need to remember this. If you are trying to make a page 800x600px, this will come in important. (As I have found out several times)
> With margins, margins are collapsible, if you have 2 elements, one with a top margin of 20 and one with a bottom margin of 30 the game between them will be 30. They do not add up.
> If you are trying to get an exact width on a page always remember to count the border twice
Absolute, Relative and Fixed positioning
Relative positioning is the easiest to understand, it is the position relative to other elements. Lets have a quick look at it.
http://www.jasonstanley.co.uk/gua/example4-3
position:relative;
top:50px;
left: 100px;
Here you can see the second paragraph is 50px down from the above element which stays in position. Its also 100px from the edge of the page as there is no element to its left. All the other paragraphs have stayed in position
Absolute positioning is where things get a bit more interesting, by using this you are actually removing the element out of the page flow and placing it else where.
www.jasonstanley.co.uk/gua/example4-4
position:absolute;
top:300px;
left: 250px;
Do you see what has happened here? I have moved the second element down and fixed it so the top left corner is 300px from the top and 250px from the left. The third element has automatically moved up to fill the gap in which the second paragraph was sitting.
Fixed positioning is like absolute but it effectively bolts a paragraph to the screen, the only use it has is with menu’s and keeping them on the sides of the screen as you scroll down.
http://www.jasonstanley.co.uk/gua/example4-5
position:fixed;
top:300px;
left: 250px;
As you can see, its uses are limited but there will be times when this becomes useful.
__________________________________________________ ___
If i do anymore today i will kill myself, i am already eyeing my network lol.
In Part 2 we will put all this into action and make a site in which to house this tutorial. In part 3 it will go on to more complex things.
I have covered the very basics here, if i lost you then please post and i will do my very best to help you. In the next part we will attempt to apply a style sheet to a page and build it up step by step. We will also cover several important things like float's.