Euro PC Solutions BlogCSS

CSS – Starting CSS

At last, we’re here

After spending the whole first part just doing XHTML, we are finally going to discover CSS.
CSS is not more complicated than HTML, it’s just different because it sorts out the presentation of the web site.

As you will see there are lots of “properties” to know (a bit like the tag names in XHTML, but more). Luckily, there’s no need to remember everything by heart and I’ve made a chapter at the end with the list of properties (even I might use it, I can’t remember everything ).

In this first chapter on CSS, we will see the theory : what is it ? What does it look like ? Where do we write it ? It’s not very complicated but must be seen to understand the whole basis of CSS. It’s the only thing I will ask you to know by heart about CSS, the rest you will be able to find in the cheat sheet.

Right, let’s get going, I can tell you’re getting impatient

Where Do You Put CSS ?

Do you remember what CSS means? It means Cascading Style Sheet. We say Style Sheet because generally we write the CSS code in a separate file (with the extension .css instead of .html). It’s a file in which we write the appearance that we want our site to have : the colour and font of the text, the positions of the menus, the image or colour of the background etc…believe me, CSS can do an awful lot

We can write our CSS in three different places, depending on what we prefer :

Method A : In a .css file (the recommended method)
Method B : In the header of the XHTML
Method C : In the XHTML tags

Here’s a description of the different methods. If you have to remember one of them, it should be the first :

In a .css file (Method A) :
As I just said, we write the CSS code most often in a separate file with the extension .css (differently to XHTML files which end with .html). This is the most practical method and the one I will nearly always use during these lessons. Among the advantages that this method proposes are the possibilities to easily offer several different designs to your visitors, and it’s easy to make changes to the global design of your site.

If you use Notepad ++, think to go to “Language”->”C”->”CSS” to activate code colouring for CSS. Also remember to save the file as .css instead of .html.

Here is an example of a .css file in Notepad++ :

What you can see is a preview of the CSS we will be learning, don’t worry about what it means for the moment though, I’ll explain all that later

Now you’ll need to return to your XHTML file. We need to add a line between <head> and </head> which will allow us to “tell” the XHTML file where the CSS file is :
```
<!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>Example Of How To Use An External CSS File</title>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <link rel="stylesheet" media="screen" type="text/css" title="Style" href="style.css" />
</head>

<body>
     <p>This page has an external style sheet. This is the best way to include CSS.</p>
</body>
</html>
```
The tag <link /> contains several attributes. At the moment you can modify two of them :
- title : is the name that you want to give to your style sheet (put whatever you want)
- href : Location of the style sheet under the form of a related path. In this example the file is in the same folder.
Directly in the header of the XHTML (Method B) :

It is also possible to type the CSS straight into the header of the XHTML file, between the tags <head> and </head>. You have to add the tags <style> </style> inside, like this :
```
<!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>Example Of CSS In The Header</title>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <style type="text/css">
          /* write your code here */
     </style>
</head>

<body>
     <p>This page has CSS in the header.</p>
</body>
</html>
```
This second method is a lot like the first one. However the first solution (external css file) is more practical as it allows us to change the design of the whole site quickly. On top of that, with the first solution, the .css file is only loaded once which speeds up the loading time of the site whereas this method needs us to reload the style on every page.

I might be repeating myself but I recommend that you use an external style sheet (the first solution) instead of putting the CSS straight in the header of the XHTML.
The scruffy method (Method C) :

This is the third (and least recommended) method. You just add an attribute style to the tags where you want to add a particular style. For example on a title :
```
<h1 style="/* The style of your tag goes here */">Title</h1>
```
This solution has a lot of defaults : not only is the CSS hard to read and difficult to find quickly, but it also gets rid of the advantages of CSS such as being able to change the colour of all the titles in one line of code.
Well, I’ve just shown you this method so that you don’t get lost if you see it.

So, you’ve just seen the 3 solutions that we can use to insert CSS (from the best to the worst).
The best way is to use an external style sheet, and it’s this way that I will show you throughout these lessons.

Visual Summary

I am supposing here that you have chosen method A as I recommended. Up to now we were only working with one file (the .html). From now on we will be working with 2 files : a .css, and as always our good old .html.

Let’s summarise the files that we should now have so that it is clear for everybody :

In the folder of our site, there should be at least 2 files : a .html and a .css.
The .html file contains the XHTML code (that we have been learning) with in particular the line to link to the .css file :
The .css file contains the CSS (which we are going to learn now)

If you want to see the result of your work in the .css file you have to open the .html file in a browser as usual. Don’t open the .css (this file alone doesn’t do anything).
It is the .html which, when it is loaded, will open the .css and apply its styles.

Well, now that that is clear to everyone (at least I hope ), let’s have a look at how CSS code works.

Applying Styles To Tags

In a CSS file, there are 3 different elements :

The names of the tags : write the names of the tags whose appearance you wish to change. For example, if you want to change the look of all your <h1> titles, you write h1
The CSS properties : The “style effects” are stored in properties. For example the property color lets you change the colour of your text, font-size lets you change the size of your text etc… There are a lot of CSS properties, and as I said before, you don’t need to know everything by heart.
The values : Each CSS property must have a value. For example, with the colour, you need to say what colour you want. For the size, you need to say what size you want etc etc…

Here’s a quick diagram of what a CSS file looks like :

tag 1 {
     property: value;
     property: value;
     property: value;
}

tag 2 {
     property: value;
     property: value;
     property: value;
     property: value;
}

tag 3 {
     property: value;
}

You’ll find all 3 elements I’ve just told you about : tags, properties & values.

As you can see, you write the name of the tag (for example h1), then open accolades ({ }) to put the properties and values inside.

You can put as many properties as you want inside the accolades. (well, you need at least one or else there is no point )
Each property is then followed by a colon (:), then the value corresponding to the property. Finally, each line ends with a semi-colon (;)

I will teach you several properties in the following chapters. At the moment we’ll just use one or two of them for a quick example, but don’t worry I’ll explain them in detail in the next chapters.

Let’s suppose for example that I want to modify all my paragraphs so that they’re written in blue, with a size of 18 pixels.
I know that all my paragraphs are between the tags <p> and </p>, so I will write the following CSS code :

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

In English this means : I want all my paragraphs to be blue with a font size of 18 pixels.

Never put a space between 18 and px, if not the CSS code won’t work !

Save the CSS code in a file called test.css for example.

Now we’ll create a XHTML page just to test our CSS. Don’t forget to put the tag <link /> in the header of the page to say where our CSS file is.
Here is an ugly HTML file that I’ve created. I suggest that you recopy its content and keep it handy because it contains several tags and will probably be used quite a lot to test our CSS code. :

<!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>Example Page To Test Our CSS Code</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>Finding Out About CSS</h1>
     <p>
          Hello !<br />
          I am an XHTML Page that is <em>apparently</em> ugly, but in actual fact I will be used to test the <acronym title="Cascading Style Sheet">CSS</acronym> for the tutorials of <a href="http://blog.europcsolutions.com" title="Go to Euro PC Solutions">Euro PC Solutions</a>
     </p>

     <h2>This Text Is Not Purely Rubbish</h2>
     <p>
          As Neil Armstrong said on the 20 July 1969 : <q>That’s one small step for [a] man, one giant leap for mankind</q><br />
          I like eating chocolate.<br />
          Long live chips !
     </p>

     <p>
          What, my text doesn't make any sense ? Who cares, it's only to test our .css file hahaha ;o)
     </p>
</body>
</html>

Open your .html file in a browser. If the CSS file is properly linked, and you’ve put the code that I gave you earlier in the .css file, you’re text should now be blue !
Try to modify the css file, by putting in a different colour and size (for example in red size 24 )
The great thing with CSS is that you can change the looks of every paragraph in one go ! You simply need to modify the .css file and there you go, the changes are made

To train yourself, try modifying some of the other tags like the titles (h1, h2, em etc…) Right for the moment I’ve only shown you 2 CSS properties but it’s enough for small tests

Applying A Style To Several Tags

Let’s take the following CSS code :

h1 {
     color: red;
}

h2 {
     color: red;
}

