CSS Tutorial

**Mag1c** · #1 (**permalink**) 07-07-2007, 05:00 AM

CSS Tutorial
EDITED FOR ALL WHO ARE TO LAZY TO CLICK THE LINK

I input the introduction, as the three parts were to long to add in... so you will just have to click the link for the actual tutorial still, but here is an intro.

Enjoy

Introduction to CSS
CSS is the acronym for: ‘Cascading Style Sheets’. CSS is an extension to basic HTML that allows you to style your web pages.
An example of a style change would be to make words bold. In standard HTML you would use the <b> tag like so:

<b>make me bold</b>

This works fine, and there is nothing wrong with it per se, except that now if you wanted to say change all your text that you initially made bold to underlined, you would have to go to every spot in the page and change the tag.
Another disadvantage can be found in this example: say you wanted to make the above text bold, make the font style Verdanna and change its color to red, you would need a lot of code wrapped around the text:

<font color="#FF0000" face="Verdana, Arial, Helvetica, sans-serif"><strong>This is text</strong></font>

This is verbose and contributes to making you HTML messy. With CSS, you can create a custom style elsewhere and set all its properties, give it a unique name and then ‘tag’ your HTML to apply these stylistic properties:

<p class="myNewStyle">My CSS styled text</p>

And in between the <head></head> tags at the top of your web page you would insert this CSS code that defines the style we just applied:

In the above example we include the style sheet code inline, or in other words, in the page itself. This is fine for smaller projects or in situations where the styles you’re defining will only be used in a single page. There are many times when you will be applying your styles to many pages and it would be a hassle to have to copy and paste your CSS code into each page.
Besides the fact that you will be cluttering up your pages with the same CSS code, you also find yourself having to edit each of these pages if you want to make a style change. Like with JavaScript, you can define/create your CSS styles in a separate file and then link it to the page you want to apply the code to:
<link href="myFirstStyleSheet.css" rel="stylesheet" type="text/css">

The above line of code links your external style sheet called ‘myFirstStyleSheet.css’ to the HTML document. You place this code in between the <head> </head> tags in your web page.

HOW TO CREATE A LINKED EXTERNAL STYLE SHEET

To create an external style sheet all you need to do is create a simple text document (on windows you simply right-click and select new -> text document) and then change the file from type .txt to .css.

You can change the file type by just changing the files' extension. The files' extension on windows tells the computer what kind of file it is and allows the computer to determine how to handle the file when for example you try to open it.

You probably guessed it; CSS files are just specially formatted text files, and much in the same way HTML pages are. There is nothing special or different in the file itself, rather it is the contents of the file that make an HTML document and a CSS page what they are.

When working with a external CSS document, there are a couple of points to remember:

1. You don’t add these tags in the CSS page itself as you would if you embedded the CSS code in your HTML:

<style type="text/css">

</style>

Since the CSS link in your web page says that you are linking to a CSS page, you don’t need to declare (in the external CSS file) that the code in the CSS page is CSS. That is what the above tags do. Instead you would just add your CSS code directly to the page like so:

.myNewStyle **
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF0000;
}

.my2ndNewStyle **
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF0000;
}

.my3rdNewStyle **
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12pt;
color: #FF0000;
}

In the above example I have created a series CSS classes that can be applied to any HTML tag like so:

<p class="myNewStyle">My CSS styled text</p>

or

<h2 class=”my3rdNewStyle”>My CSS styled text</h2>

You will notice that in the above example I applied a CSS style to a <h2> tag. Normally this tag sets the size of the text that it wraps to a size that is preset in the browser (ex: 10 pixels).

When you apply a CSS class to it, the CSS code overrides the default size that you would normally get with an <h2> tag in favor of the size specified in the CSS class. So now you can see that CSS can override default HTML tag behavior!

In the above examples, I have CSS code where I define my CSS classes and then ‘apply’ them to various elements in the page. Another way to apply CSS is to globally redefine an HTML tag to look a certain way:

h1 ** font-family: Garamond, "Times New Roman", serif; font-size: 200%; }

What this CSS code does is set the font style and size of all <h1> tags in one shot. Now you don’t have to apply a CSS class as we did before to any <h1> tags since they are automatically all affected by the CSS style rules.

Here is another example of where I give the whole page bigger margins:

body ** margin-left: 15%; margin-right: 15%; }

As you can see, you can redefine any tag and change the way it looks! This can be very powerful:

div **
background: rgb(204,204,255);
padding: 0.5em;
border: 1px solid #000000;
}

The above CSS code sets that any <div></div> tag will now have a background color of ‘rgb(204,204,255)’ and have a padding of 0.5em and a thin 1 pixel border that is solid black.

