Beginners Guide to CSS
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.
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).
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_sample{
color:#333333;
}
In the example I called my class text_sample. 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:
<p class="text_one">Text Here</p>
<p class="text_two">Text Here</p>
(Please note, you have to close the p tags, for some reason wordpress wont display them)
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!
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 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 :
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_sample{
color:#333333;
}
In the example I called my class text_sample. 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:
<p class="text_one">Text Here</p>
<p class="text_two">Text Here</p>
(Please note, you have to close the p tags, for some reason wordpress wont display them)
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 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 :
Comment Form under post in blogger/blogspot