[Site map] You are here --- > Newbies Paradise > Tutorials > Official > Website > Reading a tutorial

Using CSS

	Author : M@teo21 Creation : : on 01/23/2007 11:13:24 AM Last modification: : on 01/30/2007 04:05:03 PM Rate and comment this tutorial Print this tutorial

Finally there!

Now we went through the first part of this tutorial dedicated to xHTML, we are now about to discover CSS, a language I deliberately left aside in the previous chapters.
Like xHTML, CSS is not so complicated to learn, it is just different in the way it deals with your website's design.

You will see there are lots of "properties" you need to know (as for xHTML tags, except we have more here). Fortunately, no one is asking you to remember everything and a reference guide will be available in the appendix to help (whichI also use, I do not remember everything

).

In this first chapter about CSS, we will see the theory part: What is CSS? What does it look like? Where do we write CSS code? This theory is not too complicated, but you must learn it since it is the basis of CSS. Besides, it is the only thing I would like you to remember by heart in CSS, while other things can be found in the reference guide.

Alright, let's not waste anymore time, I see you are burning with impatience.

Chapter Contents :

Where?
Give it some style!
Using class and id
Quiz

Where?

Do you remember what CSS means? I briefly talked about it in the first chapter: it stands for "Cascading Style Sheets".

The "style sheets" expression is used because we usually write CSS code inside an independant file (with the .css extension instead of .html). In this file is decribed your entire website's style: colours, fonts, titles' size, menus' positions, background picture, and so on. Believe me, you will be able to do a lot of things with CSS!

There are three places where we can write CSS. Here they are, the first one being the most recommended:

In a .css file:

As I already mentioned, CSS is mostly written in a specific file with a .css extension, not within the .html file (which contains xHTML code).
This is the best way to write CSS code and I will use it during the whole tutorial because it allows you, for instance, to easily change your website's design (and that's not the only advantage, trust me

).

If you are using Notepad++, mind selecting "CSS Code" in the menu and do not forget to set your file with the .css extension, instead of .html.

Here is a CSS file made with Notepad++:

If you want to see how I proceed in a video clip, click the link below:

Save a CSS file with Notepad++ (170 Ko)

What you see on the picture is just a CSS code sample, do not bother trying to understand what it means, we will take care of this later.

You will need to add a line in your xHTML file within the <head> </head> tag, just like this:

Code: HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD xHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
   <head>
       <title>External CSS file example</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
   </head>
   <body>
       <p>This webpage uses an external CSS file which is the best way to create a design for your website.</p>
   </body>
</html>

The <link /> tag has several attributes. For now, you can modify two of them:

title: this is the name you give to your style sheet (write anything you want)
href: this is a relative link to the location of your style sheet. In this example the CSS file was set in the same directory, but you may put it in a "styles/" sub-directory (for instance).

Directly in the header of the xHTML file:

You can also write CSS code in the xHTML file, within the <head> </head> tag. You will need to set a <style> </style> tag, just like this:

Code: HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD xHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
   <head>
       <title>CSS example inside the xHTML header</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <style type="text/css">
           /* Type your CSS code right here */
       </style>
   </head>
   <body>
       <p>This webpage contains CSS code directly within its header</p>
   </body>
</html>

This method is quite the same as the first one. However, using an external .css file is much more handy, since you would be able to change the design of your website pretty easily. Besides, the .css file will only be downloaded once for all of your webpages and your website will be faster!

Once and for all, I recommend you to use an external .css file instead of typing your CSS code directly in the xHTML file

(yeah, I know, I already said that but I just want you to remember it :p).

The "dirty way" - inside the tags:

This is the third (and the worst) method: you set a style attribute in your tags to give them a specific style. This attributes works with all tags. Look at this example, with a title:

Code: HTML
1
<h1 style="/* Write your style for this tag here */">Titre</h1>
This method has many drawbacks: reading CSS code inside your tags is not easy and besides, you are bereft of a lot of CSS' features, like changing the colour of all titles easily.
Actually, I only told you about this method so you are not surprised if you see it.

Visual summary

To make it crystal clear for everyone, let's see what files we need handy:

In your website root folder, there has to be at least 2 files: one .html and one .css
The .html file handles the xHTML code (what we actually learned so far) with the specific line to link it to the .css file.
The .css file handles CSS code (what we are going to deal with from now on).