A few things to explain about the above:

Color in CSS can be expressed in a few ways:

1. In Hex -> for example: #000000 – this is black and this: #FF0000 is red.
2. In rgb -> rgb(204,204,255) is a light purple blue color.
3. With named colors like: ‘red’ or ‘blue’

I typically use hex color since I am familiar with them or I just use named colors. So the last example can be rewritten like so:

div **
background: green;
padding: 0.5em;
border: 1px solid #FF0000;
}

So instead of ‘rgb(204,204,255)’ , I just specified ‘green’.

By using RGB (RGB is the acronym for: ‘Red Green Blue’) and Hex color, you can really get the exact color you want easily when you know your codes. Luckily many programs (like Dreamweaver) provide easy to use color pickers for you so you don’t need to know the values for the code.

In this last example I will show you the ‘super cool’ CSS code that allows you to create link roll-over affects without images:

a:link ** color: rgb(0, 0, 153) }
a:visited ** color: rgb(153, 0, 153) }
a:hover ** color: rgb(0, 96, 255) }
a:active ** color: rgb(255, 0, 102) }

The above CSS will cause your links to change color when someone hovers their mouse pointer over it, instant rollovers with no images! One important note with the above code is that it is important that the style declarations be in the right order: "link-visited-hover-active", otherwise it may break it in some browsers.

CSS is very powerful and allows you to do things that you can’t do with standard HTML. It is supported nicely now in all the modern browsers and is a must learn tool for web designers. The above examples are just a small sample of what you can do with CSS, but it should be more than enough for you to start styling your pages nicely. Like with many technologies CSS has a lot of capability that most people will not need to use often if at all. Don’t get caught in the trap of thinking that if there is some functionality/feature available that you have to use it.

BTW: The killersites forum has a great feature that allows you to do some pretty powerful searches against what was discussed.

For example if you type ‘CSS’ in the search box you will get a list of all the post regarding CSS. This feature will make the forum archive a great source of information

everyone looking for a good base in css, here ya go! your welcome.

thanks appreciated lol:D

**thoma** · #2 (**permalink**) 07-07-2007, 05:31 AM

thanks for the link, im sure it will come in handy. dont know much about css, but need to

**Mag1c** · #3 (**permalink**) 07-07-2007, 05:35 AM

yeah its really worth learning... especially if u like messing around with code and java... or computers in general

your welcome! glad i could help

foerunners · #4 (**permalink**) 07-09-2007, 06:05 AM

css is pretty easy, but then again Mag1c taught me. This tutorial is very easy to follow. Great post.

**.lg.GambleR** · #5 (**permalink**) 07-13-2007, 07:26 PM

how about you actually post the tutorial so we can read it straight off of here..........................

or at least edit your post

Luke · #6 (**permalink**) 07-16-2007, 10:31 AM

cheers man, been looking for some CSS tutorials cus im sick of html tags lol. ty

kodiak · #7 (**permalink**) 07-18-2007, 02:03 AM

Also if i may contribute to this this? Along with Learning CSS it's also a good idea to learn about the browser hack for IE. Internet Explorer doesn't and probably will never be able to handle complex CSS layouts and code. ( speaking in a cross-browser perspective) so your going to have to learn wy to counter this problem... I have include a google link for your benifit css hack for IE - Google Search. check it out and ill search for more stuff to help out.

Nerve · #8 (**permalink**) 07-23-2007, 02:46 PM

Just to let you know:

<font color="#FF0000" face="Verdana, Arial, Helvetica, sans-serif"><strong>This is text</strong></font>

and <b>text</b>

Is NOT CSS. It is "HTML".

alexeo · #9 (**permalink**) 10-29-2008, 11:46 PM

thanks for the introduction to css!

celebrus · #10 (**permalink**) 10-30-2008, 04:55 PM

Quote:

Originally Posted by kodiak

Also if i may contribute to this this? Along with Learning CSS it's also a good idea to learn about the browser hack for IE. Internet Explorer doesn't and probably will never be able to handle complex CSS layouts and code. ( speaking in a cross-browser perspective) so your going to have to learn wy to counter this problem... I have include a google link for your benifit css hack for IE - Google Search. check it out and ill search for more stuff to help out.

CSS hacks = evil.

You never know when they could turn around and punch you. The only CSS hack I ever used and think should be used is the one that makes IE6 support PNG transparency. It makes much more sense to make alternate stylesheets.

The IE conditional comments are the best thing Microsoft ever did.

And yeah,
10 Principles of the CSS Masters - NETTUTS
Digital Web Magazine - Keep CSS Simple