by Megan McDermott, 1 September 2010 - 6:01pm
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.
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.
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.
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!).
A CSS rule contains three basic components:
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:
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.
CSS can be included in HTML documents in three ways:
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.
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.
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:
<link rel="stylesheet" type="text/css" href="yourstylesheet.css" /><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.
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.
To discuss this article or ask questions, please visit the forum discussion on CSS fundamentals: The absolute basics.
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. Megan is also a partner and co-founder of Woolwich Web Works: A small team that can do big things!