Good, now it is clear for everyone (at least I hope so

), let's focus on how CSS works.

Give it some style!

Three different sorts of things can be found in a CSS file:

Tags name: we write the name of the tags whose appearance must be changed. For instance, if I want to change the appearance of every <h1> title, I would write: h1.
CSS properties: the "style effects" of the pages are described in properties. For instance, the color property to set the text colour, font-size for the text's size, etc. There are many CSS properties, and as I said before, you do not need to know all of them. (You would suffer a lot, should I do that. )
Values: for every CSS property, we have to set a value. For color, we must specify the one we want, for font size, what size we need, etc.

Roughly, a CSS style sheet looks like this:

Code: CSS

tag1
{
   property: value;
   property: value;
   property: value;
}
tag2
{
   property: value; 
   property: value; 
   property: value; 
   property: value; 
}
tag3
{
   property: value; 
}

You can easily spot tag names, properties and values I told you about before.

As you can see, we write the tag's name (h1 for instance), then we use braces to write properties and values inside.

We can specify as many properties as we want within braces (but you should at least set one, otherwise that would be useless.

)
After a property's name, we write a colon character (:) and set the value. Always end a line with the semicolon character (;).

However, we may omit the semicolon when we only set one property (same as "tag 3") but it is always better to write it.

You will learn many properties in the following chapters. For now, we will only use a couple, took at random, for the example's sake. No worries though: I will explain further in the next chapters.

Let's say I want my paragraphs written in blue, each letter 18 pixels big.
I know that paragraphs are inside the <p> </p> tags, so I will write the following CSS code:

Code: CSS

p
{
   color: blue;
   font-size: 18px;
}

In proper English, it means: "I want all my paragraphs to be written in blue with a 18 pixels size."

Do not set any space character between "18" and "px", otherwise your CSS code will not work!

Save that CSS code in a "test.css" file, for example.

Now, we need a xHMTL file to test our CSS code. Do not forget the <link /> tag I told you about to point to our CSS file.
Here is the test file I made. Keep it handy because you will probably need it in the upcoming chapters, this xHTML file contains many tags and we are likely to use it for our next CSS tests.

Code: HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD xHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
   <head>
       <title>Sample Page to Test CSS</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="Test" href="test.css" />
   </head>
   <body>
       <h1>Discovering CSS</h1>

       <p>
          Hello!<br />
          I am an xHTML page which <em>may</em> looks normal, but I am actually used as <acronym title="Cascading Style Sheets">CSS</acronym> test file for a tutorial at <a href="http://www.newbiesparadise.com">Newbies Paradise</a>.
       </p>

       <h2>Just some random sentences</h2>

       <p>
          As Neil Armstrong said on July 20th, 1969: <q>That's one small step for a man, one giant leap for mankind. </q><br />
          I love potted sauerkraut.<br />
          And also chips!
       </p>
       <p>
          Yeah, I know it does not make much sense but who cares? This is just to test our CSS file, come on! :)
       </p>
   </body>
</html>

The following button runs the test.html file (we cannot run the CSS file directly):

Try it!

Try to change the CSS file by choosing another colour (e.g. "red"). You can also set the text size at 24px (if you want it to be really big

).
The great thing with CSS is you can change the whole design of your website very easily: you just have to modify the CSS file and that is it!

You can try and set styles for other tags (h1, h2, em, etc.) Of course, we only know two CSS properties so far, but this is enough to make a few tests.

Use the same style for different tags

Let's see the following CSS code:

Code: CSS

h1
{
   color: red;
}
h2
{
   color: red;
}

This means we want our h1 and h2 tags to be displayed in red, but the code is repeated.

You can easily use the same style for different tags with CSS: just set a comma between their names:

Code: CSS

h1, h2
{
   color: red;
}

This means: "I want my <h1> titles and my <h2> titles to be displayed in red".

You can set as many tags as you want. For instance, if you would want to display your quotes, titles and links in red, you would write:
h1, h2, a, q
Got it?

Comments within CSS code

As with xHTML, you can use comments in your code. Comments are not displayed, they will give you information when working on a large or tough CSS file.

By the way, you will see that your xHTML file is often short but your CSS file is much bigger (because it contains all your style sheet elements). It is possible (and advised) to make many CSS files: one for your general design, one for your menus, one for your forums, etc.

