Creating Stylesheet
The reasons for the introduction of style sheets and their advantages were described in the introduction to style sheets topic. This tutorial will teach you how to create your own style sheets.
How to Define Style Sheets
To begin with, let’s take a look at the webpage code below that does not have a style sheet:
<html>
<head>
<title>Style Sheet Example</title>
</head>
<body>
<h1>Here is a H1 heading</h1>
</body>
</html>
Copy and paste the above code into a new document, and preview it. As you can see, the heading is at the standard H1 size.
Now replace the code in the document with the code below:
<html>
<head>
<title>Style Sheet Example</title>
<style>
H1 {font-size: 40pt}
</style>
</head>
<body>
<h1>Here is a H1 heading</h1>
</body>
</html>
When you preview the webpage, you will see that the size of the heading is significantly larger than when the first code was used.
The size of the heading was changed as a result of the style sheet specification. As you can see, the style sheet information was defined between the <style> and </style> elements. In the style sheet, the element to apply the style to is defined first. This is followed by the formatting information between the curly brackets - { and }.
The style sheet definition should be placed within the header of the document, between the <head> and </head> elements.
Supporting Older Browsers
Because older web browsers may not understand style sheets, and might mistaken them for webpage content, you can use HTML comment tags. This hides the style sheet information from older browsers. The example below shows how to do this.
<style>
<!--
H1 {font-size: 40pt}
-->
</style>
Defining Multiple Properties
More than one style property can be defined for each element by separating each with a semi-colon (;). For example, the following code sets the size as well as the colour for a paragraph element.
P {font-size: 20pt; color: gray}
Linking to an External Style Sheet
The advantages of style sheets become even more apparent when they are used as "external" style sheets. This is a separate file that contains your style definitions. To link a webpage to an external stylesheet, simply add the element inside the page header:
<link rel="stylesheet" type="text/css" href="filename.css">
The style sheet file you create, filename.css, would contain each style sheet definition. It does not contain any HTML elements. The code below is an example of text that could be written in the file:
body {text-align: justify}
H1 {font-size: 18pt; color: red}
H2 {font-size: 12pt; color: blue}
P {font-size: 10pt}
When saving an external style sheet in the BestAddress HTML Editor, simply choose style sheets from the save as type list when saving the file.
|
