HTML Style Sheets

Back in the day when HTML was created, it didn't have any means of styling content. Documents were rendered purely using the generic styles chosen for given elements (for e.g. making <h1> big enough, or making <b> formatted as bold, and so on).

Later on, some attributes were added to HTML to provide quick styling options to developers.

For example, bgcolor was used to control the background color of an HTML element, font was used to control the font styling of the underlying element, and so on.

But for complex styling requirements, developers had to use other means — sometimes mere work-arounds (such as using HTML tables for complex webpage layouts), sometimes pretty technical stuff (such as proprietary HTML extensions), and so on.

In short, there wasn't a simple, single way to deal with the styling of HTML documents.

Moreover, with the addition of these presentational attributes to HTML (such as bgcolor) that were purely meant for presentation concerns, the core concern of HTML, i.e. content and structure, began to get mingled with the disparate concern of presentation.

It's always a good idea to keep different concerns separate in any realm of programming, to foster easier maintainability and development, and so, in that sense, this effect was particularly troublesome for HTML.

In respect to these problems, pretty soon, a new feature of style sheets was added to HTML, in particular to HTML4.

The idea was that styling would no longer be a concern of HTML itself, but rather a concern of a separate style sheet language.

Initially, HTML erred on the side of the possibility of there being many style sheet languages added to the web, and thus provided constructs for developers to be able to specify the kind of style sheet language used in a style sheet.

CSS was one of these languages, and perhaps one that was the most naive and intuitive.

Not surprisingly, CSS ultimately became the de-facto styling language of the web. Meanwhile, the notion of being able to use other styling languages was completely turned down in favor of CSS.

Today, the one and only styling language for HTML is CSS.

So what exactly is CSS?

Let's figure that out...

In simple words, CSS is a style sheet language used to control the presentation of HTML documents. But to get more in depth:

There are two terms to understand here:

• The term 'style sheets' is used because CSS is a style sheet language.
• As for the term 'cascading', it comes from the fact that CSS intrinsically has the ability to aggregate multiple style sheets by means of cascading them, i.e. later rules taking precedence over earlier rules.

CSS was first released in 1996, and was termed as CSS 1.

Later on, refinements were made to it, along with the introduction of other bells and whistles, to produce CSS 2 in 1998. Then, after over a decade, we got the CSS 2.1 standard in 2011.

Following this, the development of CSS got broken down into individual modules, with each module evolving separately. Altogether, the modules form what we call CSS 3.

CSS 3 is by far the most popular development of CSS, introducing tons and tons of shiny features to the styling language, including animations, transitions, transformations, grids, flexbox, more powerful selectors, and so on.