Err... What were we talking about? Oh yeah: comments within CSS (sorry, I am getting too old for this

).

So, to set a comment is fairly simple: type /*, your comment and then */ to end it.
Your comments can be written on one or more lines. For instance :

Code: CSS

/*
test.css
---------

By M@teo21
File made on 10/10/2004
*/

p
{
   color: blue; /* Paragraphs will be blue */
   font-size: 18px; /* I think 18 px is a good size */
}

I will probably use a lot of comments in the next few chapters to explain my CSS code within the files.

Using class and id

The thing with what we have seen so far is: if we consider the CSS we applied to the paragraph example, it will also affect every paragraph, with a 18px blue font.
How to make it so specific paragraphs (or quotations, titles...) can be displayed in a different way?

To achieve this, we use some special attributes which can affect every tag:

The class attribute.
The id attribute.

Here is what we are going to learn:

What class and id are for, and how to use them.
What "universal" tags are.
What tag overlappings is.

What a great schedule!!! :lol:

Class and id

Let's make it clear: class and id are almost the same. There is just a small difference between them but I will tell you about it later.
For now, and for simplicity's sake, let's focus on the class attribute.

As I just mentioned, you can use this attribute with any tag (picture, paragraph, title, etc.):
<h1 class=""> </h1>
<p class=""></p>
<img class="" />

Okay, but what value do we set?

In fact, just a name. Whichever you want.

The class attribute let you define a custom style.
Let's say you want a custom style named "important" to display your text in red with a 18px size. You will add the class="important" attribute on every tag you want to affect.

In the following example, I set a class attribute on a paragraph and on the quotation:

Code: Others

<!DOCTYPE html PUBLIC "-//W3C//DTD xHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
   <head>
       <title>CSS Test Page</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="Test 2" href="essai2.css" />
   </head>
   <body>
       <h1>Discovering CSS</h1>
       <p>
           Hello!<br />
          I am an xHTML page which <em>may</em> looks normal, but I am actually used as <acronym title="Cascading Style Sheets">CSS</acronym> test file for a tutorial at <a href="http://www.siteduzero.com">Newbies Paradise</a>.
       </p>
       <h2>This is nonsense</h2>
       <p>
           As Neil Armsrtong said on July, 20th 1969: <q>It's one small step for a man, one giant leap for mankind. </q><br />
           I love potted sauerkraut.<br />
           And chips too!
       </p>
       <p class="important">
           Yeah, I know it does not make much sense but who cares? This is just to test our CSS file, come on! :)
       </p>
   </body>
</html>

From there, how would we use CSS to tell: "I want the tags with the "important" class to be displayed in red with a 18px size"?
Easy enough: instead of the tag's name before the braces (like p or h1), just set a dot, followed by the name of the class:
.important

Resulting in the following CSS code:

Code: CSS

.important
{
   color: red;
   font-size: 18px;
}

Now test the previous xHTML page with the new CSS file and see how the important changes the text:

Try it!

Handy, isn't it?

What about the id attribute?

It works exactly like class does, except they can only be used once.

Why? Actually, you may use it later if you write Javascript code; otherwise, it is not very useful. Besides, we have already seen the id attribute in the chapter dedicated to links (it is used to make anchors).

We will only use the "id" attribute on unique elements of your webpage, like the banner:
<img src="images/logo.png" alt="Website Banner" id="logo" />

