How to Learn CSS

introduction what is css? | why use css? | learning css
css code css looks like this | three places to "talk css" | learn more
metas copyright | translation | contact

introduction

what is css?

top ↑

“CSS” stands for “Cascading Style Sheet”.
It uses a different language than HTML (HyperText Markup Language). (So some people call it “Stylesheet Language”.)
CSS also has a different purpose than HTML.
If you have used styles in Word or PageMaker, you already have the idea about stylesheets, or CSS.
The purpose of HTML is to make the structure of the web page. The HTML language tells the web browser: This part is a paragraph, this part is a header, this part is an image.
The purpose of CSS code is to make the look or display of our page. The CSS language tells the web browser what the parts should look like: Make this paragraph with some color, some size. Make this image with some margin, some border.
The latest version of CSS is CSS3.

why use css?

top ↑

  • Efficiency: You can put all the code for how your page looks in a separate file. Then if you want to change the design of all pages on your site — for instance, background color — just change in one file – the stylesheet file – and all pages on your site will change!
  • Clean page code: When all the code for display is out of your html code, it's a lot easier to work on your pages.
  • Special stuff: With CSS you can do:
    • Borders around anything
    • Background colors and background images anywhere
    • Line spacing (leading) and character spacing.
    • Different padding for individual cells in a table (unlike table cell-padding which makes the padding in all cells the same).
      foo bar
    • In CSS3 we can do text shadows, animations, and more.
  • HTML for display is going to go away:
    A group of all interested companies and people (W3C) make the standards for HTML and CSS. Their big plan is that eventually browsers will not use the html codes for formatting at all. When that happens, your old web pages that use <font>, <center>, and other display codes won't work any more.
  • (I wrote the above 7 years ago. Now that day is approaching quickly! If you are still using font and center tags in your html because it is "easier", you're soon going to find it not so easy when you suddenly have to convert everything to CSS!)

How can i learn css?

top ↑

Practice! If you have a computer with a text editor and a browser, and any css book or online reference, you have all you need to learn css.
You don't need an internet connection.

  1. Look in your css reference for interesting codes to try.
  2. Type an html page with css styles in your text editor
  3. View in the browser.
  4. Change the code in your editor, experiment, explore.
  5. View in the browser.
  6. Repeat!
1. Before you start:
  • Make sure you are already comfortable with html codes as in the beginning html tutorial pages
  • Read through the files in this folder: How to learn CSS, How to fix CSS problems, and the CSS FAQ
    You won't understand everything on those pages, but that's OK! The concepts will be rolling around in the back of your mind while you try these codes.
    Each time you look at the pages again, you will understand more.
2. Then: try things — HTML/CSS is doing!
  • Using your text editor, type the code examples on this page.
    (Use this template to make your web pages.)
  • Using your web browser, view the results.
  • Try changing your code and view it again.
3. Keep up your own notes and references as you learn.
  • Nobody can remember all these things! The people who seem smart, are actually the ones who keep and use references.
4. Use references to learn more
A good place to start is:

And — search with Google to find answers to anything!

What does css code look like?

top ↑

CSS code looks like this: 

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

This will make all level 2 headers (h2) red color, and smaller than a usual h2.

You could also use the same properties within the html, like this:
<h2 style="color: #cc0000; font-size: 80%;">

Then only that one h2 will have the color and size.

(See the CSS FAQ for more about css code.)
Learn more in the other files in this folder.


What are the three places we can "talk css language"?

top ↑

  1. In an html tag:
    (Changes the display of that tag only)

(Type it in a file and try it out!)

The html file: 

<DOCTYPE html />
<html>
<head>
<title>
My CSS Web Page
</title>
</head>

<body>

<h2>
About css
</h2>

<p style="text-align: center; color: #cc0000;">
CSS may seem confusing at first.
</p>
<p>
The idea behind it is similar to html.
</p>

</body>
</html>

The web page result:

About css

CSS may seem confusing at first.

The idea behind it is similar to html.

  1. In the <head> of an html page:
    (Changes the display of all named tags on the page)

You can have many different tags defined in your style.

(Type it in a file and try it out!)

The html file: 

<DOCTYPE html />
<html>
<head>
<title>
My CSS Web Page
</title>
<style type="text/css">
h2 {
  color:     #cc0000;
  font-size: 80%;
}
p {
  text-align: center; 
  color: #cc0000;
}
</style>
</head>

<body>

<h2>
About css
</h2>

<p>
CSS may seem confusing at first.
</p>
<p>
The idea behind it is similar to html.
</p>


</body>
</html>

The web page result:

About css

CSS may seem confusing at first.

The idea behind it is similar to html.

  1. In a separate file — the stylesheet:

(Changes the display of all named tags on all pages on the website)

(Type it in a file and try it out!)

The html file: 

<DOCTYPE html />
<html>
<head>
<title>
My CSS Web Page
</title>
<link rel="stylesheet" type="text/css" 
    href="styles/mystyle.css" />
</head>

<body>

<h2>
About css
</h2>

<p>
CSS may seem confusing at first,
</p>
<p>
The idea behind it is similar to html.
</p>

</body>
</html>

The stylesheet file — named mystyle.css, in the folder styles: 

h2 {
  color:     #cc0000;
  font-size: 80%;
}
p {
  text-align: center; 
  color: #cc0000;
}

The web page result:

About css

CSS may seem confusing at first.

The idea behind it is similar to html.

Yes this page looks just like the previous one — but now all pages on your website can have the same look for the level 2 header and the paragraphs. And when you want to change the design, you only have to change one file: mystyles.css

And in all three places at once!

It will take too much room to show all that here — you try it!


How can i learn more?

top ↑

When you are comfortable with basic css:

  1. "View source" of any web page you see, and figure out how the page was made. These days most web pages use css with external stylesheets.
  2. To see the stylesheet of a web page, look in the <head> of the web page for a line like:
    <link rel="stylesheet" href="/somedir/somename.css" />
    Paste that link in your browser address box, after the domain name of the website you are viewing, and you will see the stylesheet itself.
  3. Practice: Try typing codes from websites like: tibetangeeks.com/technologies/web_development/ in the "css" folders and files.
  4. Practice: Make pages with a program like DreamWeaver and look at "Code View" and see what the codes are.
  5. Good practice: Try to recreate a web page without looking at the source!
  6. Repeat!

How long will it take? When will i be done learning CSS?

top ↑

I have been learning CSS since 1998, and i am still learning it. It's like a language (because it *is* a language) — There are always new ways to put things together. Plus, the language itself improves and changes.

If you want to learn a skill where you can be "finished" at some point, web development isn't the right one for you!


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

1-how_to_learn_css.html
Written 2002
Revised 14 January 2011