Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.

CSS explained

Started by Michael , Nov 24 2006 01:06 AM

Please log in to reply

#1
Michael

Posted 24 November 2006 - 01:06 AM

Retired Staff

Retired Staff
1,869 posts

Index

Intro
Post 2 – Intoduction
Part One - The Basics
Post 3 – Starting to Code
Post 4 – Property and Values
Post 5 – Adding the CSS to your page
Part Two - The fun stuff
Post 6 – Keeping things inline
Post 7 – Mashing things together - CSS optimization
Post 8 – Picking the parts - CSS selectors
Post 9 – Picking the parts - CSS selectors continued

Edited by Michael, 01 December 2006 - 02:02 AM.

#2
Michael

Posted 24 November 2006 - 09:34 PM

Retired Staff

Topic Starter
Retired Staff
1,869 posts

Intoduction

CSS means Cascading Style Sheets. It is a format for writing Style Sheets that Cascading, meaning that it can put together from several sources with out conflicting. It can be used to add lay out and theming to several types of documents. This tutorial with focus on how it can be used in (X)HTML document. You should have an understanding of (X)HTML before you attempt CSS.

So way bother learning it? For a number of reasons. The first is it makes a lot of sense, you make one file and apply it to your whole site. This create a very easy way of make your site look uniform, making it very easy for visitors to know as they go from one link to another that they are still on your site. Also you can change just one file and the change the look of your whole site. A lot better than trying to change the font size on every single on of you 100,000+ pages. Also if makes to possible to do tableless designs. These don't have all those <tr> and <td> tags every were that have to be downloaded for for every page, it is all on the one file the gets downloaded once, saving you bandwidth and $$$. CSS also removes the need for <font> tags and attributes like bgcolor and alink witch you can't put in HTML 4 strict or XHTML anyway.

CSS information is included in a document four ways.

Inline, that is on an element, that is can (X)HTML tag
Internal, that is n the head of a document.
External, in another file linked to the document.
As the browser default.

Edited by Michael, 01 December 2006 - 01:45 AM.

#3
Michael

Posted 28 November 2006 - 08:00 PM

Retired Staff

Topic Starter
Retired Staff
1,869 posts

Starting to Code

CSS style sheets are written like this

selector {
property : value;
}

Lets break that down. The first part is the selector, it selects what the style rule (the part in the {}) gets applied to. Here are a few examples

body {
property : value;
}
.my_class {
property : value;
}
#my_id {
property : value;
}

The first example would set the rule to apply to the body element.
The second would apply to any element with attribute class="my_class", you can set "my_class" to any value you like.
The third will apply to the element with attribute id="my_id" on it. This is much like the class but there can only be one element with a particular id in any one document.

Edited by Michael, 01 December 2006 - 01:45 AM.

#4
Michael

Posted 30 November 2006 - 06:13 AM

Retired Staff

Topic Starter
Retired Staff
1,869 posts

Property and Values

So want can we put down for property : value;? Well there are almost 100 different things you can put down for property and even more for value. Don't let that put you off, you don't have to memories all of them, and some you might not ever use.

Lets try a few example to see how easy it is.

body {
background-color : black;
}
a {
color : red;
}
p {
text-align : center;
}

Breaking that down we get.
For the first line we have selected the body element. And set the property background-color, and there is absolutely not prize to guessing that is changes the background color, or that the value black make the background black.
Lets try the next line. Here we have chosen to select the a element, or as every one knows it, a link. This one is even more simple that the first. We have the property set as color and the value as red. This will set the text color on the link to red.
The last line changes p, or paragraph tag. This will align all the text to the center, again very simple.

Edited by Michael, 01 December 2006 - 01:45 AM.

#5
Michael

Posted 01 December 2006 - 01:37 AM

Retired Staff

Topic Starter
Retired Staff
1,869 posts

Adding the CSS to your page

Now we need to get the CSS into your html document. Lest start with using an external style sheet, this is what you should use when you want the style sheet applied to the whole site, or at least a group of files. We do this by adding this code between the <head> and </head>

<link rel="stylesheet" type="text/css" href="http://www.example.c...com/style.css">