With CSS, a sharp is set (#) before the id's name instead of a dot:

Code: CSS

#logo
{
   /* Write your CSS properties here */
}

We will not test it here since because it works exactly the same than class.

If you are confused with class and id (not sure why, but still, it may happen), you should always use the class attribute, it will always work.

However, I may use the id attribute in the next chapters. Usually, I set an id instead of a class when I know I will only use it once.

Universal tags

You may sometimes need to use a class attribute (or somtimes an id) on words outside of tags.
Actuallt, the thing is that class is an attribute, so you can only use it on tags.

For instance, if I only want to modify "Neil Armstrong" in the following paragraph:

Code: Others

1	<p>As Neil Armsrtong said on July, 20th 1969... </p>

That would be possible if we had a tag for "Neil Armstrong", but we do not. Fortunately, we have the "dummy-tag"

Actually, there are two "dummy-tags" with a slight (but important!) difference between each other:

<span> </span>: it is an inline tag. Do you remember what that means? It is a tag set within a paragraph, like <strong>, <em>, <q>. Hence, it is perfect to colour "Neil Armstrong".
<div> </div>: it is a block tag, just like <p>, <h1> etc. It creates a new "block" on the webpage and, of course, a line break. It is a very useful tag for templating. Two chapters will be dedicated to this tag in the third part of the tutorial to help with your new website's design.

For now, we'll stick to the <span> tag. Set it on Neil Armstrong, add a class to it,
write the CSS code and you are done!

Code: Others

1	<p>As <span class="name">Neil Armstrong</span> said on July, 20th 1969... </p>

Code: CSS

.name
{
   color: blue;
}

Try it!

You will probably see me using the <span> tag again in the followig chapters. I have to admit, it is one pretty useful tag.

Tag overlappings

This is one of the last "basic" of CSS I wanted to tell you about: you can set an overlapping order in the CSS code.
You may think it is another twisted thing invented by those freaky computer geeks with big glasses... but it is not

Actually, it is easy to understand and very useful.

Let's say you want to set a style for <em> tags within a <h3> title. Here is the associated CSS:

Code: CSS

h3 em /* => for each em inside an h3 */
{
   color: blue;
}

As you can see, tags have been separated with a space instead of a comma.
This means "I want to modify the style of every <em> tag inside a <h3> title tag".

The order of the tags you specify here is extremely important! If you write "em h3", it means "Every <h3> tag inside an <em> tag", which is impossible because we cannot put a block tag within an inline tag.

Here is an xHTML file which will help you to understand better:

Code: Others

1
2
3

<h3>Overlapping is <em>useful</em></h3>
 
<p>This example shows you how overlapping works.<br />The word "useful" is written in blue inside the title, but not this one: <em>useful</em>.</p>

Try it!

Helpful, isn't it?

You can also mix tags and classes:
p .important
Which means: "Every "important" classes inside <p> tags".

And here is a little twisted example:
blockquote p strong, h1 .important
Wow, be careful with that one. The comma "cuts" the line in two parts; it means "AND". Let's put some colour:
blockquote p strong, h1 .important
Which means: "Every <strong> tag within <p> tag itself inside a <blockquote> AND every "important" class within an <h1> title"

There are more options for tags overlappings in CSS but not very useful for us by now, and moreover, Internet Explorer 6.0 does not understand them. As many reasons why I should not offer more in such a rich chapter.

Quiz

Which of the following is advised to use CSS?

Set CSS code within the <head></head> tags thanks to the <style> tag.
Set the CSS code with a .css file.
Set the CSS code in a "style" attribute within tags.

What are the <link /> tag's attributes we need to use for now?

rel and type
href and rel
title and href

How many properties can we set on a tag?

From 1 to 10
From 0 to 10
From 1 to... as many as we need.

What is the meaning of this piece of CSS code?:

Code : CSS

strong
{
color:red;
}

Use red colour for all important text.
Enhance all important text.
Bold all the red text.

How could we apply a style to all kind of titles?

h1, h6
h1, h2, h3, h4, h5, h6
h1 h2 h3 h4 h5 h6

Which one of the following texts is neither a CSS nor an xHTML comment?

/* I am a comment */
<! You've got it all wrong! I am the comment! -->

How peculiar is an id compared to a class?

An id can only be applied on title tags.
An id is only defined once, although you can repeat a class name as needed.
An id is only related to block tags, although a class is used with inline tags.

Which one of the following tags is not an universal tag?

<block>
<div>
<span>

What is the target of the following CSS style?

Code : CSS

blockquote .gros, h1, h2 .big
{
font-size:20px;
}

"big" classes located outside blockquote, h1 and h2.
Blockquote, h1, h2 and "big" classes.
"big" classes located inside blockquote, h2, and every h1 titles.

So many new things...
you guessed it, CSS is special language, rules are different. But as you can see, xHTML and CSS are bonded together, you can hardly use them apart.

All the new things I have taught you in this chapter are important, so make sure you understand everything. No rush! (unless you made some kind of stupid bet with a friend like "I dare you to learn how to make a website in less than two days" :p).

Do not be scared by those new things we saw: the biggest part of the job is basics learning, and that is exactly what we did so far. From now on, it should be easier.

In the following chapter, we will discover many CSS properties. As a matter of fact, besides writing some blue text with an 18 pixels size, not much exciting stuff! :lol: