CSS fundamentals: The absolute basics

This article will begin a series on CSS fundamentals. To begin, we need to understand what CSS is and how to use it. This article will include a definition of CSS, an overview of what a CSS rule looks like, and a summary of the methods available to use CSS in your web pages.

Future articles in this series will go into some of the more complex concepts which explain why CSS works the way it does. This will include concepts such as the document flow, the box model, the cascade and inheritance. 

Contents

  1. What is CSS?
  2. Separation of presentation and structure
  3. The CSS Specifications
  4. What CSS rule looks like
  5. How CSS is applied to HTML elements
    1. Applying CSS inline
    2. Applying CSS in the document <head>
    3. Applying CSS in a separate linked stylesheet
  6. Comments
  7. Resources

What is CSS?

CSS is a mark-up language that descirbes how web pages should be displayed. In a typical web page, HTML is used to define the structure of the page. It creates headers, paragraphs, lists, tables, links, divisions, and more. CSS is then used to tell the browser how to display those elements. A collection of CSS is normally contained in a stylesheet which is then applied to the HTML page. Different CSS stylesheets can be applied to different devices. This enables you to change the display for printers or mobile devices.

Separation of presentation and structure

Using CSS to define the appearance of a web page means that the information about the design and layout is matained separately from the structure of the document (the HTML). This makes it much easier to update your design site-wide, since all the design information is in a few files.

The CSS Specifications

CSS was created and maintained by the World Wide Web Consortium (W3C). All the information about how CSS should work is contained in a specification. For the purposes of this series we will be focussing on CSS version 2.1, which contains the properties most commonly in use today. CSS version 3 is under development and some of it has been implemented by browsers.

The W3C site contains a wealth of information, including the specifications themselves, tutorials, tips & tricks, links, and more. The specifications themselves are very technical and can be confusing. Not to worry – there are many resources available to explain CSS in simpler terms (including this article!).

What CSS rule looks like

A CSS rule contains three basic components: 

  1. A selector, which chooses HTML elements to style, and
  2. Some properties, which describe which aspect of the element's appearance to change (e.g. colour, font, margin etc.)
  3. Values for those properties

A typical CSS declaration might look like this:

selector {
 property: value;
 another-property: value;
}

Notice that the properties and values are enclosed in curly brackets, and each declaration ends with a semi-colon. The entire block, from the selector to the closing bracket, is called a rule set, while the property with it's associated value is called a declaration.

The following rule will give the body of a document a light grey, darker grey text, and set the font to Georgia:

Ruleset diagram, illustrating the rule set, selector, property, and value

Note that CSS uses the American spelling of colour (color). If those colour values are confusing, don't worry! Colour values will be explained in the third article in this series.

How CSS is applied to HTML elements

CSS can be included in HTML documents in three ways:

  1. inline (inside the HTML tags)
  2. in the <head> of the HTML document
  3. in a separate linked stylesheet

Applying CSS inline

To apply a CSS property to an element inline, simply include a style attribute inside the HTML tag:

<p style="color: black; font-family: Georgia;">This is the paragraph</p>

The problem with this approach is that it mixes CSS style with the HTML mark-up, removing many of the benefits of separating presentation from structure. 

Applying CSS in the document <head>

The second method of applying CSS to an HTML document is to include it in the <head> of the document, like so:

<head>
  <title>This is the title</title>
  <meta http-equiv ... charset />
  <style type="text/css">
   body {
     background-color: white;
     color: black; 
     font-family: Georgia;
   }
  </style>
</head>

Now the style information isn't mixed in with the HTML, so this is an improvement over inline styles. However, the CSS is still included inside the HTML document and may need to be

In older examples you may see some HTML comments inside the style tags, like this:

<style type="text/css">
<!--
..... css is here ....
-->
</style>

Many years ago, this method was used to hide CSS from browsers that didn't support it. It is no longer necessary, since all browsers in use support CSS.

Applying CSS in a separate linked stylesheet

A third method of including CSS in your page is to put your CSS in a separate file and reference it from the HTML. A CSS file is a simple text file with a .css extension (just as an HTML file is a simple text file with a .html extension). You can reference it from your HTML in two ways:

  1. Using the HTML link tag:
    <link rel="stylesheet" type="text/css" href="yourstylesheet.css" />
  2. Using an @import command:
    <style type="text/css">
       @import "yourstylesheet.css";
    </style>

Like the comments trick described above, the @import command used to be used to hide CSS from older browsers, specifically Netscape 4. This is no longer necessary, but some people still prefer to use the @import method.

Comments

If you want to add in some additional information you can use comments, just as you would in HTML. It is useful to use comments to mark out sections of your stylesheet (e.g. layout, fonts, navigation etc.) or to explain unusual techniques for future reference. just don't go overboard - more text will add to your site's download time.

Comments in CSS are enclosed by a slash and an astrisk (/*), like so:

/* this is a CSS comment */

For some useful ways to use comments, and many other CSS authoring tips, read 21 ways to streamline your CSS.

Discussion

To discuss this article or ask questions, please visit the forum discussion on CSS fundamentals: The absolute basics.

Resources

Megan McDermott's picture

About the Author

Megan is co-founder and editor of A Padded Cell and administrator at The Webmaster Forums. She has been designing websites since 1997, with expertise in design, information architecture, usability, HTML/CSS, Drupal theming, and more. She is available for short-term or ongoing freelance work in any of those areas. Read her web design blog at MeganMcDermott.com or check out her portfolio.