What is CSS?

Summary

The article introduces you to Cascading Style Sheets, or CSS, defining what they are, and what they are used for on the Web.

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

About CSS

Cascading Style Sheets (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 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, also called modal windows, of an application are often documents. Such dialogs may also be structured using a markup language, like XUL. This is often the case in Mozilla applications, but is not the common case.

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:

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.

Presenting a document to a user means converting it into a form that humans can make use of. Browsers, such as Opera, Firefox, or Internet Explorer, are designed to present documents visually — for example, on a computer screen, projector or printer.

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.

Action: Creating a document

Create a new directory and open a text editor.
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>
   <link rel="stylesheet" href="style1.css">
   </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.

Compatibility

Desktop

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
CSS	Supported (when?)	Supported (when?)	Supported (when?)	Supported (when?)	Supported (when?)

Mobile

Feature	Android	BlackBerry	Chrome for mobile	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Opera Mini	Safari Mobile
CSS	Supported (when?)	?	?	Supported (when?)	?	Supported (when?)	?	Supported (when?)

Compatibility notes

Browser	Version	Note
Lynx	all	Lynx does not support CSS very well

Search

learning what css is

How to Use