|
The Inline stylesheet, the <style> tag.
First to explain exactly what a stylesheet is used for, I would like you to take a look at this page
without a style reference by clicking here. Style sheets
are used to define how our pages are going to look when completed. We can use them to define
all of the elements (tags) of our page. By utilizing a stylesheet, we can reduce the content of our
html files, and give our site a consistent look (all pages look alike). We can use one stylesheet for
all of the pages, or use the style tags for each page. So enough talk let's get started.
First we can look at the Style tag.
- Where to put the tag
The <style> tag goes at the top of our HTML document, in between
the two <head> tags. Its actual position in the head is not
important, as long as it does not come between two other tags, such as script or title.
- How to Define Styles
The syntax of the style definitions are as follows:
- Tag name (hr, p, table, h1, td, etc.).
- Definition for the tag (background-color, font-family, text-decoration, color).
And here is an example style definition for an h1 tag.
h1 {font-family: "Times New Roman"; font-size: "14pt"; font-weight: "800"; text-decoration: "underline";}
Which translates to font="times new roman", 14 point font; BOLD, underlined.
- Take a close look at the example above
The definitions starts with the tag name, h1, notice there are no angled brackets <> around the name.
Then there is a curly brace {, don't forget these. Then we start to define our tag, attribute: "definition". Remember
when defining our attributes we use a colon (:) and NOT and equals sign (=). And each definition is
in double quotes ( " " ). Following each definition is a semi-colon (;). And finally the tag definition is ended by
the closing curly brace }.
- In the next lesson I will discuss the various attributes you can define
within your style tags.
|
