In this guide I’ll be going through how to start out learning CSS. Hopefully by the end of this tutorial you will be much more comfortable using CSS to code websites.
CSS or cascading style sheets are used to style html or xhtml documents. The idea behind CSS is to allow you to dramatically change how a webpage looks without editing any HTML. CSS is normally stored in an external css file, this means that you can change how hundreds of pages look by changing some code in a single CSS file. It is a good idea if you have some experience with html or xhtml before you do this tutorial.
The Syntax
First of all I’ll demonstrate what the CSS syntax should look like:
selector{property:value;}
An example of some working CSS syntax is:
html{color:#333333;}
This would make the font colour of everything in the <html> </html> tags #333333.
You can define multiple properties for one selector as long as you seperate them with a semicolon (;). For example:
html{color:#333333;background-color:#cccccc;}
This would give the page a light grey (#cccccc) background with dark grey text (#333333).
The Selectors
There are three main types of selectors, the first type are the selectors that correspond to html elements such as body, p, li etc. Here’s an example of the p selector at work:
p{color:#333333;}
That would change the text colour of everything inside the <p> </p> tags on your web page.
Next we have classes. A class will allow you to name sets of styles, this means you can have two paragraphs that are styled differently in a single page. A class selector looks like:
.text_one{color:#333333;}
In the example I called my class text_one. You must always put the full stop before the name of the class as this tells your browser what you’re defining. Classes can come in useful when you want to style a number of elements differently. For example I might have two paragraphs, one that has dark grey text and one that has light grey text. My CSS would look like:
.text_one{color:#333333;}.text_two{color:#cccccc;}
I would then apply the classes to my elements by using this code:
<p class="text_one">Text Here</p> <p class="text_two">Text Here</p>
The great thing about classes is that you can use the same class as many times as you want in an html document. That brings us on to the final selector an ID.
I use ID’s to define the main parts of a layout, for example if a page has a wrapper div I would make that an ID. The other important thing to remember about an ID is that it should only appear on an html page once. To define an id simply use:
#divname{selector:value;}
Then to use it in your html document you would use the code:
#divname{selector:class;}
And that’s it for selectors!
Style Sheets
There are two ways of including a css in your pages. The first way is internally, you would do this by using the code:
<style type="text/css"> CSS Code Goes Here </style>
The reason I don’t recommend using internal styles is because the whole point behind style sheets is to keep the styling and the actual html of the page separate and using internal style sheets would be defeating the object.
The next method of including css into your html is to use external style sheets. This consists of creating a file, which is normally called something like style.css and then including it inbetween the <head></head> tags in your html file. The code for including a css file is:
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
Obviously you would replace “style.css” for the path and name of your css stylesheet.
That’s just about everything you need to know when you’re first starting out with CSS! My advice to you now is to sit down and practice what you’ve learned here. I’ll be adding some more tutorials soon so keep checking back!
If you like this site you could always sign up for my rss feed and if you’re feeling generous you could buy me a pint using that button on the top right of every page :D
7 Comments
Nice tutorial.
However, I think readability will be better if you added some line-breaks to the CSS rules. Having everything on one line makes it harder to read. Especially when you got multiple rules.
great start :)
I agree with Thomas though add some line breaks into that CSS. It will help new starters to CSS as new rules will have their own space, and be easier to understand :)
Good luck with this, I look forward to see where it goes too next
When I wrote it I did put each selector on a new line, it seems wordpress removes it when I save the code.
I’ll have a look into ways of making it display properly, thanks for pointing this out.
very nice tutorial for beginners thankz for writing :)
I studied the css tutorial and I really learned a lot. I think my next homepage will be a lot better than my first one.
Thank you so much.Good tutorial
.-= burak´s last blog ..Warez nedir?Seo da önemi =-.
Have been looking at doing some site optimization and bettering the web design on my website for a while, so this post has been really helpful. Clear read as well, so thank you!
3 Trackbacks
[...] To visit: http://jamesowers.co.uk/css-tutorials/14/beginners-guide-to-css/ [...]
[...] View Tutorial [...]
[...] View Tutorial No Comment var addthis_pub=”izwan00″; BOOKMARK This entry was posted on Tuesday, June 9th, 2009 at 8:10 am and is filed under Css Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. [...]