What is CSS?

Context

How can we customize the look and feel of our content? One way is to use the style attribute on an HTML element:

The above approach would work just fine if working with a small number of elements. But once you’re dealing with large pages with lots of moving pieces, it will quickly become extremely tedious to apply a separate style attribute to each element. In software development, we are often interested in reducing repetition. We can achieve this through the use of Cascading Style Sheets, or CSS for short. CSS specifically deals with the layout and customization of HTML elements.

Creating a CSS rule

Let’s take a quick look at how we would take the previous example and apply the same style to the p elements using CSS:

Let’s deconstruct the above example. CSS files comprise a set of rules, each of which consists of a selector (to indicate which elements you are trying to modify), followed by a declaration block that contains a set of properties and those properties’ values.

Notice the use of the style HTML element nested in the head. style can be used to place CSS rules inline with an HTML document, like in the example above. Although this is a perfectly valid way of adding CSS to your web pages, it would be better to separate concerns by putting content structure and content stylization in separate files.

Loading a separate CSS file into an HTML page can be accomplished by placing a link element within the head, like so:

<link href="styles.css" rel="stylesheet" type="text/css">

Exercise

Use the style element to create a CSS Rule that makes an h1 element’s text green. Then add an h1 element to your HTML page.