HTML 5 Style Attribute

HTML5 Basics - Part 13

Forward: In this part of the series we see how the style attribute can be used to give the background and foreground colors of elements.

By: Chrysanthus Date Published: 22 Jul 2012

Introduction

This is part 13 of my series, HTML5 Basics. I hope you have read all the different parts of the series (or equivalent tutorials) before reaching here. Every element that is displayed on the web page, such as the paragraph element, has the attribute called the Style attribute. The value of this attribute gives the color, size, position and other presentational aspects of the element. In this part of the series we see how the style attribute can be used to give the background and foreground colors of elements. We shall not look at the other presentational aspects.

In the previous parts of the series, I said presentation (looks) of HTML5 elements are best studied in the course, Cascaded Style Sheet (CSS). Well, we need to study a bit of it in this chapter, under the heading of “HTML5 Style Attribute”, so that at the end of this HTML5 course, you will be able to design web sites with minimum beauty.

As we said in the previous parts of the series, an element has many attributes. Know that one of these attributes is the style attribute. You do not have to use all the attributes of an element in a web page.

Note: If you cannot see the code or if you think anything is missing (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

Foreground and Background Color
With the exception of HTML5 elements like the image element, each viewable HTML5 element has a foreground color and a background color. The paragraph element for example, has a foreground color and a background color. The foreground color for these viewable elements is the color of the text. So the foreground color for the Paragraph element is the color of the text in the paragraph. The background color for any element is the color of all the area of the element behind the text. So, if the foreground color of the paragraph element is red and the background color is blue, then the text in the paragraph will appear red and all the area behind the text will appear blue.

Value of the Style Attribute
Each HTML5 element has a default presentation (default size, default color, etc). The value of the style attribute is for you to change one or more of these default presentational features (characteristics). Let us look at an example. Consider the following code:

    <p style="background-color:blue;color:red">
        text, text, text, text, text, text, text, text, text
    </p>

It is a paragraph element. It has a style attribute. The value of the style attribute is "background-color:blue;color:red". There are two parts to the value of the attribute. The first part is, background-color:blue and the second part is, color:red. In the attribute, these two parts are separated by a semi-colon.

Each part of the value of the style attribute defines a presentational feature (characteristic) of the element concerned. In the above example the element concerned is the Paragraph element. Each part of the attribute is made up of two parts. So, in this example there are two main parts in the value of the attribute and two parts in each of the main parts. In a main part, the first part (half) is the name of the presentational feature, while the second part (half) is the actual presentational feature.

In the above case, one presentational feature (characteristic) is background-color and its actual presentational feature (characteristic) is blue. The second presentational feature is color (foreground color) and its actual presentational feature is red. Now the characteristic (name of presentational feature) is called a Property of the style, and the actual characteristic is called the Value of the property. So, we talk about two values in an HTML5 tag: an attribute value as a whole and the value of a property in the style attribute. From now henceforth we shall be using the word, property, when we mean the name of the presentational feature and the phrase “property value” (or its variation or simply, value) when we mean the actual presentational feature.

A property and its value (property value) are called a property/value pair. Each property must be separated from its value by a colon. In the example above, background-color is a property and its value is blue; these two are separated by a colon. The value of the style attribute is therefore made up of one or more property/value pairs. If there is more than one property/value pair then these pairs must be separated from one another, by a semi colon. After the last pair, you do not need a semicolon. If there is only one property/value pair as the style attribute, then you do not need a semicolon after the pair. The set of style/value pairs (including any semicolon) must be in quotes (double or single).

Note: you can have a space (typing spacebar key) before and/or after a colon. You can also have a space, before and/or after a semicolon.

The following code is a simple web page example. Copy the code into a text editor and save it as an HTML5 file (.htm or .html extension). Open (double click) the file in your browser. The explanation of the code is given below.

<!DOCTUPE HTML>
<html>
<head>
</head>
<body style="background-color:black">
    <h1 style="color:yellow">The Heading of Page</h1>
    <p style="background-color:blue;color:red;">
        text, text, text, text, text, text, text, text, text
    </p>
</body>
</html>

There is a BODY element. Inside the BODY element, you have the H1 element and a P (paragraph) element. The BODY element has a style attribute with background color, black. So the whole web page is black.

Now, the property name for background color is background-color. The property name for foreground color is simply, color. The H1 element has no background color. It has only the foreground color, which is yellow. So the background of the H1 element is the same background that the BODY element has, with color black. The Paragraph element has both a background color and a foreground color, blue and red respectively.

Transparency
Elements such as the H1 or P elements in the BODY element are considered to be in front of the BODY element at the browser. Any viewable element has a background. By default this background is transparent. That is why, the user can see through the H1 element above to see the background of the BODY element (black color).

Spellings in the Style Attribute
The spelling of the property or property value must be what is official. So you must have “background-color” and not “backgroundcolor” without the hyphen. You cannot have “background_color” either; that is you cannot replace the hyphen with an underscore. For the foreground color, you must spell color as “color” and not as the British “colour”.

That is it for now. We continue in the next part. See you there.

Chrys

Broad Network

HTML 5 Style Attribute

HTML5 Basics - Part 13

Introduction

Related Links

Comments