CSS Tutorial - Beginners

Zaltan · 16-04-2005, 01:18

CSS for Beginners

This CSS tutorial is aimed at people who already have a decent knowledge of HTML, and want to begin to learn CSS (Cascading Style Sheets). If you do not currently know a great deal of HTML, I would advise searching for some tutorials on these forums, or you can begin at W3Schools.

1. What is CSS? What does it do?

CSS is an acronym for Cascading Style Sheets. These 'sheets' are implemented into HTML pages and provide an easier, more efficient and more powerful way of displaying information, using complex and more customizeable layouts, and also providing a semi-interactive basis, of which can be manipulated further with JavaScript (otherwise known as DHTML (Dynamic HTML)). The following tutorial will be based around the first two of these: display and layout.

When first starting with CSS, many people can get confused about how it is used - such as thinking that they can create a webpage only with CSS, but you can't. I guess the best way to think of CSS is that it is a 'modification' of HTML, which can be inserted into already-created HTML pages to completely change the layout.

A good example of how CSS styles are used is the CSS Zen Garden. This site uses the same HTML in all versions of it, but the CSS file location is changed. See the CSS Zen Garden for yourself, if you want, and have a little play around with the different CSS files, and look at the effects. Also note that this site doesn't use tables (HTML tag: <table>), but CSS divisions and spans (HTML tags: <div> and <span> respectively) instead.

There are two basic ways to insert CSS into an HTML page (there is also another one, which I will explain later). The first way is to insert it directly into the page, within the header (HTML tag: <head>):

HTML Code:

<style type="text/css">
<!-- CSS goes here. -->
</style>

The second method is to import it directly from a CSS file (*.css), like this:

HTML Code:

<style type="text/css" src="http://www.yoursite.com/directory/cssfile.css" />

Now that you know a little about what CSS is and what it does, lets move on to some actual coding...

2. CSS Syntax

The syntax for CSS is relatively simple and universal (although certain browsers do not support some CSS attributes or elements). The most basic CSS style would look like this:

Code:

element {attribute: value;}

Where:

