Internal Style Sheets
In the previous lesson, we learned about how to use styles as an attribute. Now, we are going to build on that way of formatting our pages using styles. When we use style as an attribute, we have to add it each time we want to format something on our page. For example, if we want all the <h1> tags to be red, then we have to add the style attribute to each of our h1 tags. There is an easier way to do this using a style sheet.
Using the Style Tag
Inside the head tag we can define a set of styles that will apply each tag used on the page by using the <style type="text/css"> code. After placing this code, we may then set selectors (the tags) and declarations (how we format them). Look in the heading of Example 1 below:
| Example 1 |
<html>
<head>
<title>Internal Styles</title>
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>Heading of the Page</h1>
<p>This is a paragraph</p>
</body>
</html>
|
This header section where we define any styles that will be used throughout your page. In this example the h1 selector sets the color to be red for each place where h1 tags are used in the body. Notice also that the paragraphs are all set to be blue.
Syntax of the Selectors (used after the style tag)
Notice that there are two main parts: a selector, and one or more declarations. The selector is normally the HTML tag you want to style. Each declaration consists of a property and a value. The properties and values are the same as how we just learned in the previous lesson of using style as an attribute.
Declarations always need to end with a semi-colon. Declaration groups always need to be surrounded by the curly brakets. Sometimes you may separte the declaration groups into one per line (leaving a open curly bracket alone on a line before the declarations, and the closed curly bracket alone on a line at the end).
Here is a reference list that you may use to help you find properties and example values.
Practice:
|