About CSS

Page Index

Introduction

The easiest way to format a large number of web pages is to use CSS (Cascading Style Sheets). CSS is a markup language that allows you to declare the stylistic properties of all instances of an element. So, if you would like all primary headers on every page to be red, you can declare it so in CSS. CSS centralizes all of the style components of a web page if it is used directly on that page. In this way, you can easily change the look of a repeated element on a page - you can change the color of all links, for example, by changing one line of code rather than changing the code of every link on the page.

CSS can also contain all style components of an entire site on one document if you choose to make a separate stylesheet page. In this way, CSS enables you to streamline the look of all the pages on your website, and easily make changes to every page that calls the stylesheet. Rather than making changes to every instance of an element on every page in the site, you need only change one or a handful of declarations on the stylesheet. This not only makes the web designer's life easier, but it decreases the file size of the web pages, which makes them load faster.

CSS works on the principles of cascade and inheritance. 'Cascade' basically describes the flow of the stylesheet; as the stylesheet is applied, the cascade assigns weight to different elements. 'Inheritance' describes the relation of elements in the stylesheet; certain properties are automatically applied to child elements of a parent. For example, a declaration for page background will automatically apply to the background of all elements within that page, including tables and paragraphs.

Together, cascade and inheritance determine which CSS code will be used in the document, and what that code will be associated with. Basically, all of your style setting code will be evaluated for its "weight" according to what it's specifying, how specific it is, and what order it's in. When conflicting code is present, the heavier one wins. This is usually decided by specificity (something specified for the entire body of a document is not as heavy as something specified for a paragraph) and by order (the last declaration has the most weight).

This section of the site explains some of the uses of CSS in building a website.

A CSS declaration

A CSS declaration dictates how certain elements of a website will be displayed. It consists of a property and a value for that property. This declaration is preceded by a selector, which represents the element to be modified by the declaration. The exact syntax is as follows:

selector {property: value;}

So, if you wish to make the text within a paragraph blue, you would use p(aragraph) as the selector, color as the property, and blue as the value. The syntax would look like:

p {color: blue;}

You can have more than one declaration to modify the same selector. The following would make all paragraph text blue with a yellow background:

p {color: blue; background-color:yellow;}

You can group elements in CSS declarations. You can simply make a list of all selectors you want a particular declaration to apply to. The declaration below will make all h1, h2 and paragraph text blue:

h1, h2, p {color: blue;}

You can use classes to allow multiple declarations for the same element. A class lets you set particular properties for elements that you define. For example, if you want most paragraphs to look one way, but all paragraphs that have emergency information to look another, you can set an 'emergency' class for paragraphs. This 'emergency' class is user defined, and can be styled any way you choose, regardless of the styling of other paragraph text. With the following statement, any paragraph tagged as 'p class="emergency"' will have red text.

p.emergency {color:red;}

Because the code is written in only one place, then referred to in the code of individual pages, changes are easy to make. So, if you later choose to make all emergency information green instead of red, you simply change that one line of code to:

p.emergency {color:green;}

With this small change, all paragraphs that are marked for the emergency class will become green, rather than red. Classes are useful because they make it very easy to change the style of thematic components of the page. For this reason, classes should ideally be named by theme rather than style. If you were to name the emergency class 'red' instead of 'emergency', then decide to change the color to green, the code within the page would make less sense because the green paragraphs would necessarily be marked as 'class="red"'. The more you work with code, and the more pages that you have, the more time CSS saves you. Learning basic CSS isn't nearly as time consuming as hard-coding changes like these.

Listing of CSS properties and their values

Format text, colors and style

Text

The most common use of CSS is to format text in a document. Using CSS, you can specify the font, weight and style of text on your website. Font can be declared specifically (e.g., you can declare 'Times' font for a web document). However, not all users will necessarily have the font you choose on their machines, so the font may default to their individual browser settings. This makes total control over the font impossible; however, if you wish to have some control over font selection, it is advisable to declare a specific font and a font family in your declaration. There are five font families to choose from: serif, sans-serif, monospace, cursive and fantasy. Serif and sans-serif are the most common font families.

Once you've chosen a font, you can further specify the look of the text in that font. Font-weight makes text appear either slight or bold - you can make it 'normal', 'bold', 'bolder' or 'lighter', or specify numbers between 100 and 900 at intervals of 100. You can also adjust the font-size - 'xx-small', 'x-small', 'small', 'medium', 'large', 'x-large', 'xx-large', 'smaller', or 'larger'. Using font-style, you can make font 'italic' or 'oblique', and using font-variant you can make font 'small-caps'.

Colors

