Style syntax (CSS)

April 2015

Defining a style

Defining a style is done using simple text rules for describing the aspects of page elements. A CSS rule is characterised by two main elements:

  • A type selector, for specifying which tags in the document the style applies to;
  • A style declaration, defined within brackets, for specifying which style to apply to the selected tags. The declaration, in turn, is made up of:
    • one or more property(-ties), followed by the character ":" (a colon),
    • one or more value(s) associated with each property, surrounded by quote marks and separated by commas if there are multiple values, all followed by a semicolon.
The syntax, therefore, is:

Syntax of a CSS rule

As an example, the following syntax defines the style to apply to hyperlinks (<A> tag), specifically Verdana font, 18 pixels in size, bold and in yellow:

A {
font-family: Verdana;
font-size: 18px;
font-style: bold;
color: yellow
}

Type selectors

"Type selectors" (or "type element selectors") are the word(s) before the brackets, which indicate the documents tag(s) to which the style between the brackets apply.

To define the style of a particular HTML tag, simply use the name of the tag (without the characters < and >). For example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
<!--

tag {properties}
-->
</STYLE>
</HEAD>
<BODY>

<tag> ... </tag>

...
</BODY>
</HTML>

Multiple selectors

You can also apply a style to multiple tags, by separating the names of these tags with a comma (,). The syntax of such a selector, called a multiple selector, is:

type-selector1, type-selector2  { /* style */  }

Universal selector

With the universal selector ("*") you can define a style that will apply to all HTML elements. The universal selector's syntax is:

*  { /* style */  }
Note: The universal selector is not commonly implemented in browsers!

Nested selectors

You can select a tag within a given context, i.e. depending on what the surrounding elements are, using contextual selectors.

There are several types of contextual selectors.

  • A nested selector is used for creating a rule which only applies when element Y is nested within element X. Its syntax is:
    selector_X selector_Y { /* style; */ }

    For the following HTML code:

    <p> <i>Note</i>, this is a <b>warning</b> </p>
    <b> Please read carefully </b>
    The following rule only affects the word "warning" (the only one surrounded by <B> tags, which themselves are nested within a set of <P> tags):
    P B { font-weight: bold; color: red; } 
  • The adjacent sibling selector is used for creating a rule which only applies when element Y immediately follows element X. Its syntax is:
    selector_X + selector_Y { /* style; */ }

    For the following HTML code:

    <p> <i>Note</i>, this is a <b>warning</b> </p>
    <b> Please read carefully </b>
    The following rule only affects the word "warning" (the only one surrounded by <B> tags, which themselves follow a set of <I> tags):
    I + B { font-weight: bold; color: red; } 
  • The child selector is used for creating a rule which only applies when element Y is the descendent of element X. The rule does not apply if Y is enclosed within one or more other intermediary tags. Its syntax is:
    selector_X > selector_Y { /* style; */ }

    For the following HTML code:

    <p> <b><i> Note </i></b>, this is a <i><b> warning </b></i> </p>
    <b> Please read carefully </b>
    The following rule only affects the element "<i> Note </i>" (the only one surrounded by <B> tags, which are themselves embedded within a set of <P> tags):
    P > B { font-weight: bold; color: red; } 

Style properties

Comments

It is possible (and recommended) to document style sheets by incorporating comments that give additional information (a reason for choosing one style or another, the type of document it applies to, context, etc.) CSS comments are set off by the signs /* and */:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
/* This is a comment */
tagA {properties}
tagB {properties}
tagC {properties}
-->
</STYLE>
</HEAD>
<BODY>
...
</BODY>
</HTML>
Note: A style can be applied "in-line" to any HTML tags, except for the following: BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE
For unlimited offline reading, you can download this article for free in PDF format:
Style-syntax-css.pdf

See also


Sintaxis de estilo (CSS)
Sintaxis de estilo (CSS)
Die Syntax der Styles
Die Syntax der Styles
Commentaires CSS et syntaxe
Commentaires CSS et syntaxe
La sintassi degli stili (CSS)
La sintassi degli stili (CSS)
A sintaxe do estilo (CSS)
A sintaxe do estilo (CSS)
This document entitled « Style syntax (CSS) » from Kioskea (en.kioskea.net) is made available under the Creative Commons license. You can copy, modify copies of this page, under the conditions stipulated by the license, as this note appears clearly.