PART TWO

CSS

In the previous section we discussed the important role that HTML plays in the creation of a website. We even built our own HTML webpage making use of the various tags that form the core of all websites we see in production today. You might have noticed that up until this point, the webpage we have created is looking rather on the basic side. A far cry from some of the more visually stimulating websites we all use on a daily basis. Well, this is where CSS (cascading style sheets) come into play. CSS is responsible for styling the HTML that we write. It has the power to take our bland website and turn it into a beautifully constructed masterpiece.

CSS can completely transform a website without needing to alter the HTML at all.

In Figure 4.1 we can see three webpages with completely different styles. They are almost indistinguishable from one another. Their HTML is identical, but their CSS is vastly different. This example should help you to start to understand the power and flexibility of CSS.

4.1

This section will see us through the journey of understating the link between HTML and CSS and the possibilities that CSS affords us when creating a visual style for our webpages. We will explore how CSS works at a basic level, and its relationship with HTML. We will then dive further into the concepts and rules that form CSS, before finally moving on to constructing our own CSS code for use on the webpage we created in the previous section.

By the end of this section you will have a firm grasp on how to construct CSS code and will be well equipped with the ability to transform any webpage into a work of art.