PDA

View Full Version : The Ultimate CSS tuturial



Perad
11th January 2006, 05: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.

Perad
11th January 2006, 09:17 AM
reserved

iwishiknew
11th January 2006, 02:03 PM
Nice and thanks for making it, however I do have some questions.

1) What does CSS stand for? (I know but you didn't list it in the tutorial) Command Style Sheet

2) How come the CSS stuff isn't in the page source? (you simple have it linked to a specific file on the host)

3) Could you better clearify the whole of the targetting section?

PsychoticDude85
11th January 2006, 06:44 PM
1) CSS stands for Cascading Style Sheet

2) You can either run CSS with:


<style type="text/css">
/* CONTENT HERE */
</style>
Or you can do the easier method of using:


<link rel="stylesheet" type="text/css" href="./style.css" media="screen" />
The latter caches the .css document meaning you have a faster loading time for your pages overall. You can also use CDATA or @import, but I am covering the simpler ways first and foremost.

NOTE: Both must be placed in the <head></head> of the document btw.

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.

Comments:


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.
As mentioned above, that is not the only difference you can combine class as much as you wish.


font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:18px;
background-color:#FFFF00;
Also that would be better served as this:


font: 18px Verdana, Arial, Helvetica, sans-serif;
background-color: #ff0;
color: #000;
I optimised font for you and when you specify a bgcolour you must also specify text colour and vica versa, it's a warning not an error, but I always conform to optimised no warnings or errors as it's a far better practice.

iwishiknew
11th January 2006, 08:13 PM
1) CSS stands for Cascading Style SheetOk so I learned it as Command instead of Cascading


2) You can either run CSS with: I know that, other people might not.

The rest makes more since, but what does <ul> and <li> commands do?

PsychoticDude85
11th January 2006, 08:21 PM
Definately Cascading Style Sheets (http://www.w3.org/Style/CSS/)

<ul> is an unordered list.
<li> is a list item.

You should really check the reference (http://www.w3schools.com/tags/default.asp) first though :P it does have both.

Perad
12th January 2006, 06:56 AM
2) How come the CSS stuff isn't in the page source? (you simple have it linked to a specific file on the host)

Its not the page source because part 1 is more about the basics, the rules governing CSS. Part 2 will show how to put it all into action. As well as explaining what the tags are.

3) Could you better clearify the whole of the targetting section?

Sure i will re write that later.

Also PsychoticDude85 thanks for writing the part about how to link CSS to HTML, i realised it last nigth when i was looking at it on my comp had missed it and was going to write it today.

If you don't mind could i will put some of what you have written into my post to give it some sort of order.

H2SO4
12th January 2006, 03:27 PM
What is CSS
In short it’s a standard used to specify the appearance of text and other elements in a webpage.

It allows you to create an external file which will apply a consistent style across several webpages without having to hand code every element in every

No mention of inline styles or embedded styles just external style sheets? It's not the "ultimate" unles you at least mention them.

Also a simple "No special editor is required for CSS as like HTML, external style sheets can be written in notepad and saved with the .css extention" while obvious to you and me would also better orientate a beginner.

Perad
12th January 2006, 03:53 PM
well it does say draft, its a work in progress, i will add them :)

H2SO4
12th January 2006, 03:58 PM
I didn't mean to sound too critical, but I think you could lead them in a bit more gently to the heavy stuff. As it is it feels like being thrown in at the deep end, or that's the impression I get.

PsychoticDude85
12th January 2006, 05:48 PM
Use as much as you want, I'm not bothered.

If you are a newbie at CSS then I recommend TopStyle Lite (http://www.bradsoft.com/topstyle/index.asp) or the full if you want to commit. It has automatic formatting, you can restrict the smart tags to CSS 1, 2 or 3. It has syntax highlighting etc etc.