The traditional route of learning web development is to begin with HTML (which you're learning right now), then move to CSS, and finally to JavaScript, to complete the core web triad.

Keep in mind that CSS is a completely different language than HTML; in fact, it's not even a markup language. It has its own syntax, own terminology, own parser in the browser, and so on.

And CSS is quite huge. Like literally, very huge!

There are a host of stylistic concerns that can be addressed using CSS, in a multitude of ways.

Once you're done with HTML, we have a separate course on CSS to explore this mammoth technology.

But just for some excitement and for the sake of covering a couple more HTML elements, we'll quickly go through the very basics of CSS in this chapter, and work with a couple of its commonly-used style properties.

But first, we need to be addressed on where exactly to write the CSS associated with an HTML document.

We saw the <link> element in the HTML Metadata chapter for linking in style sheets. Do you recall how?

Well, the <link> element's rel attribute is set to "stylesheet" in order to refer to a CSS style sheet; the href attribute specifies the address to the style sheet.

The style sheet linked to via the <link> element is referred to as an external style sheet. It's a CSS file, with a .css extension, containing only CSS code.

Let's link in an empty CSS file on an HTML document before exploring a couple of handy CSS properties and then using those in this CSS file to style the underlying document.

We'll start off with the basic HTML boilerplate code along with a couple of other elements, as shown below:

<!DOCTYPE html>
<html>
<head>
   <title>Working with CSS</title>
</head>
<body>
   <h1>Working with CSS</h1>
   <p>CSS stands for Cascading Style Sheets.</p>
</body>
</html>

The <link> element goes into the <head> section, with its rel attribute set to "stylesheet" and its href pointing to the CSS file, which is in the same directory (notice that the href contains a relative-path reference).

<!DOCTYPE html>
<html>
<head>
   <title>Working with CSS</title>
      <link rel="stylesheet" href="style.css">
</head>
<body>
   <h1>Working with CSS</h1>
   <p>CSS stands for Cascading Style Sheets.</p>
</body>
</html>

Now, let's create our CSS file, style.css.

In the same directory as the HTML file, create a new file named style.css:

With this, our HTML document successfully loads the style.css style sheet. Perfect!

It's now time to add some CSS to the style sheet. This is covered in the following snippet.

p {}

p { background-color: yellow }

p { color: red }

p { background-color: purple;color: white }

p {
   background-color: purple;
   color: white
}

p {
   background-color: purple;
   color: white
}

p {
   background-color: black;
}

We'll give the document a pink background color, the <h1> a purple (text) color, and the <p> elements an indigo color.

Here's the code of the style.css file:

body {
   background-color: pink;
}

h1 {
   color: purple;
}

p {
   color: indigo;
}

With this in place, let's take a view of our HTML document:

Live Example

It's absolutely stunning, isn't it?

There are many benefits of using external style sheets for the application of styles to HTML documents.

One reason is that because external style sheets are external resources, they can be cached, i.e. temporarily saved in memory for quicker access, by browsers. Secondly, external style sheets help us clearly separate the two concerns of content (and structure) and presentation from one another — the content goes in the HTML while the presentation goes in the external CSS file.

Moving forward, while the <link> element is a useful way of linking to a style sheet, it isn't the only way to avail the awesomeness of CSS in an HTML document.

There are two other ways: the <style> element and the style attribute.

We explore both of these in the remainder part of this chapter below.

Sometimes it's desirable to have style sheets occurring right inside an HTML document instead of having them in separate files.

For instance, we might not have that many CSS styles to mandate a separate CSS file for them, or we might want to override the styles of an external CSS file for a particular document using a style sheet defined directly inside it.

And that's exactly where the <style> element comes in.

The <style> element can appear in either <head> or <body>, or even both. It's up to you where you find it convenient to put your <style> element.

Commonly, style sheets denoted via <style> are referred to as internal style sheets, as they occur internally within the HTML document.

Akin to an external CSS file, the content of <style> is purely CSS code. All the rules that apply to external style sheets also apply to internal style sheets — external and internal style sheets only differ in where and how they are added to an HTML document; apart from this, they are completely identical.

Let's take an example of styling an HTML document using the <style> element.

We'll go with the same styles as shown in the section above, for customizing the styles of <body>, <h1> and <p>.

For a quick review, here's our HTML to begin with:

<!DOCTYPE html>
<html>
<head>
   <title>Working with CSS</title>
</head>
<body>
   <h1>Working with CSS</h1>
   <p>CSS stands for Cascading Style Sheets.</p>
</body>
</html>

And now here's our <style> element in it, with the given styles:

<!DOCTYPE html>
<html>
<head>
   <title>Working with CSS</title>
   <style>
      body {
         background-color: pink;
      }

      h1 {
         color: purple;
      }

      p {
         color: indigo;
      }
   </style>
</head>
<body>
   <h1>Working with CSS</h1>
   <p>CSS stands for Cascading Style Sheets.</p>
</body>
</html>

Let's now see the resulting document:

Live Example

Just as before.

As is evident here, the styles applied via <style> are absolutely identical in their application to the ones applied via an external style sheet (as we did above).

We can have as many <style> elements on an HTML page as we want to. And once again, styles appearing in later <style> elements cascade styles appearing in earlier <style> elements.

If we wish to style only a particular element in an HTML document, using a whole style sheet might be just too much for such a straightforward task.

We're better off at using the style attribute on the element in this case.

The content of the style attribute is CSS code. However, the style attribute is pretty limited in what could go inside it.

Unlike style sheets (external or internal), which can otherwise contain a host of different CSS constructs — like keyframes, media queries, import rules, and so on — the style attribute can only contain styles for the underlying element.

To be more precise, what is possible inside the style attribute is essentially whatever is possible in a style declaration block in CSS (as we saw above). In fact, the value of the attribute is actually just a style declaration block scoped to the underlying element.

Consider the following HTML code, same as we saw above:

<!DOCTYPE html>
<html>
<head>
   <title>Working with CSS</title>
</head>
<body>
   <h1>Working with CSS</h1>
   <p>CSS stands for Cascading Style Sheets.</p>
</body>
</html>

Let's say we want to change the color of the <h1> element to red. Seems to be an easy task.

To go with the style attribute, we'll set the attribute on the <h1> element and then assign it a value containing the CSS color property, set to the color value red.

Something as follows:

<!DOCTYPE html>
<html>
<head>
   <title>Working with CSS</title>
</head>
<body>
   <h1 style="color: red">Working with CSS</h1>
   <p>CSS stands for Cascading Style Sheets.</p>
</body>
</html>

Pretty trivial, isn't this?

Let's see the result:

Great!

Since style is the most specific application of CSS to any HTML element, it has the highest precedence over everything else. That is, all the styles inside the style attribute override similar styles for the same element from earlier style sheets.

Likewise, the only way to override a style specified in an element's style attribute is to put another one inside it, occurring later.