CSS Core Syntax

Core Syntax

import

Perhaps the most commonly used of the at-rules, @import, is used to import an external style sheet into a document. It can be used to replace the LINK element, and serves the same function, except that imported style sheets have a lower weight (due to having less proximity) than linked style sheets.

<style type="text/css" media="screen"> @import url(imported.css); </style> import url(addonstyles.css); @import "addonstyles.css";

Relative and absolute URLs are allowed, but only one is allowed per instance of import. One or more comma-separated target media may be used here.

charset

charset is used to specify the character encoding of a document, and must appear no more than once. It must be the very first declaration in the external style sheet, and cannot appear in embedded style sheets.

charset is used by XML documents to define a character set. charset "utf-8";

namespace

The namespace rule allows the declaration of a namespace prefix to be used by selectors in a style sheet. If the optional namespace prefix is omitted, then the URL provided becomes the default namespace. Any namespace rules in a style sheet must come after all import and charset at-rules, and come before all CSS rule-sets.

namespace foo url("http://www.example.com/");

namespace can be used together with the new CSS3 selectors (see below). It defines which XML namespace to use in the CSS. If the XML document doesn't have matching XML namespace information, the CSS is ignored.

font-face

This was removed from the CSS2.1 specification, but is still used to describe a font face for a document..

font-face

{ font-family: "Scarborough Light"; src: url("http://www.font.com/scarborough-lt"); }

font-face

{ font-family: Santiago; src: local ("Santiago"), url("http://www.font.com/santiago.tt"), format("truetype"); unicode-range: U+??,U+100-220; font-size: all; font-family: sans-serif; }

media

This at-rule is used within a style sheet to target specific media. For example, after defining how an element is to be displayed (in this example for the screen), the declaration can be overwritten for print, in which case we often want to hide navigation.

p {font-size: 0.8em;} /* for the screen */ @media print { p {font-size: 10pt;} #nav, #footer {display: none;} } @media screen, handheld { p {font-size: 14px; text-align: justify;} }

The media types are as follows.

all

aural (for speech synthesizers) handheld

print projection screen braille embossed tty

tv

page

This at-rules declaration is used to define rules for page sizing and orientation rules for printing.

page {size: 15cm 20cm; margin: 3cm; marks: cross;}

You may specify how pages will format if they are first, on the left-hand side, or on the right.

page :first {margin-top: 12cm;} @page :left {margin-left: 4.5cm;} @page :right {margin-right: 7cm;}

fontdef

This is an old Netscape-specific at-rule which we should ignore.

Selectors refer to elements in an HTML document tree. Using CSS, they are pattern-matched in order to apply styles to those elements. A selector consists of one or more elements, classes, or IDs, and may also contain pseudo-elements and/or pseudo-classes.

Type Selector

The type selector is the simplest selector of all, and matches all occurrences of an element. In this example, all <p> tags throughout the document will have the following style applied, unless overridden.

p {color: #666;}

Universal Selector

The universal selector, used alone, matches all elements in the document tree, and thus will apply styles to all elements. It is in effect a wildcard.

* {margin: 0; padding: 0;}

In this example, all tags are reset to have no padding or margin. This, by the way, is a practice to gain control over all the default padding and margin inherent in the way User Agents (UAs) display HTML.

Class Selector

The class selector matches a classname.

.largeFont {font-size: 1.5em;} h3.cartHeader {text-align: center;}

The "largeFont" class will apply to all elements into which it is called. The "cartHeader" class will only function as styled if called into an H3 element. This is useful if you have another "cartHeader" declaration that you wish to override in the context of an H3 element, or if you wish to enforce the placement of this class.

ID Selector

The ID selector matches an ID. IDs are identifiers unique to a page. They bear a resemblance to classes, but are used a bit differently. IDs will be treated more fully below. The first two ID examples below refer to sections of a web page, while the last refers to a specific occurrence of an item, say, an image in a DHTML menu. IDs have a higher specificity than classes.

#header {height: 100px;} #footer {color: #F00;} #xyz123 {font-size: 9px;}

Descendant Selector

A selector can itself be a chain of one or more selectors, and is thus sometimes called a compound selector. The descendant selector is the only compound selector in CSS1, and consists of two or more selectors and one or more white space combinators. In the example below, the white space between the H1 and EM elements is the descendant combinator. In other words, white space conveys a hierarchy. (If a comma were to have intervened instead, it would mean that we were styling H1 and EM elements alike.) Selectors using combinators are used for more precise drill-down to specific points within the document tree. In this example <em> tags will have the color red applied to them if they are within an <h1> tag.

h1 em {color: #F00;}

Other combinators convey greater precision. They include the direct adjacent sibling combinator (+), the indirect adjacent sibling (or general) combinator (~), and the child combinator (>). These combinators will be treated below because they are part of the CSS2.1 specification, and are not supported in IE6.

EXAMPLE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html>

<head>

<style type="text/css">

div.ex

{

width:220px;

padding:10px; border:5px solid gray; margin:0px;

}

</style>

</head>