Style sheets (CSS)
Learn to set the graphic look (pagination, colours, fonts)using the CSS (Cascading Style Sheet) statements.
Getting started
A style sheet is a text file containing one or more statements defining the page appearance.A style sheet file has the .CSS extension.
BODY { background: purple; color: white; }
It defines the page colours: white for the text, purple for the background.
There are 16 colours with a name:
|
This test page uses example.CSS as style sheet:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Test page</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<LINK type="text/css" rel="stylesheet" href="example.css">
</HEAD>
<BODY>
<P>
Background is purple. Text is white.
</P>
</BODY>
</HTML>
Try this:
- Open Notepad: copy the style sheet code and save it as example.css
- copy the test page code and save it (in the same directory) as test.htm
- open test.htm and see the result.
Embedded style sheet
A style sheet can be integrated in the <HEAD> section, this way:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Embedded CSS page</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<STYLE type="text/css">
BODY { background: black; color: green; }
</STYLE>
</HEAD>
<BODY>
<P>
Background is black. Text is green.
</P>
</BODY>
</HTML>
Cascade
An HTML page can use more style sheets at the same time, doing the sum of their properties.The meaning of the name "Cascading Style Sheets" comes from this feature.
For example:
if we have a style sheet named style1.CSS with the following statement:
BODY { background: white; color: black; }
...and another style sheet named style2.CSS with the following statement:
P { background: red; color: yellow; }
...we can use style1.css and style2.ccs sheets in the same HTML document, simply writing in the HEAD section:
<LINK type="text/css" rel="stylesheet" href="style1.css"> <LINK type="text/css" rel="stylesheet" href="style2.css">
Next page :
the basic syntax rules of Cascading Style Sheets.