|
|||||||
|
Basic concepts |
|||||||
|
|||||||
|
Advanced concepts |
|||||||
|
Embedded, linked and inline style
Naming elements - the class and id attributes
So far we've discussed how you mark elements according to their types. In this section, this will be developed to allow elements to be styled.
Style sheets are used to specify the formatting of elements. A typical style sheet declaration
looks like this - color: red. Here's the declaration styling all ADDRESS elements:
ADDRESS {color: red}
Style sheets are a subject in their own right (covered by RichInStyle.com's guides to CSS2 and CSS1) and which deserve separate study. However, here's a brief introduction from an HTML standpoint.
Style may be included in three different ways:
Here's an example of each:
<HTML>
<HEAD>
<TITLE>
Embedded style example
</TITLE>
<STYLE type="text/css">
<!--
BODY {background-color: black;
color: white}
-->
</STYLE>
</HEAD>
</HTML>
<HTML>
<HEAD>
<TITLE>
Linked style example
</TITLE>
<LINK rel="stylesheet" href="style.css" type="text/css">
</HEAD>
</HTML>
<HTML>
<HEAD>
<TITLE>
Inline style example
</TITLE>
<META http-equiv="Content-Style-Type" type="text/css">
</HEAD>
<BODY>
<P style="color: red">
Some red text
</HTML>
The STYLE element may be used to specify styles about a document. There is very little to note about it except that it should include the <!-- --> tags at the beginning and end of the element to hide style sheet data from old browsers.
The LINK element is very similar except it stores the style in a separate file:
The great advantage that linked style sheets have is that by changing one file, you can affect the style of hundreds of pages to which the style sheet is linked. They also reduce file size by avoiding duplication of styles.
Style.css might look something like this:
BODY {background-color: black;
color: white}
Inline style is essentially the same as the other types except it only applies to the element to which the style attribute is applied.
Note that the style attribute applies to all elements.
In general pages are styled by using a selector (which states the elements to which style declarations apply) and one or more declarations. For example, to state that all H1 elements should be twice as large as their ancestor element, you would have H1 {font-size: 200%}. If the style were to be specified via the style attribute, you could omit the selector - style="font-size: 200%".
For example, this page is (partly) styled by:
BODY {color: black;
background: white;
font-family: Arial, sans-serif;
margin-left: 10%;
margin-right: 8%}
The only style sheet type that is used is CSS. However, since other types do exist, it is necessary to use the type attribute when you use <STYLE> or <LINK>. This should always be set to text/css. For example, <STYLE type="text/css">.
If you use inline style (style specified via the style attribute), you should declare the style language of the document. This is preferably done by setting the Content-Style-Type HTTP header to text/css, but it can be done with an HTTP header equivalent, which should be included in the HEAD of a page:
<HEAD>
<TITLE>
Title
</TITLE>
<META http-equiv="Content-Style-Type" type="text/css">
</HEAD>
Although I have already demonstrated that you can give every element of a particular type a style, and you can apply style to an element on a tag-level basis, I have not as yet explained how to set many elements to the same style.
This is done using the class attribute. E.g.:
<P class="aclass">
For example, at the bottom of this (and every page) I have a P element that has a class set to "copyright". In my style sheet I have P.copyright {font-size: 80%}, which specifies that P elements with a class of copyright should be 80% of the size of the rest of the document.
Thus classes are referred to in the same way as ordinary elements except they are prefixed by a '.' E.g.:
<STYLE type="text/css">
<!--
.cls1 {color: red}
-->
</STYLE>
The element name is optional, but P.class applies only to P class="class" whereas .class applies to DIV class="class", etc.). You should only include a-z, A-Z and 0-9 in classes. In addition, you should not start classes with numbers.
IDs are almost exactly the same as classes except they may only occur once in any document whereas classes can occur any number of times. For example:
<P id="unique">
</P>
It would also be selected in a different way - using a '#' instead of '.'.
#id {color: red}
The styles that we have discussed thus far are efficient in that they style elements according to their content, reduce file sizes and increase maintainability by being kept separately.
There are however styles that do not have this advantage but do have the advantage of being supported by very old browsers (Internet Explorer 2 and before, Netscape 3 and before).
Unfortunately, since very old browsers do not support style sheets, they are denied the styles they provide. To get around this, you may wish to use older inefficient HTML (inefficient because you need to restate the style every time you want to use it rather than just stating it once). My recommendation on this front is that it is not worth bothering except for on BODY. This is because changing BODY's background from the default gray makes a vast difference to a page whereas changing FONT tags, etc., do not. For example, I recommend that you do:
<BODY bgcolor="white" text="black">
but not:
<H1>
<FONT face="Arial">
A heading in Arial
</FONT>
</H1>
However, I do include FONT tags in my navigational table at the top: <TABLE bgcolor=black><td> <a href="../guides/" title="Tutorials"><FONT color=white><span>Tutorials</span></font></a>. This is because it is important that these look good, even in old browsers.
Colors are specified either using a color name or using a 6 digit hexadecimal number.
Here's a list of valid colors:
For example, bgcolor="blue" is the same as bgcolor="#0000FF". Note that the hexadecimal number is red green blue where the first two digits refer to the red component, the second two to the green component, and the third two to the blue component. Thus a color #12253F means a red value of 12hex, a green value of 25hex and a blue value of 3Fhex.
Five attributes are used to specify the style of the BODY (i.e., the style of the whole of the document):
Personally, I always set these attributes because CSS provides that where CSS contradicts HTML (i.e., through the background-color property), CSS wins. This means that if you set:
<BODY bgcolor="white" text="black" link="blue" vlink="red" alink="#ffff00">
if you have a style sheet that states BODY {background-color: black; color: white}, then it will override it.
There are other methods that you can use to style your document. However, I strongly recommend that you do not use them. For completeness, however, I include them here.
It is possible to specify the alignment of block elements using HTML. For example, to specify that a P element should be right-aligned, you would use <P align="right">. However, if instead you did <P class="copyright"> (or whatever the reason was for wanting the text right-aligned), you could have P.copyright {text-align: right}. If you later wished to center the text, you could just change that one line: P.copyright {text-align: center}. This demonstrates how much better CSS is for formatting than HTML - just change one line and you can change many hundreds of individual elements. If you had done this in HTML, you would have to change each and every one individually.
Valid values for align are left, center, right and justify. The default value is left for left to right text, and right for right to left text.
The CENTER element is used to center text. However, it is better to use a class and the CSS property 'text-align'. E.g.:
<DIV class="center">
<H1>
A heading>
</H1>
<P>
A P element.
</DIV>
<STYLE type="text/css">
<!--
DIV.center {text-align: center}
-->
</STYLE>
rather than:
<CENTER>
<H1>
A heading>
</H1>
<P>
A P element.
</CENTER>
because the former option allows you to change it more easily.
U is used for underlining, and STRIKE for strikethrough. E.g., <P><U>This is underlined</U>.
The FONT element is used to specify the font that should be used. It takes three attributes:
For example: <FONT size="3" face="Arial, Helvetica" color="red">. Note that size takes an integer value between 1 and 7 (where 3 is the default), or alternatively a relative size. Thus <FONT size="+2"> means 2 levels bigger than the current size. In addition, the face attribute takes a comma-separated list of font names, where if the first is not available, the second will be used.
The FONT element is strongly deprecated because other methods of styling pages are far more efficient. For example, instead of:
<H1><FONT face="Arial, Helvetica">A heading</FONT></H1>
for each and every such heading, you should instead have:
<HEAD>
<STYLE type="text/css">
<!--
H1 {font-family: Arial, Helvetica, sans-serif}
-->
</STYLE>
</HEAD>
If this were to be inserted in a LINKed style sheet, the one ruleset can be used to style hundreds of pages, instead of using the FONT element hundreds of times for each instance of H1.
That's the end of this part of the HTML guide. The next section considers links, so I suggest you click here to continue.
Copyright © RichInStyle.com 2000; all rights reserved. See copyright document for terms of use. Please visit Bukit Lawang flood appeal.