Chapter 3. CSS Concepts and Applications

Cascading Style Sheet (CSS) is the preferred way to style HTML. HTML has a style element and a global style attribute. These make it very easy to write unmaintainable HTML. For example, let's imagine that we have 10 elements on an HTML page for which we want the font color to be red. We create a span element to wrap the text that has the font color red, as follows:

<span style="color: #ff0000;"></span>

Later, if we decide to change the color to blue, we will have to change 10 instances of that element and then multiply this by the number of pages we have used the span element on. This is completely unmaintainable.

This is where CSS comes in. We can target specific elements/groups of elements to which we wish to apply a specific style. CSS allows us to define these styles, easily update them, and change them from one place to another.

This book will focus on the most used CSS selectors, units, rules, functions, and properties from CSS1, CSS2.1, and CSS3. For the most part, these should all work in any browser, but there are exceptions. A great rule of thumb is that newer browsers will have fewer issues.

We will get started with a quick overview of the different types of basic selectors.