learning what css is

Jump to: navigation, search

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

  1. Create a new directory and open a text editor
  2. 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>
  1. 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.



See also

External resources

Contributions

Attribution

This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network.