Styles: Linking & Inline
Style Sheets - Linking
To create one page that defines the elements and point the
pages you want to affect to this page, all you need to do is have the following HTML on
your page:
<html>
<head>
<title>D.J. Quad's Ultimate Style Sheets Tutorial</title>
<link rel=stylesheet href="http://www.quadzilla.com/stylesheets/style.css"
type="text/css">
</head>
<body>
...
</body>
</html>
The source from this page would be on this page. The file style.css contains all the Style Sheet elements and definitions:
BODY {font: 10pt "Arial"}
H1 {font: 15pt/17pt "Arial";
font-weight: bold;
color: red}
H2 {font: 14pt/16pt "Courier New";
font-weight: bold;
color: blue}
P {font: 10pt/12pt "Arial";
color: blue}
Don't worry if the style sheet definitions don't make sense
yet, they will be explained later.
You may have noticed there are the <!-- --> (comment) Tags
surrounding the text inside the <STYLE>
</STYLE> Tag. This is for the browsers that don't
support Style Sheets. It prevents the text inside from being shown. If the <!-- --> Tags weren't
there, the browser would interpret the text and display it as part of the page.
Style Sheets - Inline
Inline Style Definitions affect individual occurrences of a
Tag. These are within the Tag itself using the STYLE parameter. The following HTML code
indents a specific <P> Tag:
<P STYLE="margin-left: 1.5in; margin-right:
1.5in">
This would cause everything inside the <P> </P>
Tags to have a margin, both on the left and right, of 1.5 inches.
If the inline style conflicts with an embedded or linked
style, the inline style overrides for that occurrence.
<P STYLE="margin-left: 1.5in; margin-right:
1.5in">
For example, if the line above appears on a Web page that
defines <P> with 1-inch margins through a linked style sheet, all paragraphs on the
Web page will get 1-inch margins except for the <P> above, which will get 1.5-inch
margins.
If you want to change the appearance of an entire section,
you can use the <DIV> tag to define styles globally for that section. The following
example changes the color and point size of a block of text by using the <DIV> tag
(this has the same effect as assigning these styles separately for the <H2>,
<UL>, and <LI> tags):
<DIV ALIGN="center"
STYLE="font-size: 12pt; color: blue">
<P>The style specification affects everything on this page until the DIV close
tag.</P>
<UL>
<LI>This is blue, 12 points, and centered.
<LI>So is this.
</UL>
</DIV>
<P>But this isn't</P>
Here is how it overrides (only works in IE):
The style specification affects everything on this page until the DIV close
tag.
- This is blue, 12 points, and centered.
- But this is black!
But this isn't
|