'element' can be a HTML tag (e.g. body), a class (e.g. .classname), an ID (e.g. #id) or otherwise.
'attribute' can be any available CSS attribute (e.g. color).
'value' can be an available CSS value (or values) for the attribute it is assigned to (e.g. black).

For a detailed list on available CSS attributes and values, see the HTMLDog CSS Reference.

To specify multiple attributes for a single element, rather than repeating the above code many times, you can do this:

Code:

element {
attribute1: value1;
attribute2: value2 value2a value2b;
attribute3: value3;
}

The line-breaks and indents aren't necessary, but they make it much more readable, in case you want to edit your CSS.

3. Basic CSS

Now, let's get ready for some actual CSS examples...

Example 1
For our first example, we want to modify all text within a paragraph (HTML tag: <p>). To do this, we make the element "p", which means that we want to apply the following CSS attributes to every paragraph in the HTML, and we want to set the colour of the text in these to red. This is how we would do it:

Code:

p {
color: red;
}

Easy! Now all occurances of paragraphs will have their text coloured red.

Example 2
Next, we will just evaluate on this a bit more, by adding more attributes. We will want our paragraphs to have:

all text coloured in the hex code #FF0000 - color
all text to be aligned in the center - text-align
a border around it, which is 3 pixels wide, colour in the hex code #00FFFF and is beveled - border
a white background colour - background-color
all text is 5 pixels away from the border padding
the left edge of the border to be indented by 15 pixels - margin-left

Here is the CSS for these specifications:

Code:

p {
color: #FF0000;
text-align: center;
border: 3px outset #00FFFF;
background-color: white;
padding: 5px;
margin-left: 15px;
}

As you can see, the 'border' attribute has three separate values, that is the width, style and colour. You could alternatively do this using separate attributes, like this:

Code:

p {
color: #FF0000;
text-align: center;
border-width: 3px
border-style: outset;
border-color: #00FFFF;
background-color: white;
padding: 5px;
margin-left: 15px;
}

Note: The above examples all use the 'p', or paragraph, HTML tag to define CSS formatting for. You can replace this with most other tags (such as body, td and div), although there are some exceptions (such as head and script).

Continued to next post (too long)...

Zaltan · 16-04-2005, 01:19

Continued from previous post...

4. The Element Extended

You can specify more than just HTML tags as the element. You can make it so it only applies to certain classes; IDs; classes, IDs or tags within others; or basic behaviours. Below are some examples with explanations of some possible ways of defining the element:

Code:

body {}

This refers to just a normal HTML tag, like the examples above.

Code:

.classname {}

This refers to the HTML class attribute, which would apply to this:

HTML Code:

<table class="classname">

It is used to apply a certain style to certain tags, which are defined as above.

Code:

#thisid {}

This would make reference to the the HTML ID attribute, which can be applied like this:

HTML Code:

<td id="thisid">

It is used to apply a style to a single, specific HTML tag. There is actually another possible way you can define certain CSS to a particular tag, and that is the 'other' method of which I mentioned earlier. This way is efficient if you have only a little CSS on your site, and want to quickly edit something, as it does not require the <style> tag to define. The CSS is put straight into whatever tag you want to use if for, within the 'style' attribute, like this:

HTML Code:

<body style="color: red, background-color: blue">

Just make sure you use commas for separating each attribute, rather than the normal semi-colon.

Code:

h1, .class, #id {}

You can define multiple elements like this, using commas. Not much more needed to explain this...

Code:

a:hover {color: green}

Now we're getting into 'behaviours' (or pseudo-classes). What that above one does is make any link (HTML tag: <a>) on the page green when you hover your mouse over it.

Now let's make a small CSS script which is used for the class 'menulink'. For this, we want the normal text to be hex colour #FF0000 and underlined, but we also want to make it change colour for different things. When it is hovered over, we want it #00FF00, with a background colour of white; when it is a visited link, we want it #00FFFF; and when it is an active link we want it #000000. Here iss the CSS for what we need to do this:

Code:

.menulink {
color: #FF0000;
text-decoration: underline;
}
.menulink:hover {
color: #00FF00;
background-color: white;
}
.menulink:visited {color: #00FFFF;}
.menulink:active {color: #000000}

And to define the HTML class, go something like:

HTML Code:

<h1 class="menulink">

5. <div> and <span>

Without CSS, these two HTML tags do virtually nothing at all (except <div> may act similar to <p> around text). But with CSS, they can be two of the most important tags in terms of layout/decoration.

How they act with CSS is fairly simple to explain: you can use them the same way you use any other tag with CSS, such as defining the tag itself in CSS, or naming the tag with an ID and/or class attribute. For example, the CSS:

Code:

#div1 {background-color: black;}

And the HTML:

HTML Code:

<div id="div1">Div contents here...</div>

But what is the difference between these two tags, as they both are basically useless without CSS, and are both designed for CSS? The answer is that <span> is used for in-line content (the same way <font> tag is used), while the <div> tag is used for 'blocks' of content (similar to how <table> is used). With divisions and spans, they can mimic the uses of these following tags in CSS-styled pages, making them effectively useless: b, u, i, center, hr, and font (with blink and marquee in JavaScript/DHTML). It also allows these formats to be heavily customized, to the exact pixel.

6. Conclusion

We can now see the various ways CSS can be used to customize web pages, that are much more efficient and effective than plain HTML pages. And as all the CSS within a page can be defined in the header of an HTML document, near the top, it lets you easily edit the entire layout and decoration of a page in some script which is all grouped together, and even within a separate file if you wish. You can now (if you haven't already) implement CSS into your own site, and see and make good use of the many advantages it has.

If you wish to delve a little deeper into the world of CSS, I would recommend these following sites for learning and reference:

W3Schools - detailed tutorials and examples on most aspects on CSS.
HTML Dog - Extensive references and guides for both CSS and HTML. You can find almost every tag and attribute here.

If you have any questions, suggestions, corrections, or anything else, please reply feedback to this thread so I can answer/reply/fix it. Thank you.

No part of the above tutorial was taken from any other author's work, 100% of it was completed by me. I hope it may have helped you on your way to CSS transcendence in some way.

Shwaza · 16-04-2005, 02:10

Wow! That's a very long post! Haha, i couldn't read it all, but i got through a large chunk of it, and this looks like pretty good stuff! Great job, i'm giving you some reputation for this

Zaltan · 16-04-2005, 11:11

Oh, I just realised there is a Tutorials section, which would probably better suit this 'tutorial'... Oh well.

If there's much interest in this, I'll post another tutorial on CSS which will extend more into using <div> to create professional-looking 'blocks', such as menus or anyone other content which could be displayed that way, and some other things. So... any interest?

**robertall** · 16-04-2005, 12:11

That is quite a good tutorial for beginners, but i will stick with frontpage to make my CSS.

Zaltan · 16-04-2005, 23:39

But the problem with web design programs is that they have limited use. I use Dreamweaver MX, which has high CSS capabilities, but I still write the CSS is plain code. It's one of the easiest languages to learn, as long as you already know HTML (so people who use a design program for everything are very limited).

When I get the time to create to follow-up tutorial, it will go into CSS which would be impossible to do in a web design program -- yet the CSS with do extremely powerful things with not much of it.

16-04-2005, 01:18	#1 (permalink)
Zaltan Newbie Join Date: Apr 2005 Posts: 13 iTrader: 0 / 0%	CSS Tutorial - Beginners CSS for Beginners This CSS tutorial is aimed at people who already have a decent knowledge of HTML, and want to begin to learn CSS (Cascading Style Sheets). If you do not currently know a great deal of HTML, I would advise searching for some tutorials on these forums, or you can begin at W3Schools. 1. What is CSS? What does it do? CSS is an acronym for Cascading Style Sheets. These 'sheets' are implemented into HTML pages and provide an easier, more efficient and more powerful way of displaying information, using complex and more customizeable layouts, and also providing a semi-interactive basis, of which can be manipulated further with JavaScript (otherwise known as DHTML (Dynamic HTML)). The following tutorial will be based around the first two of these: display and layout. When first starting with CSS, many people can get confused about how it is used - such as thinking that they can create a webpage only with CSS, but you can't. I guess the best way to think of CSS is that it is a 'modification' of HTML, which can be inserted into already-created HTML pages to completely change the layout. A good example of how CSS styles are used is the CSS Zen Garden. This site uses the same HTML in all versions of it, but the CSS file location is changed. See the CSS Zen Garden for yourself, if you want, and have a little play around with the different CSS files, and look at the effects. Also note that this site doesn't use tables (HTML tag: <table>), but CSS divisions and spans (HTML tags: <div> and <span> respectively) instead. There are two basic ways to insert CSS into an HTML page (there is also another one, which I will explain later). The first way is to insert it directly into the page, within the header (HTML tag: <head>): HTML Code: <style type="text/css"> <!-- CSS goes here. --> </style> The second method is to import it directly from a CSS file (.css), like this: HTML Code: <style type="text/css" src="http://www.yoursite.com/directory/cssfile.css" /> Now that you know a little about what CSS is and what it does, lets move on to some actual coding... 2. CSS Syntax* The syntax for CSS is relatively simple and universal (although certain browsers do not support some CSS attributes or elements). The most basic CSS style would look like this: Code: element {attribute: value;} Where: 'element' can be a HTML tag (e.g. body), a class (e.g. .classname), an ID (e.g. #id) or otherwise. 'attribute' can be any available CSS attribute (e.g. color). 'value' can be an available CSS value (or values) for the attribute it is assigned to (e.g. black). For a detailed list on available CSS attributes and values, see the HTMLDog CSS Reference. To specify multiple attributes for a single element, rather than repeating the above code many times, you can do this: Code: element { attribute1: value1; attribute2: value2 value2a value2b; attribute3: value3; } The line-breaks and indents aren't necessary, but they make it much more readable, in case you want to edit your CSS. 3. Basic CSS Now, let's get ready for some actual CSS examples... Example 1 For our first example, we want to modify all text within a paragraph (HTML tag: <p>). To do this, we make the element "p", which means that we want to apply the following CSS attributes to every paragraph in the HTML, and we want to set the colour of the text in these to red. This is how we would do it: Code: p { color: red; } Easy! Now all occurances of paragraphs will have their text coloured red. Example 2 Next, we will just evaluate on this a bit more, by adding more attributes. We will want our paragraphs to have: all text coloured in the hex code #FF0000 - color all text to be aligned in the center - text-align a border around it, which is 3 pixels wide, colour in the hex code #00FFFF and is beveled - border a white background colour - background-color all text is 5 pixels away from the border padding the left edge of the border to be indented by 15 pixels - margin-left Here is the CSS for these specifications: Code: p { color: #FF0000; text-align: center; border: 3px outset #00FFFF; background-color: white; padding: 5px; margin-left: 15px; } As you can see, the 'border' attribute has three separate values, that is the width, style and colour. You could alternatively do this using separate attributes, like this: Code: p { color: #FF0000; text-align: center; border-width: 3px border-style: outset; border-color: #00FFFF; background-color: white; padding: 5px; margin-left: 15px; } Note: The above examples all use the 'p', or paragraph, HTML tag to define CSS formatting for. You can replace this with most other tags (such as body, td and div), although there are some exceptions (such as head and script). Continued to next post (too long)...

16-04-2005, 01:19	#2 (permalink)
Zaltan Newbie Join Date: Apr 2005 Posts: 13 iTrader: 0 / 0%	CSS Tutorial - Beginners (continued) Continued from previous post... 4. The Element Extended You can specify more than just HTML tags as the element. You can make it so it only applies to certain classes; IDs; classes, IDs or tags within others; or basic behaviours. Below are some examples with explanations of some possible ways of defining the element: Code: body {} This refers to just a normal HTML tag, like the examples above. Code: .classname {} This refers to the HTML class attribute, which would apply to this: HTML Code: <table class="classname"> It is used to apply a certain style to certain tags, which are defined as above. Code: #thisid {} This would make reference to the the HTML ID attribute, which can be applied like this: HTML Code: <td id="thisid"> It is used to apply a style to a single, specific HTML tag. There is actually another possible way you can define certain CSS to a particular tag, and that is the 'other' method of which I mentioned earlier. This way is efficient if you have only a little CSS on your site, and want to quickly edit something, as it does not require the <style> tag to define. The CSS is put straight into whatever tag you want to use if for, within the 'style' attribute, like this: HTML Code: <body style="color: red, background-color: blue"> Just make sure you use commas for separating each attribute, rather than the normal semi-colon. Code: h1, .class, #id {} You can define multiple elements like this, using commas. Not much more needed to explain this... Code: a:hover {color: green} Now we're getting into 'behaviours' (or pseudo-classes). What that above one does is make any link (HTML tag: <a>) on the page green when you hover your mouse over it. Now let's make a small CSS script which is used for the class 'menulink'. For this, we want the normal text to be hex colour #FF0000 and underlined, but we also want to make it change colour for different things. When it is hovered over, we want it #00FF00, with a background colour of white; when it is a visited link, we want it #00FFFF; and when it is an active link we want it #000000. Here iss the CSS for what we need to do this: Code: .menulink { color: #FF0000; text-decoration: underline; } .menulink:hover { color: #00FF00; background-color: white; } .menulink:visited {color: #00FFFF;} .menulink:active {color: #000000} And to define the HTML class, go something like: HTML Code: <h1 class="menulink"> 5. <div> and <span> Without CSS, these two HTML tags do virtually nothing at all (except <div> may act similar to <p> around text). But with CSS, they can be two of the most important tags in terms of layout/decoration. How they act with CSS is fairly simple to explain: you can use them the same way you use any other tag with CSS, such as defining the tag itself in CSS, or naming the tag with an ID and/or class attribute. For example, the CSS: Code: #div1 {background-color: black;} And the HTML: HTML Code: <div id="div1">Div contents here...</div> But what is the difference between these two tags, as they both are basically useless without CSS, and are both designed for CSS? The answer is that <span> is used for in-line content (the same way <font> tag is used), while the <div> tag is used for 'blocks' of content (similar to how <table> is used). With divisions and spans, they can mimic the uses of these following tags in CSS-styled pages, making them effectively useless: b, u, i, center, hr, and font (with blink and marquee in JavaScript/DHTML). It also allows these formats to be heavily customized, to the exact pixel. 6. Conclusion We can now see the various ways CSS can be used to customize web pages, that are much more efficient and effective than plain HTML pages. And as all the CSS within a page can be defined in the header of an HTML document, near the top, it lets you easily edit the entire layout and decoration of a page in some script which is all grouped together, and even within a separate file if you wish. You can now (if you haven't already) implement CSS into your own site, and see and make good use of the many advantages it has. If you wish to delve a little deeper into the world of CSS, I would recommend these following sites for learning and reference: W3Schools - detailed tutorials and examples on most aspects on CSS. HTML Dog - Extensive references and guides for both CSS and HTML. You can find almost every tag and attribute here. If you have any questions, suggestions, corrections, or anything else, please reply feedback to this thread so I can answer/reply/fix it. Thank you. No part of the above tutorial was taken from any other author's work, 100% of it was completed by me. I hope it may have helped you on your way to CSS transcendence in some way. ? Copyright 2005 Adam Freeth (Zaltan or Zalt4n). No part may be reproduced without prior permission of the author. (To prevent plagiarism.)

16-04-2005, 02:10	#3 (permalink)
Shwaza WMT Addict Join Date: Apr 2005 Posts: 120 iTrader: 0 / 0%	Wow! That's a very long post! Haha, i couldn't read it all, but i got through a large chunk of it, and this looks like pretty good stuff! Great job, i'm giving you some reputation for this __________________ Kingdoms Of Battle << Check out my free to play online strategy game! SomeCoders - Coding blog, coding tips

16-04-2005, 12:11	#5 (permalink)
robertall Moderator Join Date: Jan 2005 Location: post is there >> Posts: 1,586 iTrader: 0 / 0%	That is quite a good tutorial for beginners, but i will stick with frontpage to make my CSS. __________________ Free .org domain - Click for details! Do not pm asking for things. My inbox is full. Add me to MSN!

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

16-04-2005, 11:11	#4 (permalink)
Zaltan Newbie Join Date: Apr 2005 Posts: 13 iTrader: 0 / 0%	Oh, I just realised there is a Tutorials section, which would probably better suit this 'tutorial'... Oh well. If there's much interest in this, I'll post another tutorial on CSS which will extend more into using <div> to create professional-looking 'blocks', such as menus or anyone other content which could be displayed that way, and some other things. So... any interest?

16-04-2005, 23:39	#6 (permalink)
Zaltan Newbie Join Date: Apr 2005 Posts: 13 iTrader: 0 / 0%	But the problem with web design programs is that they have limited use. I use Dreamweaver MX, which has high CSS capabilities, but I still write the CSS is plain code. It's one of the easiest languages to learn, as long as you already know HTML (so people who use a design program for everything are very limited). When I get the time to create to follow-up tutorial, it will go into CSS which would be impossible to do in a web design program -- yet the CSS with do extremely powerful things with not much of it.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Free SEO Guide for Beginners	manika	Search Engine Optimisation (SEO)	4	31-10-2008 11:35
A beginner AJAX tutorial	LiberMan	Programming / Scripting / Coding	1	04-09-2008 01:34
Html Tutorial Part Three*frames	Morphmaster	Programming Articles	1	14-05-2005 21:56
Html Tutorial Part Five *Forms	Morphmaster	Programming Articles	0	14-05-2005 21:54
The graphic tutorial and tip sites thread	Zing!	Graphics Forum	4	10-04-2005 15:24

CSS Tutorial - Beginners

CSS Tutorial - Beginners

Similar Threads