Lesson 5 - Cascading Style Sheets (CSS)
Section 1- Introduction
CSS (Cascading Style Sheets) is a programming language to style the web page. Consider it this way. We learned to erect a building using HTML5. Now we will decorate that building with colors and various feature to make it attractive and functional so that it will look like as shown below.
In other words, we will add aesthetics like colors, background colors, fonts, and other features that developers apply to the structure and content to give it its style—it's look-and-feel. We will use CSS3, the latest version approved by World Wide Web Consortium (W3C) to do this.
This is how the finished web page will look like:
First, some CSS related terminologies. So, let us jump to Section 2.
Section 2- CSS3 Related Terminologies
I hope you are doing well, so far. Here are the terminologies and their explanations that you must know in order to use CSS3. The terminologies are not grouped alphabetically. They are grouped according to the sequence you will come across in this course:
CSS: Cascading Style Sheets
CSS3: Third version of CSS
Selector: CSS selectors are the HTML elements you want to style. For example, you may like to style a paragraph. In this case p will be a selector. Similarly, if you want to style elements in body then body will be a selector.
Property: A property is what appears before the colon in any line of CSS. In the example below, the words background-color, text-align, color, are the properties.
body{background-color:#ffeec6;text-align:center;color:maroon;}
Value: A value is what appears immediately after the colon in any line of CSS. Value qualifies a property. In the example below, the “#ffeec6,” “center,” and “maroon” are the values.
body{background-color:#ffeec6;text-align:center;color:maroon; }
Declaration Block: A declaration block is the section of CSS where the property/value pairs appear. In the example below, everything found between the curly braces is a declaration block: body{background-color:#ffeec6;text-align:center;color:maroon; padding:10px; font:15pt San-Serif, Arial, Helvetica; }
CSS Comments: Comments do not appear on web pages. It remains inactive on the coding pages. In CSS code, you start a comment with /* end the comment with */ characters. You have to type them exactly like that. Here's an example: /* Stylesheet for Body */
Note: You can think of the property as the what-to-style part (height, width, color). Think of the value as the how-to-style part. For example, color:red means "make the color (property) red (value)". The CSS syntax requires that the property name should always come first, followed by a colon, followed by the value you're assigning to the property, like this, property:value. Again, using our simple color example, color: is an actual CSS property that refers to the color of the text. You can apply a color value to it. For example, red is a valid color name value in CSS. So to make the text red, you type the property:value pair like this: color:red
Section 3- Using CSS
As I mentioned before, HTML tags organize the text into different element types (headings, paragraphs, lists, tables, and so forth). We use CSS to define the style of those element types. Style refers to things like colors, fonts, size, and other artistic elements that define the look-and-feel of the page.
The syntax for CSS3 is a little different from that of HTML5. CSS syntax starts with a selector that selects (or defines) the elements to which the styling will be applied. The selector is followed by a pair of curly brackets {}, and inside those brackets, you type one or more property:value pairs separated by semicolons—something like this selector{ property:value; }
For example, in the HTML coding that we wrote, it had many elements inside tags <>. Some of those elements were body <body>, paragraph <p>, table <table>, header <header> and many more. We used Inline Style Rule to give color, font-size, etc. to those elements. For example, we wrote, <h1 style="color:red;text-align:center;"> Global Family</h1> to give “red color” and to “center align” the content inside h1 element for styling.
In CSS3 programming the above elements become selectors. That means we select those elements for styling them. In CSS3, we will write them as shown below: h1{color:red;text-align:center; }
In the above example, h1 is a selector, color is a property and red is the value of that property. Similarly, h1 is a selector, “text-align” is a property and “center” is the value.
As you may have noticed, we used a curly bracket after selector h1{. We placed a colon (:) to separate property and value then we wrote a semi-colon (;). We can write as many combinations of property and value as needed as long as we keep separating them with a semi-colon (;).
Lastly, we closed the syntax with another curly bracket }.
Before we start enhancing our web page, let me introduce you to the concept and type of style rules in the next Lesson. So, let us go there.
Note: The property:value pairs of a style rule are sometimes referred to as the descriptor because, collectively, they describe how the element/selector is to be styled.
Let us go to Lesson 6 to learn about Style Rules.