CSS FAQ

your tools what is "code"? what is a "text editor"?  |  what is a "web browser"?
CSS what is "CSS"?  |  what is the minimum code a web page should have?
CSS code where do we put the CSS code?  |  why do we use these different places?  |  what are the parts of CSS language?  |  class and id  | 
more doctype  |  units of measurement  |  cascading  |  browser compatibility  |  page template
learning difficult to understand  |  other things  |  misteaks  |  learn more
metas copyright  |  translation

your tools


what is code?

top ↑

"code" is some text or characters that a program uses, but a person doesn't see. Your web browser is a program, that uses the html code to know how to display the text and pictures. When you look at your web page in the browser, you see the results of the code, as interpreted by the browser.


what is a "text editor"?

top ↑

A text editor is a program like Notepad – or better, Notepad++ or some other good text editor. It edits only the text, the characters, of your file.

A program like DreamWeaver or Front Page is NOT a text editor. It is a website building program. If you write your web pages in the "code view", it can be very useful for making your web pages. But be sure to look at your pages in a real web browser — you may find that they don't look the same in the program "display view" as they do in a real web browser!

Programs like Microsoft Word or Open Office Writer cannot be used for making web pages. It definitely NOT a text editor. It is a word processor: It has hidden codes in the file, and your web page won't work if you make it with Word or OOffice. In fact — if you open a Word (.doc) file with a text editor, you can see those codes!


what is a "web browser"?

top ↑

A "browser", or "web browser" is a program on your computer that displays web pages.

MicroSoft Internet Explorer is one web browser program. Another browser very popular these days is Mozilla Firefox. (Firefox is the most useful browser for developing web pages.) Other browsers are Opera, Konqueror, Galeon, lynx.

There are even web browsers that do not display the page the way you are used to seeing it: For blind people, there are browsers that speak the page, or create the page in braille. Mobile phones or PDAs have browsers that make a special small size of the page to fit on their small screen. 'lynx' is a browser which is text only - it does not display images, movies, etc.

CSS


what is "CSS"?

top ↑

"CSS" is code that tells a browser how to display the web page — it tells what the web page will look like.

The letters stand for Cascading Style Sheet

The Styles will Cascade, or flow down like a waterfall, from your styleSheet, to the head of the web page, to the inline style, to the default style of the html tag.


what is the minimum code that a web page should have?

top ↑

At the very least, your page should have the codes you see in this template
(It doesn't need to have those comments though! But comments that are useful to you are good to have.)

CSS code

Where do we put the CSS code?

top ↑

We can put the CSS code in three places:

1

In the body of the html page, as part of the tag:

<h2 style="color: #cc0000; font-size: 80%;">

This will make only that one header to have that color and font size.

2

Within <style> tags in the <head> of your html page

<style type="text/css"> h2 { color: #cc0000; font-size: 80%; } </style>

This will make all level-two headers, on that page only, have that color and font size.

3

Or you can put your stylesheet (CSS) code in the separate file called a "stylesheet". When you do this, you put only the CSS codes. You don't use the <style> tag, or any other html.

h1 { color: #cc0000; font-size: 80%; }

Then you tell the browser to look for your css directions in that stylesheet by putting this in the <head> of your html page:

<link rel="stylesheet" type="text/css" href="/your_stylesheet_name.css" />

Now all the level-two headers on all the pages on your website will have that color and font size.
This is the most useful way to use CSS code.

In the sample code in these tutorial pages, i will be showing the css as in example 3 above, as in a stylesheet. This is how we do when we make real websites.

But it is also useful when you are just trying things out in a web page, to use the first two ways, as in examples 1 and 2.

Why do we use these different places?

top ↑

They are all useful!

  1. In the body of the html page, as part of the tag: We can change just one tag.
    (This is mostly useful for learning, and for trying things out before we put them in our main stylesheet.)
  2. Within <style> tags in the <head> of your html page: We can change every occurence of a tag on that page.
    (Again, this is mostly useful for trying things out before we put them in our main stylesheet.)
  3. In the separate stylesheet: We can change every occurence of a tag on every page in our website.
    (This is the most useful, and is how we use CSS on a live website.)
The parts of the CSS language: What is a “ruleset”? “selector”? “declaration”? “property”? “value”?

top ↑

All of these parts are used in the head <style> tag or in the separate stylesheet:

↓---------------------------------- ruleset ----------------------------------↓
The parts of the CSS language
The ruleset is the whole thing. It has these parts:
selector: chooses the html tag.
property: the thing you want to change about the selector — the style of text or part of the page, such as color, or font-size, or border.
value: is the thing you actually change — the name of the color, the size, etc.
The declaration is the combination of a property and a value.

When we say: 

p {
  color:     #cc0000;
  font-size: 90%;
}
the selector p,
has two properties: color and font-size.
The value of color is #cc0000, and the value of font-size is 90%.

When we use style in a tag in our html page, then we use only descriptors: 

<p style="color: #cc0000; font-size: 90%;>
class and id

top ↑

If you want to have some different style for a tag, you can put the css code in the <head> of your page, or in a separate stylesheet, and give the element (tag) a name (the "class" or the "id"). Then you call that name in the tag in the <body>.

what is a "class"?

In this example, the name of the class is "first".

In the style, we use the '.' to say that it is a class.

In the html, we "call the style" by saying class="special".

More than one tag in the html can have the same class.

More at: 

<!DOCTYPE html />
<html>
<head>
<title>
My CSS Web Page
</title>
<style>
p.special {
  color:     #cc0000;
  font-weight: bold;
}
</style>
</head>

<body>

<p class="special">
CSS may seem confusing at first,
but the idea behind it is similar to html.
</p>

<p>
It has codes that tell the browser 
how to display things.
</p>

<p class="special">
We can use the same class 
more than one time in a web page.
</p>

</body>
</html>

And this will make a web page that looks (more or less :) like this:

CSS may seem confusing at first, but the idea behind it is similar to html.

It has codes that tell the browser how to display things.

We can use the same class more than one time in a web page.

what is an "id"?

In this example, the name of the id is "projects".

In the style, we use the '#' to say that it is a id.

In the html, we "call the style" by saying id="projects".

Only one tag in the html can have this id.

More at:

So why do we have both "class" and "id"?

The purpose of both "class" and "id" is to name a tag so you can give it a special style.

We use "class" when we want to style the same tag the same way, several times in a page.

We use "id" when we want to style one tag a special way, once in the page. so Then "id" can be used for other things also:

  1. To be a target for a link (like <a href="#projects">)
  2. To be a target for some javascript action

In these cases, there has to be only one. 

<!DOCTYPE html />
<html>
<head>
<title>
My CSS Web Page
</title>
<style>
h2#projects {
  color:     #cc0000;
  font-weight: bold;
}
</style>
</head>

<body>

<h1>
About our work
</h1>

<h2 id="projects">
Our projects
</h2>

<p>
Here is information about our projects.
</p>

<h2 id="more">
More about ids
</h2>

<p>
We can have more than one id for an element, 
but we use each id only one time in a web page.
</p>

</body>
</html>

And this will make a web page that looks (more or less :) like this:

About our work

Our projects

Here is information about our projects.

More about ids

We can have more than one id for an element, but we use each id only one time in a web page.

more about CSS

Doctype

top ↑

The web browser has directions built into it, that tell it how to display the html and css codes. These directions tell it how to put together the html and css, according to what kind of "document type" the html page is.

If the page has no document type, the web browser will decide for itself — and the page may not look the way you want. So always put a document type at the very beginning of all your web pages, before the <html> tag.

These days the most useful doctype is this one: 

  <!DOCTYPE html>

"View source" of this web page, or see this page template, to see where to put the doctype.

Units of Measurement in CSS

top ↑

relative measurements:
An em is a relative measurement. It is the width of the letter 'm' in the font used.
An ex is a relative measurement. It is the height of the letter 'x' in the font used.
A percentage, like 130%, is also relative to the size of the font or the block.
absolute measurements:
px means pixels. This is useful on screen. but keep in mind that different monitors have different sizes of pixels — depending on the monitor resolution. So it is often better to use relative measurements (see above).
A pt is the point size of the font. This is for printing. Not really useful on screen!
Why is it called “cascading”?

top ↑

The web browser first looks at the stylesheet.
Then it looks at any <style> in the <head> of the html page. If there is something different there, it uses that instead.
Then it looks at any styles in the tags of the <body> of the html page. And if there is something different there, it uses that instead.

So direction flows from stylesheet, to head, to tag style, to html, kind of like a waterfall flows, or cascades, down the hill.

Does CSS work the same in all browsers?

top ↑

About browser compatibility

You have probably noticed already that some things don't look the same in Internet Explorer as they do in FireFox. Or in the display view in DreamWeaver. It can be pretty frustrating!

Standards for the CSS language are decided on at the World Wide Web Consortium, an association of many companies and organisations concerned with the web. However, some of these companies do not follow the standards when making web browsers!

But don't give up. The companies are improving rapidly. While we are waiting for them, there are ways to work with this. You can use javascript to detect what browser is being used, and then serve up a stylesheet customised for it. But — then new versions of the same browsers change and you have to keep up with them! In my opinion it's really not worth it. Stick with the simple things that work in all browsers, and spend your time on the important thing that keeps people coming to your website: its content!

For the times when we just have to do a certain thing, search on the web for the words css browser compatibility for the most current information.

Your standard page template

top ↑

About page template

Since there is a lot of page code to type, it is probably not useful to keep typing the same code every time (and make mistakes while typing!) More practical is to make a file with no content, and copy it to make our pages.

Here is a suggested page template.

About learning CSS

Could you please say all this in English? Or at least some language that i can understand?

top ↑

The thing about all this is: CSS is a language. And talking about it is a language too, technical language.

Just like any other language, at some point you have to just jump in and learn the new language and use it!

In the meantime, i am trying to make this as clear as possible to help you wade in a little before you jump. Suggestions are welcome!

I see many other things in stylesheets on other websites. What are they? Why aren't you showing them in the CSS Tutorial?

top ↑

Yes, there are many more things possible. I'm trying to keep this introduction simple to get you started, and to show you how to learn. Then you can learn more things the same way i did: by finding them on the web, and trying them out!

What if i make mistakes?

top ↑

If you make mistakes, you are learning things!

If you don't make any mistakes, either
⇒ You are probably not really doing very much –
or
⇒ You are not human   :)

Don't worry, you can't break anything. You will learn things.

make many misteaks. learn lots.

Take risks: If you win you will be happy; if you lose you will be wise.
Where can i learn more?

top ↑

The most common CSS properties are in the tutorial file.
There is more information about CSS in the other files in this directory, and in the other css directories.
Here are some suggested good websites.
You can search for more on the web. Google is your friend.
And of course you can always ask me!

metas


copyright / license

top ↑

Q: Can i copy this file? Can i give to other people?

Answer:

Sure, you can give it to anyone, according to the terms of the license below. It is copyright © 2004 James Walker.

Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.1 or any later version published by the Free Software Foundation; with no Invariant Sections, with no Front-Cover Texts, and with no Back-Cover Texts. A copy of the license is included here.

If not found, find it at www.fsf.org - the Free Software Foundation.


translation

top ↑

It would be very useful to have translations of this document in any language. Most preferred would be Tibetan and Chinese. Please contact me if you can do a translation for us.


contact

top ↑

Was this helpful? Is it clear, or confusing? I would be happy to hear anything about how to make this better. You can contact me at the email address i have given you, or at http://www.webwalker.to/contact.php

4-css_faq.html
Revised 25 July 2010