Getting Started with CSS3
CSS3 Basics - Part 1
Forward: This is the first part of a series of tutorials on Cascaded Style Sheet 3. In the whole series, there are code samples that you can try. In this part of the series, I give you a feel of cascaded style sheet.
By: Chrysanthus Date Published: 23 Jul 2012
Preamble
To achieve this presentation, CSS has a very large set of properties and values in different 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 like instructions (which you can also call function or methods) to the web page to do something. 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 3. In the whole series, there are code samples that you can try. In this part of the series, I give you a feel of cascaded style sheet.
Versions
There is CSS1 and there is CSS2 officially. For about 10 years today, there is CSS3, which is still not yet an official version of CSS. However, many of the features in CSS3 are already in use by browsers and web site designers. If you do note start learning CSS3 now, you will just be late in the competitive world of website design.
Browsers
The latest version of all the browsers, support many of the features of CSS3. The major browsers are Mozilla Firefox, Opera, Chrome, Safari and Internet Explorer (IE9).
Prerequisite
In programming, the most important prerequisite is mathematics. If you succeeded in your elementary school mathematics, then that is enough for you to learn CSS (CSS3). If you are learning CSS, then I believe your aim is to become a web site designer. After learning HTML and CSS, the next thing you have to learn is ECMAScript, which is a computer language (standard) that enables the website designer to make a web page very interactive.
You need to have covered the following two series before starting this one:
In this part of the series, I will let you get a feel of CSS before we actually dive into its principles (in the rest of the series). In this part, you will have an overall understanding of CSS. As such, the rest of the chapter will be easy to understand.
HTML Style Attribute
All HTML visible elements have the style attribute. The value of this style attribute is CSS code. Since CSS is now at CSS3, the value should be CSS3 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.
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. 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 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 a 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).
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, with color black. The Paragraph element has both a background color and a foreground color; blue and red respectively.
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, and continue fast (assuming you have understood this part).
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT