● It will help you style the different components of the table differently. Usually, the header and footer rows will be styled differently from the rows in the body of the table.
● You can add extra functionality to the table such as sorting and filtering. In this case, you would not want to sort or filter the header and footer rows.
Prior to HTML5, the table tag supported a number of attributes for controlling the presentation of the table such as the border size, the width of the table, the background color of the table, and the padding that should surround each cell. These have all been removed in HTML5, and you should not use them.
Note
In the early days of website development, it was common to use tables as a layout mechanism. This is now strongly discouraged because CSS provides more than enough power to lay out complex web pages by itself. Tables should only be used for data where data needs to be stored in columns and rows.
Try It
In this Try It, you will experiment with lists and tables. As with the previous lesson, you do not need to follow this lesson implicitly, the most important thing is to experiment with the tags and discover for yourself the way they can be combined to create interesting web pages.
Lesson Requirements
You will need the template.html file from Lesson 1, a text editor, and a web browser.
Step-by-Step
1. Open the template.html page in your text editor.
2. Start by creating a simple numbered list of all the tags that you have learned about in this lesson – for instance table, tfoot, and thead.
3. Now, imagine that you want to categorize these based on whether they are relevant to tables or lists. Try to convert the numbered list into a description list. Each category should be captured in a dt element, while the tag names should be placed in dd elements. The goal is to create a structure that looks like Figure 3.6.
4. Now you will add a table to the web page to present the same information in the same way. Create a table with the following columns:
● Tag name
● 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