Visit Mozilla.org

CSS:Getting Started:What is CSS

From MDC


This page explains what CSS is. You create a simple document that you will work with on the following pages.

[edit] Information: What is CSS?

CSS is a language for specifying how documents are presented to users.

A document is a collection of information that is structured using a markup language.

Examples
  • A web page like this one is a document.
    The information that you see in a web page is usually structured using the markup language HTML (HyperText Markup Language).
  • A dialog in a Mozilla application is a document.
    The user interface controls that you see in a Mozilla dialog are structured using the markup language XUL (XML User-interface Language).

In this tutorial, boxes captioned More details like the one below contain optional information. If you are in a hurry to progress with the tutorial then you could skip these boxes, perhaps returning to read them later. Otherwise read them when you come to them, and perhaps follow the links to learn more.

More details

A document is not the same as a file. It might or might not be stored in a file.

For example, the document that you are reading now is not stored in a file. When your web browser requests this page, the server queries a database and generates the document, gathering parts of the document from many files. However, in this tutorial you will work with documents that are stored in files.

For more information about documents and markup languages, see other parts of this web site—for example:

HTMLfor web pages
XMLfor structured documents in general
SVGfor graphics
XULfor user interfaces in Mozilla

In Part II of this tutorial you will see examples of these markup languages.

Presenting a document to a user means converting it into a form that humans can make use of. Mozilla is designed to present documents visually—for example, on a computer screen, projector or printer.

More details
CSS is not just for browsers, and not just for visual presentation. In formal CSS terminology, the program that presents a document to a user is called a user agent (UA). A browser is just one kind of UA. However, in Part I of this tutorial you will only work with CSS in a browser.

For some formal definitions of terminology relating to CSS, see Definitions in the CSS Specification.

[edit] Action: Creating a document

Use your computer to create a new directory and a new text file there. The file will contain your document.

Copy and paste the HTML shown below. Save the file using the name doc1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html;
  charset=iso-8859-1">
  <title>Sample document</title>
  </head>

  <body>
    <p>
      <strong>C</strong>ascading
      <strong>S</strong>tyle
      <strong>S</strong>heets
    </p>
  </body>
</html>

In your browser, open a new tab or a new window, and open the file there.

You should see the text with the initial letters bold, like this:

Cascading Style Sheets

What you see in your browser might not look exactly the same as this, because of settings in your browser and in this wiki. If there are some differences in the font, spacing and colors that you see, they are not important.

[edit] What next?

If you had difficulty understanding this page, or if you have other comments about it, please contribute to its Discussion page.

Your document does not yet use CSS. On the next page you use CSS to specify its style: Why use CSS?