This means that we want our h1 titles to be red, as well as our h2 titles. But it is a bit repetitive as it’s exactly the same thing.

Luckily, in CSS, there is a way to go a bit faster if 2 tags need exactly the same presentation. You just separate the names of the tags with commas, like this :

h1, h2 {
     color: red;
}

This means I want my titles <h1> and <h2> to be written in red

You can put as many tags, one after the other, as you wish. For example, if you want your titles, quotations, and links to be red, you put :

h1, h2, a, q {
     color: red;
}

Understood ?

Comments In CSS

Just as in HTML, it is possible to write comments in CSS. Comments are not visible to visitors, they’re just information for you, for example if you have some really loooonng CSS file.

Generally, as you will see, the HTML file is quite short whereas the CSS will be long (if it contains all the styles for your web site that’s quite normal ). It is possible (and recommended), to create several CSS files for a big site, to be able to break the code down into smaller lots : one for the sites design, one for the forum, another for the menu etc…

…what were we talking about ? Oh yes, comments in CSS.

So, to add comments in CSS it’s easy : just type /*, followed by the comments, then */ to end your comments.

Comments can be put on one or several lines. For example :

/*
test.css
--------
By Daniel Lucas
File created  on 17/07/2010
*/
p {
     color: blue; /* paragraphs will be in blue */
     font-size: 18px; /* 18 should be a decent size I think */
}

I will probably use quite a lot of comments during the lessons to explain the CSS code.

Using class & id

What I have shown you up to now, does still have a major default : it makes EVERY paragraph use the style that you’ve written, for example blue / 18 pixels.
How do you only make certain paragraphs or titles use a particular style ?

We have the possibility to do this using special attributes that work on every tag :

the attribute class
the attribute id

We will see the following in this order :

what are class & id and how to use them
so called “universal” tags and what they do
nesting tags

class & id

Let’s clear things up straight away : class and id are practically the same thing. There’s only one small difference that I’ll tell you about a bit lower. For the moment to keep things simple, we’re going to look at the attribute class.

As I have just said, it’s an attribute that can be used on any tag, from paragraphs right through to images etc…
<h1 class=" "> </h1>
<p class=" "> </p>
< img class=" " />

And what values do you give to class ?

In fact, you just enter a name, whatever you want.

Classes allow you to define a particular style.
Let’s suppose that in your .css file you have a style called “important” that puts your text into red size 18px. You add class=important where you want to use this style.

In this example I’ve added the attribute class to a paragraph and the quotation :

<!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>Example Page To Test Our CSS Code</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>Finding Out About CSS</h1>
     <p>
          Hello !<br />
          I am an XHTML Page that is <em>apparently</em> ugly, but in actual fact I will be used to test the <acronym title="Cascading Style Sheet">CSS</acronym> for the tutorials of <a href="http://blog.europcsolutions.com" title="Go to Euro PC Solutions">Euro PC Solutions</a>
     </p>

     <h2>This Text Is Not Purely Rubbish</h2>
     <p>
          As Neil Armstrong said on the 20 July 1969 : <q class="important">That’s one small step for [a] man, one giant leap for mankind</q><br />
          I like eating chocolate.<br />
          Long live chips !
     </p>

     <p class="important">
          What, my text doesn't make any sense ? Who cares, it's only to test our .css file hahaha ;o)
     </p>
</body>
</html>

Now, how do you say in CSS that you want all the tags with the class important to be in red / 18 pixels ?
It’s very easy. Instead of putting the names of the tags before the accolades (like p or h1), you put a dot followed by the name of the class, like for example :
.important

Add the following CSS code under what you already have :

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

Now make sure that you’ve put the previous property back to blue if you modified it (or at least make sure it’s not red) and test the HTML page. See how the class important has modified the appearance ?

And what about the attribute id ?

It works exactly the same way as class with the exception that it can only be used once.
An id name must start with a small letter which can be followed by any letter or number. An id called 3tables would therefore be invalid, however you can write table3