CSS can also be used to organize the color scheme of a website. Like with html or xhtml, it's pretty easy to set a color for the background and for all the text on the site. However, CSS also makes it quite simple to set different background colors for different elements of the page (tables, paragraphs, a specific kind of text such as emergency text). You may also use CSS to make stylish use of image backgrounds.

By setting a foreground color, you specify the font color for the entire document. This color is inherited by all elements on the page unless otherwise specified in the stylesheet. Likewise, by setting a background-color, you specify the background for the entire document. While it is possible to set either of these elements without setting the other, it is best to set them both. This will ensure that your page is viewable no matter what the user's individual browser settings are. For example, if you were to set white as the foreground color without setting a background-color, a user's white background-color setting would render the page unreadable. However, by setting a dark blue background-color as well, you ensure that the page can be read.

Most elements can also be set to specific colors using CSS: hypertext links, paragraph text, header text, table and table cell backgrounds, heading backgrounds. The color can be controlled simply by adding color and background-color attributes to the declaration.

CSS also allows you to set a background image for your website. However, it is important to be careful in using this stylistic element. Anybody who has spent much time at all on the internet has found numerous examples of poor use of background images. Over-use of images will overwhelm a webpage. However, tasteful use will add a professional touch. With CSS, you can set an image as a background if it is uploaded to the server. You can also use CSS to make the image repeat, either throughout the page ('repeat'), in a horizontal line across the top of the page ('repeat-x') or in a vertical line across the left side of the page ('repeat-y').

You can manipulate the position of a background image, either at 'left', 'center' or 'right', or by giving a percentage of the page or a specific length. You may also make the background a constant image, rather than allowing it to scroll with the webpage, by specifying that background-attachment should be 'fixed'. Note that, when using an image as a background, it's a good idea to also set a background color just in case some color shows through the image or the image fails to load.

Hexadecimal color codes for web pages

Style

CSS allows you to manipulate the border of any element, and doing so can drastically change the feel of a website without adding much code to the stylesheet, and little or no code to the individual pages. Borders can be adjusted in three ways: you may change the width of border lines, the style of the border, and its color.

Border width can be set to 'thin', 'medium', 'thick' or to a specific length. It is possible to set each side of a border individually, in the order top, right, bottom, left. In fact, it is possible to set each side individually for style and color as well. The following code makes tables have thin borders on the top and bottom and thick borders on both sides.

table {border-width: thin thick thin thick;}

Border style can be set to 'hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset' or 'outset'. Many of these styles are somewhat self expanatory. However, the easiest way to learn the different effect each has is to try them out on a page. The following code would make a dotted border on all sides of tables.

table {border-style: dotted;}

Border color can be set to any color, using keywords or hexidecimal codes. The following code would make all borders on a table appear green.

table {border-color: green;}
W3C Schools border tutorial

More on using CSS for style

Format the layout of elements

Padding and margins

Every element produced in CSS consists of an element box. Each box contains borders, padding and margins, and these each have various property settings. Borders were discussed previously, and can primarily be used to change the style of a webpage. Padding and margins can, to some degree, be used to control the layout of the page.

Padding is the area between the border of an element and the content area. By setting its length, in pixels, ems or percentages, you can control how much distance there is between a border and, say, text or an image. When using percentages, it is important to realize that they are defined relative to the width of the element box, not relative to the page. This means that, if you change the width of an element, you also change the width of the padding if it is set at a percentage value. Like with border properties, it is possible to set padding on only one side of an element, or to set different paddings on different sides. The following code would make padding on all four sides of a table five pixels thick.

table {padding: 5px;}

Setting a margin's length determines how much blank space is created around an element. Margins can be set in pixels, ems or percentages. Percentages with margins work the same way as percentages with padding - they are set relative to the element, not relative to the page. Like with padding, it is possible to set margins on only one side of an element, or to set different margins on different sides. The following code would make the margin on all four sides of a table five pixels thick.

table {margin: 5px;}

Floating and positioning

By floating an element, you determine where in the page it appears. You can choose to float any element to either the left or right side of the page. A floated element affects the rest of the page because other content on the page will "flow around" it. By using float along with margins and padding, you can have good control over the layout of elements without the use of tables. The following code would make all tables float to the left side of the screen.

table {float: left;}

Positioning also allows you to control where elements appear in the page. By positioning an element, you define where it is located relative to other elements in the page, the web browser, or where the element would otherwise be located. The property values for positioning are 'static', 'relative', 'absolute' and 'fixed'. These values are quite complicated and require a more intimate understanding of CSS than this section offers. We therefore refer readers to external sources to learn more about this powerful positioning tool.

More on using CSS for layout

For more information

For more resources on CSS, visit the Readingroom.


User Contributed Notes
About CSS
+ Add a comment
  + View comments

Back to top Credits | Glossary | Help | Navigation | Site Map | Site Search