We are using the <link> tag which surprise surprise links to things. rel="stylesheet" says what you linking to, a stylesheet, type="text/css" says what type of style sheet, a CSS one. And finely href="http://www.example.com/style.css" says were the style sheet is, you will want to change this. You can add as many external style sheets as you want too.

If you only want to add the style sheet to one file, you use an internal style sheet. This is also added between the <head> </head> tags.

<style type="text/css"></style>

Notice I added the comment tags in, this prevents older browsers, of which there are very few around, from displaying the CSS. This is just a good practice, you don't have to do it.

The final way is to add it directly to the element. This follows a slimly different format. You don't add the selector or the {}. It looks like this

<a style="color : red;" .....

No you now how to use it, you might like to look at a CSS Reference like the w3schools one http://www.w3schools...s_reference.asp to see all the rules you can use.

Edited by Michael, 24 February 2007 - 04:13 AM.

#6
Michael

Posted 01 December 2006 - 01:37 AM

Retired Staff

Topic Starter
Retired Staff
1,869 posts

Keeping things inline

Ok we have started writing our CSS and it starting to get big and your forgetting what is what. How in the world are you supposed to keep track of everything? Well it is quite simple, and were going to start with comments. Lets have a look at how it is done.

/* This is a comment */
body {
background-color : black;
}
/* And another, but
this one goes over several line
Cool!! */
a {
color : red;
}

I not saying to add a comment for every line, but it is a good habit to divide your CSS up into sections and give them "titles" such as "header", "content", "footer" and "menu". Your really going to thank youself when you came back to edit a file you wrote a year ago.

Another important thing is to use classes and ides that make sense. Don't give something the id blue_header because it might become a red header. Give it the id of main_header. Again don't give something the class big_text it might become little red text. Give it the class important_text. Call it something that is short and easy to understand no matter what rules are applied to it. But don't go silly with the class or id names the_little_cute_image_down_the_bottom_of_the_page is just as bad as the_image, it might be best to call it my_avatar.

Edited by Michael, 01 December 2006 - 01:46 AM.

#7
Michael

Posted 01 December 2006 - 01:37 AM

Retired Staff

Topic Starter
Retired Staff
1,869 posts

Mashing things together - CSS optimization

Ok so you have started writing and writing and writing and the CSS file is getting very long. This is were CSS optimization comes in. Don't run away, it not going to be very hard, in fact it is very simple to do. You may have even guessed what the first one is.

/* Unoptimized*/
body {
background-color : black;
}
body {
font-size : 1.5em;
}
/* Optimized*/
body {
font-size : 1.5em;
background-color : black;
}

The second example is much better don't you think. You see in CSS ; signals the end of a rule so you can start another one.

I don't think you will have guessed this one, but it still very simple.

/* Unoptimized*/
h1 {
margin : 10px;
}
h2 {
margin : 10px;
}
/* Optimized*/
h1 ,
h2 {
margin : 10px;
}

You can see here both the h1 and h2 headings have the same rule margin : 10px; so we can combine them separating the selector with a ,. You don't have to put them on a separate line, I just like doing so because it is easier to read.

The last way you can optimize you CSS is CSS short hand. Again don't get scared this is very not that difficult. Let go back to our margin on the h1 heading, but this time we want to have a different marginon each side of the heading.

/* Unoptimized*/
h1 {
margin-top : 10px;
margin-right : 15px;
margin-bottom : 10px;
margin-left : 15px;
}
/* Optimized*/
h1 ,
h2 {
margin : 10px 15px 10px 15px;
/* Or even*/
h1 ,
h2 {
margin : 10px 15px;
}

The first optimized example the width of the margin are done in this order top-right-bottom-left, or as you would all know it clock wise. The second optimized example it (bottom-top) (left-right).

At http://www.w3schools...s_reference.asp all shorthand properties are listed as such, I recommend you read it.

Edited by Michael, 01 December 2006 - 01:46 AM.

#8
Michael

Posted 01 December 2006 - 01:37 AM

Retired Staff

Topic Starter
Retired Staff
1,869 posts

Picking the parts - CSS selectors

Ok so we know we can use the elements type (e.g body) id or class to select what we want to style. Ok that great, but I need something a bit more than that. We it your luckily day, there is a lot more you can do. Lets start with a real life example.

Ok so I got hundreds of web pages and they have links all over them, but I only want to apply a style to the links in the menu which has the id of menu. How can I do this with out adding a class to ever link on every web page? The solution is quite simple, and it has the wacky name of the descendant combinator, it looks like this.

#menu a {
border : 1px dotted #990000;
}

