Based on: CSS - Syntaxe and Declaration by Jeremie Patonnier
Summary: This module explains how to write a basic Cascading Style Sheet (CSS) rule and how to attach it to an HTML page.
CSS (Cascading Style Sheets) is a description language that allows you to define the way HTML elements should be displayed in browsers or printed on paper. CSS is a domain specific language (DSL).
A CSS rule is a simple text declaration that can be embedded directly in a HTML document or put into a separate text file.
Writing CSS is easy. Let's look at a simple declaration :
CSS conceptsp {color : green;}This declaration is made of three parts.
The first part is the p. It's call a selector because it selects the rule. It allows you to say which element in your HTML document should be styled. In this case it means: "I want to style all the p elements (paragraph elements) of the HTML document".
The second part is the body of the CSS rule delimited by the brackets { ... }. Everything that will be put inside these brackets will be applied to the selector we have seen in the first part.
The third part is color : green;. This is a CSS property declaration. A property declaration is made of the property name (here it is the color property) followed by a colon, followed by the value of the property (here it iss the green keyword), ended by a semicolon. You can add as many property declarations as you want inside your rule declaration body.
CSS alone is useless. It has to be linked with an HTML document to work.
The easiest way of applying CSS rules to a HTML document is to embed them in it. To achieve that, simply use the HTML <style> element and put your CSS rules inside. This is called an internal style sheet.
<!DOCTYPE html>
<html>
<head>
<title>My first CSS experiment</title>
<style>
p {color : green;}
</style>
</head>
<body>
<p>Thanks to CSS this text should be green.</p>
</body>
</html>Embedded CSS is easy, but if you want to share your CSS rules among several HTML document, it is better to put your CSS rules inside a CSS file and link it to all your HTML documents. This is called an external style sheet. If you then change your CSS rules in the CSS file, all your HTML documents will show the change.
A CSS file is a simple text file that ends with the css file extension.
To link your CSS file with your HTML documents you just have to use the HTML link element.
<!DOCTYPE html>
<html>
<head>
<title>My first CSS experiment</title>
<link rel="stylesheet" type="text/css" href="myCSSfile.css"/>
</head>
<body>
<p>Thanks to CSS this text should be green.</p>
</body>
</html>The following code sets the font style for headings level 2 and level 3 to 'italic' whereas heading level 1 and 'emphasized' (HTML code <em>....</em>) is set to 'normal'.
H1, H2, H3 { font-style: italic }
H1 EM { font-style: normal }
Ways of setting the font size
P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }
The @font-face rule (ref.) allows you to tell the web browser to load a font from the web. With this you can make sure the web page is displayed with the right font.
@font-face {
font-family: Gentium;
src: url(http://example.com/fonts/Gentium.ttf);
}
p { font-family: Gentium, serif; }
http://example.com/fonts/ points to the website where you have made a True Type font Gentium.ttf available.
More on the @font-face rule in the cnx module Web Open Font Format.
Subsequent editions of the CSS rules specifications were published. They are called 'levels'. Level 2 revision 1 is followed by nearly all browser implementations consistently.
CSS level 3 is split into different modules which are implemented to various degrees.
Chapter 2 of the book Cascading Style Sheets, designing for the Web, by Håkon Wium Lie and Bert Bos (2nd edition, 1999, Addison Wesley, ISBN 0-201-59625-3).
You might directly read more in the CSS 2.1 specification (Level 2 revision 1) or consult one of the tutorials cited below.
First CSS (W3C CSS Tutorial)
CSS basics (longer tutorial)
CSS -- Cascading Style Sheets -- Concepts (Connexions)
More about this module: Metadata | Downloads | Version History
This work is licensed by Hannes Hirzel under a Creative Commons Attribution License (CC-BY 3.0), and is an Open Educational Resource.
Last edited by Hannes Hirzel on Jul 19, 2012 4:58 am -0500.
"Simple example which shows how to style a HTML document with CSS."