What are 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...
What is CSS?
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.
The <link>
element
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.
A quick primer in CSS
CSS uses a simple idea of properties to specify the styles of a given set of elements, which are selected by means of selectors.
For example, let's take the example of giving a background color to all <p>
elements. First off, we have to select all <p>
elements using a selector, in particular, an element selector, as shown below:
p {}
p
here is the selector which selects all <p>
elements, while the pair of curly braces ({}
) after it denotes a block of style properties to be applied to these elements.
This block is commonly referred to as a style declaration block in CSS. Together with the selector, the whole statement is referred to as a ruleset.
The property used to set the background color of an element in CSS is background-color
. We can set it to one of many different values; the easiest ones being predefined color names.
Below shown are some of the more common color names in CSS along with their rendered colors:
Color name | Color | Color name | Color |
---|---|---|---|
black | grey | ||
silver | white | ||
blue | indigo | ||
red | violet | ||
orange | purple | ||
yellow | pink | ||
green | gold |
Coming back to our example, suppose we want to set the background color of all <p>
elements to yellow. For that, we'll use set the background-color
property to the value yellow
. Simple.
Something like this:
p { background-color: yellow }
Let's see the output for this CSS, supposing that we have three <p>
elements in our HTML document:
This is a paragraph.
This is another paragraph.
This is yet another paragraph.
Great.
Notice how the background color is applied to (almost) the end of the page, not just to the text of the paragraph. This is because <p>
is a block-level element in HTML which, by default, spans the entire width available to it regardless of its content.
So when we apply a background color to <p>
, the entire block is given the background color, not the text itself.
While we're talking about colors, it's worthwhile discussing about another color-related CSS property. That is, color
.
The color
property is used to set the text color of a given set of elements.
Let's try changing the color of all <p>
elements in the example above to red, using the color value red
:
p { color: red }
This is a paragraph.
This is another paragraph.
This is yet another paragraph.
Amazing.
Multiple properties can go inside a style declaration block, separated by semicolons (;
).
In the following CSS code, we customize both the background color and the text color of the paragraphs:
p { background-color: purple;color: white }
This is a paragraph.
This is another paragraph.
This is yet another paragraph.
For readabiltity sake, we can even put each property on a separate line. In fact, that's how CSS coding is customarily done — very few people might enjoy writing all their CSS styles on one single line.
Henceforth, the code above can identically be expressed as follows:
p {
background-color: purple;
color: white
}
We can add as many styles in a CSS style sheet as we want to; there's absolutely no limit.
We can even refer to the same selector multiple times, with multiple rulesets. In this case, the cascading feature of CSS pops in — later styles takes precedence over earlier styles.
Here's an example:
p {
background-color: purple;
color: white
}
p {
background-color: black;
}
We have two rulesets with the exact same selector, that is p
.
The background-color
property appears in both these rulesets, likewise the second block's property takes precedence over the first one's.
However, because color
only appears in the first block, there's nothing to precede it, and so it's what gets applied in the end to all of the <p>
elements.
This is a paragraph.
This is another paragraph.
This is yet another paragraph.
In practice, if you think about it, the idea of 'cascade' used by CSS is quite a trivial one — later styles override earlier ones. Simple.
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:
CSS stands for Cascading Style Sheets.
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.
The <style>
element
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.
<style>
element is used to define a CSS style sheet to be used for the current HTML document, within the HTML document itself.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:
CSS stands for Cascading Style Sheets.
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.
The style
attribute
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.
style
attribute is used to define inline styles for an HTML element.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:
CSS stands for Cascading Style Sheets.
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.
style
attribute, and that from any previous style sheet. That's by using the special !important
keyword in CSS. But this is a slightly advanced concept for now, and so we won't dig deeper into it. We'll cover it in detail in our CSS course.