CSS: Why, What, and How

Today’s websites are a rich multimedia experience, elegantly stylized and delivering more content than you could possibly want to consume. There was a time when websites were just some text with a smattering of images here and there but we’ve evolved far beyond that with pretty awesome technologies. A website experience now includes big colourful blocks of data arranged in fancy layouts, text formatted in varying styles, and images a plenty. Among the fundamental technologies used to power these websites, CSS stands out. Keep reading to find out why.

Q. I’m not familiar with HTML, is this lesson for me?
A. Try a quick crash course on HTML and this will make more sense.

Why

Of course to get from some plaintext and images to the now there was the need to better format and style the content. Font sizes, layouts, and colours! At first various presentational tags were used within the HTML document such as

<p>
  <font face="arial" size="1" color="red">I'm Arial Red. What is 1?</font>
</p>

and this was great… until we started having bigger sites with many pages. The problem caused by melding the “style” with the content: changing the look and feel of websites requires changing each and every presentational tag across the site, which is terrible. At this point it was realized that separating the concerns of website content was a good idea. While HTML continued to be the structural medium for the data, the presentational aspect started being shifted from HTML into its own entity. Imagine being able to tell the browser “Hey Browser listen up; I want all headings to be blue, and links to be orange when within paragraphs.” Enter the CSS revolution! Like any new technology it had its humble beginnings but now it stands tried & true.

What

So what is CSS exactly? We touched upon it earlier and in a nutshell CSS is a list of style rules, or stylesheet, which tell the browser how to style the HTML document. We’ll get into more detail later but what’s key here is that HTML is the structure of the content and CSS is its presentation. Using a human for example, HTML outlines the human as having hair, a face, arms, and legs. CSS describes said human as red haired and freckled with strong arms.

Following is a small example demonstrating how HTML and CSS interact.

How

Q. How do I write CSS?
A. Same as HTML, any text editor will be fine.

As we’ve now been acquainted, a CSS stylesheet is a list of rules in the following form:

selector {
 property1 : value1;
 property2 : value2;
 ...
}

selector: Which element(s) are to be affected by the rule
property: A property to modify on selected element(s)
value: A value assigned to the property being modified on selected element(s)

To tie it to a real-world scenario, lets discuss the preceding example. Don’t worry if it doesn’t fully make sense, we’ll see many more examples next in this series.

Here we’ve selected all of the <h1>, <h2>,...<h6> heading elements and set their font colour to blue.

h1, h2, h3, h4, h5, h6 {
 color: blue;
}

Here we’ve selected all <a> link elements that are contained within <p> paragraph elements and set their font colour to orange.

p a {
 color: orange;
}

Author’s Note: CSS selectors are easier read right to left and this will make more sense when we get into selectors.

Applying CSS to HTML

In order for CSS to style an HTML document it must first be applied to said document. There are a few means of going about this, which we will now cover.

External CSS: This is the preferred method. Rules are written into some .css file as an external asset. This CSS asset is then loaded into an HTML document with the <link> tag.
<link rel="stylesheet" type="text/css" href="mystyles.css" />
Usually this goes within the HTML <head> tag. The major selling point of this method is reuse across an entire site. The downside is making an additional HTTP request, but this is negligible.
Embedded CSS: CSS can be embedded in the HTML document within a <style> tag.
<style>p { color: purple; }</style>
This method is more commonly found with dynamically generated sites.
Inline CSS: CSS can be directly applied to HTML elements with the style attribute.
<p style="color: purple;">purple paragraph</p>
As it essentially brings back the problem that CSS was designed to solve, this method is used extremely sparingly in niche cases. This is acceptable when being applied by JavaScript in runtime – UI components powered by jQuery or other JS frameworks.

Summary

Web pages started as one big agglomeration of content and presentational information melded within the HTML document
Maintenance of melded content and presentational information proved to scale poorly
Presentational aspect was shifted from HTML to CSS
HTML is structural. CSS is presentational.
CSS styles HTML
A CSS rule selects HTML elements and sets presentational properties.
CSS can be applied to HTML as an external/embedded/inline stylesheet