Category (for example, list, table)
● Description
Ensure that the table utilizes the thead and the tbody elements.
Provide a caption for the table.
The first few rows of the table may look like Figure 3.7.
Reference
Please select the video for Lesson 3 online at www.wrox.com/go/html5jsjquery24hr . You will also be able to download the code and resources for this lesson from the website.
Lesson 4
Introduction to CSS
The first three lessons of the book introduced you to a large number of tags, but it has so far not been possible to style the presentation of these tags when they appear onscreen. As mentioned, HTML5 has removed most of the remaining presentation-based tags and attributes, and presentation and style are instead the responsibility of another technology called Cascading Style Sheets (CSS).
The main reason for this is a concept called “separation of concerns.” The HTML markup language is responsible for providing the content of the page, while CSS is responsible for the presentation and styling of this content. This means it is possible to change either without affecting the other.
For instance, it is usually possible to completely restyle an existing web page without changing the HTML at all. Additionally, it is possible to change the content of a web page without needing to change the CSS at all.
This lesson will introduce the fundamentals of CSS, and will mainly focus on the way individual elements can be styled. In the next lesson, you will consolidate this knowledge, and also look at how CSS behaves when elements interact with one another.
The HTML5 specification includes a companion specification called CSS3 – version 3 of Cascading Style Sheets – that greatly enhances the power of CSS. You will look in-depth at CSS3 later in the book, but for the next two lessons you will focus on the fundamentals of CSS.
Note
The capabilities of CSS are truly astounding, so this lesson will not introduce you to everything CSS can do. The aim of this lesson is instead to provide you with a sound understanding of the fundamentals: once these are understood it is easy to find information about specific features.
CSS Selectors
In this section, you will get started with CSS by styling the web page developed in Lesson 2. This page utilized header and paragraph elements to format text, and also included images and hyperlinks. Ensure you have the following HTML available to work with in this section:
As you will see, CSS can be included in a web page in three different ways. This section will focus on a single approach: adding CSS within a style element in the head of the web page.
In order to apply a style to an element, you first need a way of selecting the elements that you wish to style. CSS provides four key selection mechanisms, the most simple of which is to select the elements based on their tag name. For instance, if you wanted to select all the h1 elements in the document and display them in a red font, you could add the following to the head section:
If you refresh the web page, the top header will display in red.
Note
A number of colors can be referenced directly by name, but it is more common to represent colors as a string such as #FF0000. This is a hash, followed by three sets of hexadecimal numbers specifying the ratio of red, green, and blue respectively. There are many resources online for finding colors using this format, and you will see many examples throughout this book.
This simple example demonstrates most of what you need to know about the syntax of CSS. You start by specifying the selector: h1 in this case. Next, you place a set of stylistic properties between curly brackets where each stylistic property is in the form of a name/value pair. In this case, the name of the property is color (technically this is foreground color), while the value is red. A colon separates the name and value, and the whole construct is concluded with a semicolon. I will refer to this entire construct as a CSS rule.
It is possible to add multiple stylistic properties to the same selection. The following rule also specifies the font-family and the fact that the text should be underlined.
Figure 4.1 shows the result.
The font-family property has a more interesting value than color. Many fonts are proprietary; therefore, you cannot be sure which fonts the user's browser will provide. The value of the property therefore contains a list of fonts in priority order. In this case, the value states:
● Try to use Arial if it is available.
● If that is not available use Helvetica.
● If that is not available use any sans-serif font.
Imagine now that you want this style to apply to all the headings in the web page. Obviously, you could duplicate this rule three times and select h1, h2 and h3 in three separate rules. You always want to avoid duplication if you can, however, because it leads to maintenance issues.
There are, in fact, two ways you can achieve this without duplication. The first is by specifying the three different tags separated by a comma:
A more elegant solution, however, is to use classes. Any element can be assigned one or more classes with the class attribute. A class is just an arbitrary name you choose and usually describes some aspect that a set of elements have in common. For example:
In this case, redHeader is the class name. It is then possible to style all elements with this class using the following selector:
Notice the dot at the start of the selector: This always implies that you are selecting elements by a class. If you redisplay the web page, all three headers will display with the specified properties.
If you want to assign two classes to an element, the class names are separated by a space. For example:
