Go to Previous Section:
Getting started This first section of the CSS Getting Started tutorial briefly explains Cascading Style Sheets (CSS). You'll also create a simple document to use for CSS exercises in subsequent sections.
Information: What is CSS?
Cascading Style Sheets (CSS) is a language for specifying how documents are presented to users. These documents are written in a markup language such as HTML.
A document is a collection of information that is structured using a markup language.
Presenting a document to a user means converting it into a usable form for your audience. Browsers, like Firefox, Chrome or Internet Explorer, are designed to present documents visually, for example, on a computer screen, projector or printer.
Examples
- A web page like the one you are reading is a document.
The information that you see in a web page is usually structured using the markup language HTML (HyperText Markup Language). - Dialogs in an application, also called modal windows, are often documents.
Such dialogs may also be structured using a markup language, like XUL (XML User Interface Language), which you will find in some Mozilla applications.
In this tutorial, boxes captioned More details like the one below contain optional information and links to more resources on a concept or topic covered in a section. Read them as you see them, follow the links, or skip these boxes and return to read them later.
A document is not the same as a file. You can, however, store a document in a file.
The document 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 also work with documents stored in files.
You can find more information about documents and markup languages in other areas of this web site:
| HTML | for web pages |
| XML | for structured documents in general |
| SVG | for graphics |
| XUL | for user interfaces in Mozilla |
In Part II of this tutorial you will see examples of these markup languages.
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. CSS is not just for browsers or visual presentation, but for Part I of this tutorial, you'll only work with CSS in a browser.
For formal definitions of terminology relating to CSS, see Definitions in the CSS Specification from the World Wide Web Consortium (W3C), an international community that sets open standards for the web.
Action: Creating a document
- Create a new directory on your computer to save and organize the tutorial exercises.
- Open your text editor and create a new text file. This file will contain the document for the next few tutorial exercises.
- Copy and paste the HTML shown below. Save the file using the name
doc1.html<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Sample document</title> </head> <body> <p> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets </p> </body> </html> - Open a new tab or a new window in your browser, then open the file you just created.
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 because of settings in your browser and in this wiki. Some differences in the font, spacing and colors are not important.
What next?
Go to Next Section:
Why use CSS?Your document does not yet use CSS. In the next section you'll use CSS to style your document.