R. Craig Collins >
Web Page Design >
Styles in HTML
R. Craig Collins >
Web Page Design >
Styles in HTML
Styles in HTML © R. Craig Collins, 2005/6
As discussed in Formatting, Style property declarations have the form "property: value" and if there are several options to be used, they are separated by a semi-colon. But because there are so many possible properties, styles are best done with an editor (screen shots below). (See my list of style properties here)
But in-line styles can only let us define what EACH instance of a tag can look like. Taken one step further, we could define these modifications just once (in the head), and then reuse these style modified tags throughout the page.
That is, in the example below, since we defined the H1 tag in the style section of the head, EVERYTIME we use H1, it will be green with a yellow background, and in the Arial font.
Adding this information to predifine styles is called a style sheet. First
we start with the <style></style>
tagset in the head, followed by a comment read only by browsers that understand
styles.
Key among tags changed here are modifications on how the body behaves, instead
of adding text=, link=, etc. to the <body>.
This commented area that sets the styles follows the format selector {property: value} (without quotation marks).
Again your editor probably can build a better stylesheet than you can manually, but below is an short sample.
Example Style sheet:
<HEAD>
<TITLE>Style sheet example</TITLE>
<STYLE TYPE="text/css">
<!--
BODY {background: #FFFFCC;
margin-top: 20}
A:link {color: #300090;
background: #FFFFCC}
H1 {font-weight: bold;
text-align: center;
color: #006000;
background: #FFFFCC;
font-family: 'Helvetica', Arial, sans-serif}
-->
</STYLE>
</HEAD>
<body>
<h1>
This and every H1 will be a Headline size 1, but modified as described in the
head
</h1>
</body>
</html>
The above would display as:
| This and every H1 will be a Headline size 1, but as modified as described in the head |
(See my list of properties here)
