Getting Started with CSS

CSS Basics – Part 1

CSS Course

Foreword: In this part of the series, I give you a feel of cascaded style sheet.

By: Chrysanthus Date Published: 15 Dec 2015

Introduction

This is part 1 of my series, CSS Basics. CSS stands for Cascaded Style Sheet. While HTML deals with the functionality of the web page, CSS deals with the presentation of the web page. Functionality means whether or not the web page operates. Presentation means the esthetic (beauty) of the page, size of HTML elements and positions of HTML elements. Animation in the web page is becoming part of CSS. So, when you talk of CSS today, you talk of beauty of the page, size and position of HTML elements, and animation. Said another way, while HTML deals with the structure of the web page, CSS deals with the rendering of the web page on screen, on paper, in speech, etc.

To achieve presentation, CSS has a very large set of properties and values in different modules (categories). You apply a number of these properties and corresponding values to an HTML element to give the element a particular presentation. Today, some of these values are actually functions that return the effective values. An HTML page has the BODY element that covers the whole page. The BODY element can have a number of properties and values to give the overall page, a special presentation.

This is the first part of a series of tutorials on Cascaded Style Sheet. In the series, there are code samples that you should try (test). In this part of the series, I give you a feel of cascaded style sheet.

Browsers
Test the code samples with modern browsers.

Pre-Knowledge
At the bottom of this page, you have links to different series you should have read before coming here; to better understand this one.

In this part of the series, you will appreciate what CSS means.

HTML Style Attribute
All HTML visible elements have the style attribute. The value of this style attribute is CSS code.

Foreground and Background Color
With the exception of HTML elements like the image element, each viewable HTML 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 HTML 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 HTML tag: an attribute value as a whole and the value of a property in the style attribute. 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 HTML 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 semicolon. 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 (pressing 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 HTML file (.htm or .html extension). Open (double click) the file in your browser. The explanation of the code is given below.

<!DOCTYPE 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 with a background color, black. 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, 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 the American “color” and not as the British “colour”.

That is it for now. Take a break and continue in the next part of the series.

Chrys

Broad Network

Related Articles

Getting Started with CSS

CSS Basics – Part 1

CSS Course

Introduction

Related Links

Comments