3.0 Attributes
Extra information can be added to the tags of most elements by the addition of attributes, of which there are many. These attributes can control behaviour such as background and foreground colours, text fonts and sizes, border styles, margins size, padding etc. In other words, they can be used to add styling to web pages. Some attributes are intended for one particular element, while others can be used for many different elements.
Attributes are now generally specified as CSS properties, and in a seperate file rather than inline with the HTML code, but for this introduction they will be applied to the HTML (as they used to be) and from here on will be displayed in green for ease of recognition.
The Style Attribute
An excellent place to start is with the style attribute. The style attribute is pretty versatile and can be used to add styling and layout to the pages of a website. For example:
<h1 style="color:blue;">A blue heading</h1>
Here we have told the browser that we want the content of the header tag <h1> to render in blue by setting the value "color" to blue. This would look like this in a browser:
A blue heading
Attributes are written within the opening tag and are followed by an equals sign with the attribute details written between inverted commas. The semicolon is used for separating additional different style commands. Take note that some tags and attributes use US spellings, such as color as opposed to colour. The following example will show a green page in a browser:
<html> <head> </head> <body style="background-color:green;"> </body> </html>
Here we have added the style attribute to the <body> tag, with the value "background-color" set to green. Any colour can be set, and this will be dealt with next.