A CSS Tutorial for Beginners

This CSS tutorial is for people with little or no CSS experience. You should have a basic understanding of HTML. If you would like to learn HTML here is an HTML Tutorial. This CSS Tutorial covers these topics:

  • What is CSS?
  • Why do they call it Cascading Style Sheets?
  • What is a style sheet?
  • How does CSS work?
  • A basic web page with one CSS rule

What is CSS?

  • CSS stands for Cascading Style Sheets
  • CSS is a language used to style and position things on a web page.
  • For example, CSS tells your browser how to style text on a Web page with size, boldness, color etc.
  • For example, CSS tells your browser how to position things on a Web page with margin, width, height etc.

Why do they call it Cascading Style Sheets?

cascade
A series of decisions in which each decision affects the next. The browser makes these decisions.
style
The look and position of text and other things on a web page like tables, forms, images etc.
sheet
Originally, a piece of paper... Now, an electronic set of rules.

Then CSS = Cascading Style Sheets = A style language that with a set of rules that determine the look and position of elements on a web page that the browser has to make a series of decisions about.

Or simply: CSS = Cascading Style Sheets = a style language for the Web.

What is a style sheet?

A style sheet is a list of rules for styling and positioning the elements of a web page. Your browser reads this list of rules. The browser then displays the elements of a web page according to those rules. Learn more about style sheets in this fast, simple CSS example.

How does CSS work?

Here is a quick way to see CSS work. The following code has one CSS rule. It tells the browser to color the background red. This is the one CSS rule:

style="background-color: red;"

A Basic Web Page with One CSS Rule

<html>
<body style="background-color: red;">

<h1>This is a heading</h1>

<p>This is the paragraph text. This is more paragraph text. This is more paragraph text. </p>

</body>
</html>
  • The one CSS rule is inside the <body> tag, so it applies to the body (the whole visible area of the web page).
  • The style being defined is the 'background-color'.
  • The background color is being set to 'red'.

Try it!

Using a text editor like Notepad or BBEdit, copy and paste the above code and save it as redBackground.html. Open it up in your browser. You should see a page with a red background. By the way... here is a good article on Free CSS Editors.

Now open redBackground.html in your text editor, replace the word 'red' with the word 'blue' and then save it. Open redBackground.html up in your browser. It should have a blue background. You may need to refresh the page to see the blue background.

That's the end of our CSS tutorial for beginners. To learn more try another introductory CSS tutorial.

Website Building Tip

Start using style sheets on yor website as soon as possible.

At first it may take a while to set up but in the long run you will save yourself a lot of time.

A Simple Style Sheet