This work is licensed under a Creative Commons License.
Until now we have limited our attribute changes to in-line tags. The <style> tag allows us to perform both in-line, in-header, and external link style changes.
Before, we used the font color attribute to change a headline tag's color:
Tag:
<font color="maroon"> <h1>Headline</h1></font>
Result:
Headline
Now we can achieve the same effect with the in-line style tag:
Tag:
<h1 style="color:maroon;">Headline</h1>
Result:
Headline
By placing our style tag in the header of an HTML document we can use the style tag to modify every instance of a tag throughout the document. So, if you want all of your <h3> tags to look a specific way you can use a single tag in the header to modify them all.
Let's say we want all of our h3 tags to:
- have pale green text
- have a ForestGreen background
- be bolded
- to be 24pt text
- to have an Arial Black font
- to be underlined
For a result of:
Headline
Use this code to create this effect:
**Place within the <head> tags!!**
<style>
h3 {
font: 24pt Arial Black, Arial;
color:palegreen;
background-color:ForestGreen;
font-weight: bold;
text-decoration:underline;}
</style>
This saves a lot of space within your code and helps keep the text part of your document easier to edit. Essentially, you store a long list of attributes out of the way in the header tags. The style tag can be used to modify any of a long list of HTML tags. The syntax is the same for them all, the difference being the name would be different. So, the h3 could easily be replaced with h4, or body, or whichever HTML tag you want to modify.
HTML has a kind of sister document called a CSS, or Cascading Style Sheet. Using a css requires that you create an entirely separate page saved with a .css extension that contains nothing but style attributes.
Here is an example of what the content of an external style sheet looks like:
/*CSS Style Sheet*/ body.pg1 {font: 14pt Calligrapher, Arial Black, Dauphin, Arial; background-color: blue; color: white; a {color:white; text-decoration: none; font-weight:bold;} div {color:Moccasin; text-decoration: none; font-weight:bold;}
Example of filename: yourstylesheet.css
***You might have to actually add the .css when you type in the file name so that it is saved in the proper format.***
After you have created an external style sheet, you have to link it to the HTML documents you want it to effect. This is the code you will need to do this:
<link rel="STYLESHEET" type="text/css" href="yourstylesheet.css">
Place this code in the <head> section of the document.
| (<< Back) | [Home] | (Next >>) |