Declaring a style sheet (CSS)

December 2016

Declaring a style sheet

Style sheets are not directly integrated into the W3C's HTML recommendations. For this reason, you need to include elements in the HTML code indicating both the type of document, meaning the version of the HTML and CSS recommendations used by the pages, and the styles themselves.

Document Type Declaration

In the HTML page, you need to include a document type declaration, a reference to the HTML standard being used. The declaration is made by adding a line like this one:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>...</HEAD>
<BODY>Page content</BODY>
</HTML>

What's more, a metatag can be used to tell the browser or search engines which language has been used for defining style sheets. This metatag, included in the HTML header of the document, is as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
</HEAD>
<BODY>Page content</BODY>
</HTML>

Incorporating styles

The styles may be incorporated within the HTML document in four different ways:

Document style

Style sheets in a web page are declared with the STYLE tag, placed within the tags <HEAD> and </HEAD>.

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

Style definitions;

-->
</STYLE>

</HEAD>
<BODY></BODY>
</HTML>
The attribute type="text/css" in the <STYLE> tag is used to specify the stype of style sheet being used. The comment tags <!-- ... --> are used to stop older browsers, which do not support style sheets, from displaying this information on-screen.

Inline style

You can also define a style within a document tag. This sort of declaration is called an inline declaration.

This method for defining style sheets is not recommended, as it runs counter to the very purpose of style sheets, as the style is being embedded within each element separately. Nonetheless, it may be used to define a special style for a particular HTML element, which does not need a universal definition.

To define an inline style, simply add the STYLE attribute to the HTML tag to which you wish to apply a particular style:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
...
</HEAD>
<BODY>
...
<TAG Style="style:value;"> ... </TAG>
...
</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

Here is an example of a style applied to an <H1> tag:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
...
</HEAD>
<BODY>
...
<H1 Style="Font: 18px Verdana; font-weight:bold;"> Title </H1>
...
</BODY>
</HTML>

External style

Being able to store style sheet definitions outside of the document is a plus, as it is therefore possible, by editing the file containing the style sheets, to change the look of all the web pages which use that sheet.

First, you need to create a text file containing style sheets, whose extension is .css, such as style.css:

<!--
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
body {background-image: home.gif;}
LI {font: 13px Verdana;}
B {font: 14px Verdana; font-weight: bold;}
A {
font:12px Verdana;
font-weight: bold;
color=black;
text-decoration: none;
}
H1 {font: 16px Arial;font-weight: bold;color=black;}
H2 {font: 14px Arial;font-weight: bold;color=black;}
-->

Next, in every HTML page, add a shortcut to the page containing the style definitions:

<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="style.css">
</HEAD>
...
  • The <LINK> tag lets the browser know that it has to look for a document located outside the HTML page.
  • The attribute rel="stylesheet" specifies that the document in question is an external style sheet.
  • The attribute type="text/css" specifies the type of style sheet.
  • The attribute href=" URL " shows the URL of the style sheet (its location on the Internet)

Imported style

The W3C's recommendations also offer a final way to include style sheets in a document: by importing style sheets. It is possible to import external style sheets when declaring the document's style by inserting the command @IMPORT immediately after the style tag:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
@IMPORT URL(url of the sheet to import);

Definition of document styles;

-->
</STYLE>
</HEAD>
<BODY></BODY>
</HTML>

Note: If there are multiple imported definitions all affecting the same tag, only the last one will be utilised by the browser.

The <SPAN> and <DIV> tags

Sometimes, within a single paragraph, you need to apply different styles to certain text segments, and this is what the <SPAN> and <DIV> tags are used for.

The <SPAN> tag

The <SPAN> tag is used to apply styles to segments of a paragraph.
It can be used with either ID or CLASS.
Its syntax is:

<SPAN class=Name_of_class> Text </SPAN>

The <DIV> tag

Instead of applying to a few words within a paragraph, the DIV tag applies to a block of text, which may be one or several paragraphs.

The DIV tag's syntax is:

<DIV class=major> paragraphs </DIV>

Cascading styles

Multiple styles can be defined by using the different methods of implementing CSS. For this reason, invoking several external style sheets results in what is called a cascading styles, a combination of styles for various HTML elements. If multiple styles affect the same element, only the last one will be kept.

<LINK rel=stylesheet type="text/css" href="style1.css">
<LINK rel=stylesheet type="text/css" href="style2.css">
<LINK rel=stylesheet type="text/css" href="style3.css">

If multiple conflicting styles are found in the external style sheets, CSS recommendations allow users to choose between several alternative style sheets using the rel attribute of the STYLE tag, combined with the TITLE attribute for selecting them by name:

<LINK rel="alternate stylesheet" type="text/css" href="style1.css" title="style1">
<LINK rel="alternate stylesheet" type="text/css" href="style2css" title="style2">
<LINK rel=stylesheet type="text/css" href="style2.css">

What's more, when multiple styles are invoked within a page using the various possible inclusion methods, and some styles conflict, the style closest to the content is the one applied. The priority, in descending order, is as follows:
Inline style > Document style > Imported style > External style


Related :


Declaración de una hoja de estilo (CSS)
Declaración de una hoja de estilo (CSS)
Deklaration eines Stylesheets (CSS)
Deklaration eines Stylesheets (CSS)
Déclaration d'une feuille de style (CSS)
Déclaration d'une feuille de style (CSS)
Dichiarazione di un foglio di stile (CSS)
Dichiarazione di un foglio di stile (CSS)
Declaração de uma folha de estilo (CSS)
Declaração de uma folha de estilo (CSS)
This document entitled « Declaring a style sheet (CSS) » from CCM (ccm.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.