You can see what I have done here. First I have selected the menu by using its id, then I have selected a this results in the style sheet finding the menu and searching for any links in it and applying the styles to those elements.

This is very well and good, but is effect all links in the menu, and you have adds in it too, and you don't want them to be effected my the CSS rule. This is when the child combinator comes in to play.

#menu > a {
font-weight : bolder;
}

This is much the same as the previous example, just we have added a > this signals that the element is this case a link, a must be directly inside the menu that we have given the id of #menu.

There is also another CSS selector method, and one that sadly is very rarely ever used because it is not supported by IE.

h2 + p {
font-weight : bolder;
}

This rule would make the first paragraph directly after a h2 heading bold. This would be very useful, but as I said IE does not support it.

Edited by Michael, 01 December 2006 - 01:46 AM.

#9
Michael

Posted 01 December 2006 - 01:37 AM

Retired Staff

Topic Starter
Retired Staff
1,869 posts

Picking the parts - CSS selectors continued

Lets again start with a real live situation and show how you can easily get the result you want with CSS.

Yes say I have some links <a> and some spans <span> that have the class strong. But I want to apply a rule only to the spans, how can this be done? Let me show you.

span.strong {
font-size : 20px;
}

This means that the element must be a span with the class strong exactly what we want. This can also be done with ids but it not really that helpful since ids must be unique in the document. But for completeness sake here it is anyway.

span#strong {
font-color : #fd9850;
}

Another interesting CSS selector is the wild card * this can be used to select anything.

* {
padding : 2px;
}
p * a {
font-weight : 900;
}

The first example here will give every thing a padding of 2px. The second example will select all links inside any element inside a paragraph. Think of this as selecting the grand-child of the paragraph tag, if it is a link.

And that is the end of the CSS selectors selection because all the other interesting selectors I could show you are not supported my IE.

Edited by Michael, 01 December 2006 - 01:46 AM.

#10
Michael

Posted 17 January 2007 - 06:03 AM

Retired Staff

Topic Starter
Retired Staff
1,869 posts

Going the distance - CSS units of distance

Ok so you have started work on you CSS based design, but you see all these px em and even this wacky looking this like #fd9850. What do they mean, how do you use them? Well that is what were going to work out in this segment of the tutorial.

First lets look a units of distance. They are 9. %, in, cm, mm, em, ex, pt, pc, and px.

in, cm, mm, pt and pc are all based of inches or millimeter. You can use these, but it is not recommended. Simply because and inch on one computer does not equal and inch on another. This has to do how they are computed. For example using in (inch) on my computer is more like 1 1/4 inches and 1cm is more like 1.1cm. So don't use these.

So now were left with %, px, em and ex. And you should you these, and know when it is best to use them.

% is makes the element that percentage of the elements with. So for example, if I have a div that is 90px wide, and I set another div that is in to a width of 60% it will be 54px wide. This is best used to make flexible layouts. Such as setting you menu to a with of 20% and you content to a with of 80%.

px is equal to one dot on your screen. This one most likely, the measurement you will use the most. To set borders, widths, heights, padding, margin etc. This is so because you know that the with will be followed rigidly on every computer. But remember not everyone has a 1280 x 1024 screen. You can't make your site fixed at a too wide a width.

em is an extremely useful measurement. It is equal to the height of the font the user is using. This is normally about 16px. Some times the person viewing your site will make the font larger. I spend a lot of time reading web pages, and don't like squinting at small text. So you can make everything size up when I change the size of the font by using ems. It is a good idea to use this as much as you can. Unfortunately it is not quite as straight forward as using px so I not used as much as it should be.

ex is a unit that is very rarely used. You could spend a year leaning CSS and never know it existed. It is equal it about half an em. A more technical definition is it is equal to the hight of characters like c and s as apposed to h or y.