A style sheet can be defined as a template that format the HTML commands of a web page according to a definition made by the author. In other words, style sheets allow redefining the role of some HTML commands that format the text. For example, you can use a style sheet to change the standard text colour, the font and size of the headers, the margins of a page, the background colour, or a figure.
Functionality
Style sheets where introduced in internet explorer 3.0. At the time this episode was written, Internet Explorer 4 and navigator 4 browsers supported the use of Style sheets with some differences. Like many extensions of the HTML language, style sheets have no effect in a browser that does not support them.
Before proceeding, take a look at the two HTML documents displayed in the two frames generated by the SS00.HTM example. The HTML codes of the two documents are identical. The difference is that the document on the left has a style sheet definition applied.
If you load the SS00.HTM example, you will see that in the frame on the left the standard text is green, the H1 header is brown, and the H2 header is the blue. Also note that one of the paragraphs is red.
Below is the same page viewed with navigator 2.0:
The two frames have the same appearance, as this browser does not support the style sheet feature.
Below is the code of the two programs displayed in the two Windows. The SS01.HTM program has the <STYLE> command redefining the display characteristics of the the text in the BODY section, including the level 1 and 2 headers and the text enclosed by the <P> command.
SS01.HTM Program:-
<html>
<head>
<STYLE>
<!--
BODY {font: 10pt "Arial"; color:green};
H1 {font:20pt/22pt "Arial"}; font-weight: bold; color: maroon}
H1 {font: 15pt/17pt "Arial "; font-weight: bold; color: blue}
P {font: 10pt/12pt "Arial"; color: red}
-->
</STYLE>
</head>
<body bgcolor="#FFFFFF">
<h1>Header generated with the H1</h1>
This page has the same command as the page at the side
<h2>This is a header generated with the H2</h2>
This is the normal text,<br>
Created without any special formatting<p>
by typing,</p>
on the keyboard.
</body>
</html>
Let's analyze one of the items modified:
H1 {font: 20pt/22pt"Arial"; font-weight: bold;
In this case, the <H1> command has its font size changed to the size 20/22 points, using the Arial font. The font should be displayed in bold and maroon.
BODY {font: 10pt "Arial"; color:green};
In this example, the text in the <BODY> command is specified as green, Arial font, and size 10 points.
Basic Syntax
A style definition consists of the specification of an HTML command followed by a list of properties that are applied to the command and are enclosed in brackets. Each property is identified by the property name followed by a colon and the value to be attributed to it. For example:
{property: value}
More than one property may be specified for a certain command, provided they are separated by semicolon.
BODY {background: url (textura.jpg) blue; color:yellow}
Several commands may be grouped so that they receive the same properties. They should be separated by commas.
H1, H2, H3 {color: green; font-family: Arial}
Applying Style
There are three ways to apply a stylesheet to an HTML document:
Linking- In this case, style sheet external to the HTML document is linked to it through a special link. This technique allows a single style sheet to change the appearance of numerous pages based on its specification.
Embedded- In this case, style sheet is embedded in an HTML document. Changing the style sheet modifies only the document that contains it. The first example in this chapter uses this method.
Inline- This method allows redefining only one tag or block of tags directly in the line in which the command is specified in the HTML document.
Linking:-
To link the current page to an external style sheet, you must first create a text file with the desired style definitions. This file should have the CSS extension. To link the page to the style sheet, the <LINK> command should be used in the HEAD block, as shown below:
<html>
<head>
<title>ss03.htm - Linking</title>
<link rel=stylesheet href="standard.css" type="text/css">
</head>
<body>
<h1>Header level 1</h1>
normal text<br>
<i>italics text</i></p>
differentiated paragraph</p>
normal text<br>
<h2>Header level 2</h2>
</body>
</html>
See the executed program:
The <LINK> command specified to the HTML document that it used the style definitions contained in the STANDARD.CSS file, which is in the same directory as the document. If it where is another directory of for web server, the complete URL path would have to be specified.
STANDARD.CSS File:-
<STYLE>
<!-- BODY {font: 10pt "Arial"};
H1 {font: 20pt/22pt "Arial"; font-weight: bold; color: maroon}
H2 {font: 15pt/17pt "Arial"; font-weight: bold; color: blue}
P {font: 10pt/12pt "Arial"; color: red}
-->
</STYLE>
The content of this file consist of the <STYLE></STYLE> command and the style definitions of each tag to be changed.
Note that the definitions appear enclosed by the comment command, <!...-->. Without these lines, the browser would try to execute the commands.
The great advantage of this method is that you can define an overall style for your pages. Any change made in the CSS file will automatically change all the pages linked to it.
Embedding:-
To embed a style sheet in an HTML page, the <STYLE></STYLE> command should be used in the HEAD area of the HTML document. The properties declared in the STYLE block supersede any other properties of the elements found in the HTML document.
HTML Document:-
<html>
<head>
<STYLE>
<!--
BODY {font: 10pt "Arial"; color: green};
H1 {font: 20pt/22pt "Arial"; font-weight: bold; color: maroon}
H2 {font: 15pt/17pt "Arial"; font-weight: bold; color: blue}
P {font: 10pt/12pt "Arial"; color: red}
-->
</STYLE>
</head>
<body bgcolor="#FFFFFF">
<h1>Header generated with the H1</h1>
This page has the same command as the page at the side
<h2>This is a header generated with the H2</h2>
This is the normal text,<br>
created without any special formatting<p>
by typing,</p>
on the keyboard.
</body>
</html>
Note that the definition contained in the <STYLE> command must be enclosed by the comment command. Otherwise, the browser will try to execute the command definitions as if they were the commands themselves.
Inline:-
Another way of using styles without worrying about creating separate style sheets or overall page definitions is to put them in the HTML command line itself. In this case, the style definitions effects only that occurrence of the command.
SS04.HTM File:-
<html>
<head>
</head>
<body bgcolor="#FFFFFF">
<h1>Header generated with the H1</h1>
This page has the same command as the page at the side
<h2>This is a header generated with the H2</h2>
This is the normal text,<br>
created without any special formatting<p style="text-indent: 1cm; color: #FF0000">
This paragraph has a style applied to it.</p>
This paragraph contains the normal formatting<p>
<h1 style="font-size: 28pt; font-family: WeddingText BT; line-height: 22pt; color: #000080">Header generated with the H1</h1>
</body>
</html>
This is the executed program:
In this example, note that one of the <P> command had its style changed without affecting the other commands. The same happened with the second occurrence of the <H1> command.
Inheritance
Lower level elements inherit properties from higher-level elements. A text colour defined for <BODY> will be used to colour all the text of the document, such as headers and normal text, unless this definition is superseded by a specific definition for one of the elements affected. For example, the text colour defined in <BODY> is blue, and an <H1> command is specified to use the colour red.
👈Episode 13.3. Episode 14.2👉
Share This Post
PRINT THIS POST
No comments:
Post a Comment
If you have any doubts. Please let me know.