What is the point in this ? There isn’t that much really. I personally use id for defining the main parts of my sites, for example id="header", id="wrapper", id="centre", id="footer". However we’ll see that later in an exercise where we’ll make a proper web site id can also be useful for javascript if you decide to study that (we’ll start writing javascript lessons after we’ve finished the php lessons). And we’ve already seen id being used for anchors.

So mainly we use id on the elements that are unique in our site, for example the logo :
<img src="images/logo.png" alt="Logo of the site" id="logo" />

In the .css file it is no longer a dot that you put before the name but a diese (#) :

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

You don’t really need to test it this time; in any case it’s practically the same as class.

If you find that you’re getting class and id mixed up (it shouldn’t happen but you never know…) you can use class all the time and it’ll work.

Personally I will be using id in these lessons. I’ve just got used to doing that when I know I’ll only be using something once.

Universal Tags

Sometimes you need to apply a class (or an id but it’s rarer) to certain words that are not surrounded by a tag.

For example, if I only want to modify Neil Armstrong in the following sentence :

<p>As Neil Armstrong said on the 20 July 1969...</p>

It would be easier to do if there was a tag around Neil Armstrong, but unfortunately there isn’t. Luckily however two tags have been invented that don’t do anything

<span> </span> : this is an inline tag. Do you remember what an inline tag is ? It’s a tag that’s put inside a paragraph like <strong>, <em>, <q>. This tag is used in the middle of a paragraph, so it is this one we’ll use to modify Neil Armstrong
<div> </div> : this is a block tag. Like <p>, <h1> etc… This creates a new “block” in your page and so makes everything else start a new line after it. This tag is used an awful lot in web site design. For this reason we’ll dedicate 2 whole chapters to this tag in the third part of the lessons to help you build the design of your web site.

So, for the moment, we’ll be using <span>. Put it around Neil Armstrong and give it a class, then there’s just the CSS to do

HTML :

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

CSS :

.name {
     color: blue;
}

You’ll probably see me use a lot of <span> in the rest of the lessons as it is very useful

Nesting Tags

One of the last "basic" notions in CSS that I would like to teach you is how to nest tags one inside the other in CSS.
This might seem a bit twisted but really it’s quite simple, and very useful

We are in our CSS file. We would like to define a style solely for the <em> inside the <h3> titles. We need to write this :

h3 em { /* => all of the em inside a h3 */
     color: green;
}

As you can see I’ve just separated the names with a space, and not with a comma as we did before.
This means "I want to modify all of my <em> tags inside <h3> titles" We have told the CSS in which order it should look for the tags.

The order is very important ! If you put em h3 that means all the <h3> titles inside <em> tags. And it’s impossible to do that because you can’t have a block tag inside an inline tag.

Here is an XHTML file so that you can see how it works :

<h3>Nesting is <em>practical</em></h3>

<p>This example shows you how nesting works.<br />
The word <q>practical</q> in the title will be written in green, but not this one : <em>practical</em>.</p>

Useful, isn’t it ?

You can also mix tags and classes :
p .important
This means All of the important classes inside <p> tags

Here’s a twisted little example just to finish in style :
blockquote p strong, h1 .important
Right, be careful not to mix everything up. The comma separates the line into 2 parts, it means AND. So that you can see that the line is separated into 2 parts I’ll add colour to the text :
blockquote p strong, h1 .important
Which means : All the <strong> tags contained in a <p> which are contained in a <blockquote> AND all the important classes contained in a <h1> title

Well, that’s the end of a very long chapter indeed There’s a lot of new things here as we’ve just started CSS and CSS is completely different to HTML. However, as you can tell, XHTML & CSS are extremely dependant on each other and it’s difficult to do much without using both languages.

All the new things I’ve taught you in this chapter are important, so take the time to learn them properly. There’s no need to rush, nobody’s forcing you to carry on to the next chapter straight away (unless you’ve got a stupid bet with a friend to learn how to make a web site in 2 days )

If all these new things all of a sudden are making you a bit worried, there’s no need to panic. As always, the basics are the most complicated part. And that’s what this chapter’s about. Take the time to learn this part properly and you’ll find the other chapters easy All we’re going to do is see new CSS properties (we’re a bit limited with color & font-size :p)

Euro PC Solutions Blog