Tutorial
How To Apply CSS Styles to HTML with Cascade and Specificity
The author selected the Diversity in Tech Fund to receive a donation as part of the Write for DOnations program.
Introduction
Cascading Style Sheets, better known as CSS, is the language for visual style and design on the web. CSS has a long history on the web dating back to 1994 with the initial idea. In the time since, CSS has become a feature-rich language capable of laying out a webpage, creating complex animations, and much more.
Since CSS is the web’s styling language, understanding how it works and how to use it is fundamental to web development. It is especially valuable to understand in order to work with Hypertext Markup Language (HTML) and JavaScript effectively. This tutorial will focus on applying CSS to HTML, cascade, and specificity, which are foundational aspects of CSS and will prepare you for using CSS effectively in your web projects.
CSS is not a conventional programming language. While it does have some features found in other programming languages, such as variables and math, CSS is wholly dependent on HTML to work. CSS’s purpose is to provide visual modifications to HTML. The CSS language is more like a to-do list for the browser: You are saying to the browser, here is a list of things I want you to find. Once the browser finds those things, the CSS instructs the browser to go through the subset list and make changes to those things.
The browser follows this list of instructions from top to bottom unquestionably, and CSS needs to be written with that in mind. The cascade part of Cascading Stylesheets speaks to how browsers read the list. Since the browser is impartial, it makes the style changes as it encounters them. If the CSS says to make some HTML elements red, then later down in the CSS it says to make those elements blue, the result is blue.
Applying styles to an element gets a little complicated, as there are many ways to tell the browser to find an element in the HTML. Each element in HTML has a set of attributes which can be used to find a specific element. Because of the cascade where the browser reads the instructions from top to bottom with impartiality, the instructions provided must be specific. This is known as specificity, where the developer must write precise criteria for the browser to find the exact element they wish to apply the styles to.
In this tutorial you will work through multiple hands-on examples to understand the different ways styles can be applied to HTML elements and how cascade and specificity affect how styles are written.
Prerequisites
- An HTML file saved on your local machine as
index.htmlthat you can access from your text editor and web browser of choice. To get started, check out our How To Set Up Your HTML Project tutorial, and follow How To Use and Understand HTML Elements for instructions on how to view your HTML in your browser. If you’re new to HTML, try out the whole How To Build a Website in HTML series.
Using the HTML Style Attribute
In this first step, you will apply styles to an HTML element directly with the style attribute. This method, also known as inline styling, uses an HTML element attribute to accept a CSS property as a value, and then applies it directly to the element.
To familiarize yourself with some concepts of CSS, start by opening the index.html file in your text editor. In that file, set up the base HTML structure of the <html>, <head>, and <body> tags. Inside the <body> tags add a <div> with a short sentence of text:
<!doctype html>
<html>
<head>
<title>Sammy Shark</title>
</head>
<body>
<div>Sammy is the greatest shark in the ocean.</div>
</body>
</html>
Next, open index.html in your browser. You will see your text in the <div> in the top left portion of the browser window. Visually, the text should appear similar to the following image with black text on a white background using serif font, such as Times New Roman:
To begin styling, add an attribute with an empty value to the opening <div> tag:
...
<div style="">Sammy is the greatest shark in the ocean.</div>
...
The style attribute is a special attribute for HTML that contains CSS properties and values. The browser will apply those styles to that element.
In this case, change the color of your sentence to navy using the color property. The format for CSS property and values begins with the property name, followed by the colon symbol :, then the property value, and finally a semicolon symbol ; after the value to tell the browser that’s all for the value:
...
<div style="color: navy;">Sammy is the greatest shark in the ocean.</div>
...
Save index.html, return to your browser, and refresh. The text has changed from the browser default color of black to navy, as seen in the following image:
There are many CSS properties you can try in the style attribute, such as background-color or font-family. Typically, a browser’s default font is a serif font, such as Times New Roman. To change the font to a sans serif font, such as Arial or Helvetica, add a space after the semicolon for the color property then type the font-family property, followed by a colon, with sans-serif as the value:
...
<div style="color: navy; font-family: sans-serif;">Sammy is the greatest shark in the ocean.</div>
...
Save your file and refresh your browser to see how the font for your sentence has changed. The font will now be the browser’s sans-serif font, such as Helvetica or Arial, instead of the default font. The following image shows how the font-family property builds on the color change to navy.
Now that you have written a couple of CSS properties, wrap a word in your sentence with the <strong> element and return to your browser:
...
<div style="color: navy; font-family: sans-serif;">Sammy is the <strong>greatest</strong> shark in the ocean.</div>
...
In your browser, the word inside the <strong> tag will appear bolder than the other words in the sentence, as shown in the following image.
The word with the <strong> element retains the color and font-family properties of the HTML element it is inside, also known as its parent. This is an example of inheritance, where a child element, an HTML element inside another element, inherits styles that are placed on the parent element. The <strong> element also adds a browser default style of font-weight: bold;, making the text bold. Additionally, the <strong> element can have a style attribute as well to give that element a custom look:
...
<div style="color: navy; font-family: sans-serif;">Sammy is the <strong style="color: blue;">greatest</strong> shark in the ocean.</div>
...
Save the file and refresh you browser to see the difference, as the word in the <strong> element is now blue, in contrast to the navy of the rest of the sentence. This change is shown in the following image:
In this section you used HTML style attributes to apply styles to a <div> and a <strong> element. In the next section you’ll take the styles you wrote for those specific elements and apply them to all <div> and <strong> elements on the page.
Using the <style> Tag to Write CSS
Next you will take what was written in the previous section and apply the styles to all similar elements on the page. You will move from using the style attribute to using the <style> HTML element. <style> is a special element that allows you to write CSS within it and have those styles applied to the whole page.
Using the style attribute on an HTML element can be very handy, but it is limited to only that element or its descendants. To see how this works add another <div> element with a new sentence:
...
<div style="color: navy; font-family: sans-serif;">Sammy is the <strong style="color: blue;">greatest</strong> shark in the ocean.</div>
<div>They like to swim with their friends.</div>
...
Go to your browser and reload the page. As you may notice in the browser or the following image, the first sentence gets all the styles you wrote earlier, but the new sentence uses the browser default styles instead:
You could apply the same style attribute on each individual element, but that becomes very cumbersome if you have many sentences that you want to look the same. What you need is a way to target many of the same kinds of elements simultaneously. This can be done with the HTML <style> element.
The <style> element is most often placed in the <head> tag of an HTML document. This way the browser reads the styles before reading the HTML, causing the page to load already styled. The inverse can cause a flash as the browser loads the content with browser default styles and then loads the custom styles. However, keep in mind that the <style> tag is not limited to use in the <head> and can be placed anywhere within the <body>, which can be advantageous in some scenarios.
Add <style> tags to the <head> of your index.html file:
<!doctype html>
<html>
<head>
<title>Sammy Shark</title>
<style>
</style>
</head>
<body>
<div style="color: navy; font-family: sans-serif;">Sammy is the <strong style="color: blue;">greatest</strong> shark in the ocean.</div>
<div>They like to swim with their friends.</div>
</body>
</html>
Inside the <style> element, you can define what kind of element you want to target with selectors, which identify which HTML elements to apply styles to. Once the selector is in place, you can then group the styles you wish to apply to that element in what is called a selector block.
To begin setting that up, look at the example from earlier. Here there is a <div> with two properties, color and font-family.
...
<div style="color: navy; font-family: sans-serif;">...</div>
...
To target all <div> elements on the index.html page, add what is called a type selector within the <style> attribute, followed by an opening and closing curly brace, which define the selector block. This tells the browser to find all the <div> elements on the page and apply the styles found within the selector block:
<!doctype html>
<html>
<head>
<title>Sammy Shark</title>
<style>
div {
}
</style>
</head>
<body>
<div style="color: navy; font-family: sans-serif;">Sammy is the <strong style="color: blue;">greatest</strong> shark in the ocean.</div>
<div>They like to swim with their friends.</div>
</body>
</html>
Next, take the properties from the style attribute and put them inside the curly braces of the selector block. To make it easier to read, it helps to put each property on an individual line:
<!doctype html>
<html>
<head>
<title>Sammy Shark</title>
<style>
div {
color: navy;
font-family: sans-serif;
}
</style>
</head>
<body>
<div>Sammy is the <strong style="color: blue;">greatest</strong> shark in the ocean.</div>
<div>They like to swim with their friends.</div>
</body>
</html>
Once you have saved the file, return to the browser and refresh. Now both sentences have the same styles applied, all from a single selector in the <style> element:
Add a new selector after your div selector block to apply the styles for the <strong> element in the same manner. Also, add a <strong> element around a word in your second sentence to see your new CSS on multiple elements:
<!doctype html>
<html>
<head>
<title>Sammy Shark</title>
<style>
div {
color: navy;
font-family: sans-serif;
}
strong {
color: blue;
}
</style>
</head>
<body>
<div>Sammy is the <strong>greatest</strong> shark in the ocean.</div>
<div>They like to swim with their <strong>friends</strong>.</div>
</body>
</html>
Save the file and refresh your browser, or look at the following image, to find that now both words using the <strong> element are the color blue:
In this section, you wrote CSS selectors within a <style> element, which applied the styles to all matching elements on the page. In the next section you will move these styles so that they can be applied on many pages of a website.
Loading an External CSS Document into HTML
In this section you will start working with a CSS file that is loaded on multiple HTML pages. You will move the styles from the previous section to the CSS file and create a new HTML page to see how one CSS file can style multiple pages.
Just as the style attribute is limited to styling the single element, the CSS found in a <style> element are limited to styling a single page. Websites are most often a collection of many web pages that share the same styles. If you had multiple pages that all needed to look the same and you used the <style> element to hold your CSS, making changes to the styles would require a lot of repeat work on each page. This is where the CSS file comes in.
Create a new file in your editor called styles.css. In that file, copy the contents of the <style> element from index.html and add them to your styles.css file. Be sure to exclude the <style> tags.
div {
color: navy;
font-family: sans-serif;
}
strong {
color: blue;
}
Now that you have an independent CSS file, it’s time to load that file on to the page so the browser can apply the styles. Start by removing the <style> tags from the <head>. Then inside the <head> tag, write a self-closing <link /> element with two attributes, href and rel. The href value contains the path to the style.css file so the browser can reference the CSS. The rel attribute should have a value of stylesheet as it defines the type of relationship between the page and the document being referenced:
<!doctype html>
<html>
<head>
<title>Sammy Shark</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div>Sammy is the <strong>greatest</strong> shark in the ocean.</div>
<div>They like to swim with their <strong>friends</strong>.</div>
</body>
</html>
Now go to your browser and refresh index.html. In this case, you will not find anything changed since all you have done is change where the styles live.
To demonstrate how useful a CSS file is, create a new HTML file called about.html. Copy and paste the HTML from index.html and then make changes to the sentences, or create new sentences:
<!doctype html>
<html>
<head>
<title>About Sharks</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div>There are over <strong>500</strong> species of sharks.</div>
<div>The great white shark can grow up to <strong>6.1 meters</strong> long.</div>
</body>
</html>
Next, open about.html in a new browser window so you can view and compare both HTML files simultaneously. This results in about.html having the same styles for both div and strong elements, as shown in the following image.
Return to your text editor and open styles.css and change the div selector’s color property value to green:
div {
color: green;
font-family: sans-serif;
}
strong {
color: blue;
}
In your browser, refresh both index.html and about.html to see how changing the styles in the CSS file affects both HTML files. As the following image shows, the text changed from navy to green in both index.html and about.html:
Each page has the same styles applied with the green text and blue <strong> elements, all from one central CSS file.
In this section you created a CSS file and loaded that CSS file on multiple HTML pages. You moved your CSS from the <style> element into the CSS file, which applied the same styles to index.html and the new about.html page. Next you will start working with CSS cascade and specificity.
Working With the Cascade and Specificity
This section will get into the depths of the CSS features of cascade and specificity mentioned in the introduction. You will write CSS that exemplifies these concepts, starting with cascade and then specificity. Understanding cascade and specificity can help troubleshoot problems you may find in your code.
With what you have accomplished so far, the cascade is short. As your CSS file grows in size, it is more and more necessary to be aware of the order of your CSS selectors and properties. One way to think about the cascade is to think of a water cascade and traversing rapids. It’s advisable to go with the current, as trying to go upstream will require extensive effort to make little progress. The same is true with CSS: if your code is not working as expected, it may be going against the flow of the cascade.
To see this in practice, open up the files from earlier. Open styles.css in your text editor and index.html in your browser. The <div> elements in the browser will currently be green, with the bold text in blue. After the font-family property in the div selector, add another color property with a value of orange:
div {
color: green;
font-family: sans-serif;
color: orange;
}
strong {
color: blue;
}
The browser traverses the cascade and hits the green style, turning the div green. Then the browser hits the orange style, and changes the color from green to orange. Refresh index.html in your browser to see the green text is now orange, as shown in the following image:
In this scenario the browser has been given two color properties, and due to the nature of the cascade, the browser applies the last color property to the element. When a property further down the cascade negates a previous property, this results in a situation called an override. As a CSS file grows in size and scope, overrides can be the source of bugs as well as the solution to problems.
While the cascade deals with how the browser reads and applies styles to elements, specificity deals with what elements are found and styled.
Open about.html in your browser. Right now both sentences have the same style. Next, you will change the color of the <strong> element in the second sentence to red, but keep the first <strong> color set to blue. To accomplish this change requires a higher specificity selector. Right now the selectors are what is called low specificity as they are targeting all <strong> elements on the page, regardless of their parent.
Higher specificity can be achieved several different ways, but the most common and effective way is a class selector. On the second <strong> element, add a new attribute called class and give that attribute a property value of highlight:
<!doctype html>
<html>
<head>
<title>About Sharks</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div>There are over <strong>500</strong> species of sharks.</div>
<div>The great white shark can grow up to <strong class="highlight">6.1 meters</strong> long.</div>
</body>
</html>
Next, open styles.css in you text editor to create a class selector. First, remove the color: orange; from the div you added earlier.
In CSS, element selectors are written out without an identifier, but with class selectors a period (.) precedes the value found in the attribute. In this case, use the selector .hightlight to apply a color property with a value of red:
div {
color: green;
font-family: sans-serif;
}
strong {
color: blue;
}
.highlight {
color: red;
}
Save the changes to both styles.css and about.html and refresh about.html in your browser. You will find that the second <strong> element is now red, as seen in the following image:
To understand the robustness of specificity in regards to the cascade, swap the strong and .highlight selector blocks. Different kinds of selectors have higher specificity. In this case the class selector has a higher specificity than the element selector:
div {
color: green;
font-family: sans-serif;
}
.highlight {
color: red;
}
strong {
color: blue;
}
Save and refresh about.html in your browser and you’ll notice no change. The following image shows that there is no visual change despite the reordering of the CSS.
This is due to the low specificity of element selectors and the high specificity of a class selector. While the browser is reading the list from top to bottom without regard, you can tell the browser to pay more attention when applying a style by using higher specificity selectors.
In this section you worked with the CSS features of cascade and specificity. You applied the same property twice to an element, which showed how the cascade works by using the last property in the list. You also created styles using a higher specificity selector called a class selector. Next you’ll learn about a special CSS rule that overrides both cascade and specificity.
Using the !important Rule
In this last section you will learn about the CSS !important rule and write an example of how to use it. This example uses a fictional scenario where you would not have control over the HTML and therefore must fix the problem only using CSS.
Although CSS will often work with the cascade and have good specificity, there are times when a style needs to be forced. This is done by adding an !important flag at the end of a property value, before the semicolon. This is not a rule to be used lightly, and when used it is a good practice to include a code comment explaining the reason for using !important.
Warning: Due to how the !important rule works, it should be used only if all other methods fail. Using the rule overrides the value on all matching elements, which makes it difficult or impossible to override further. This will make your code less legible to other developers.
To see how this works, open up index.html in your editor and add a style attribute with a color set to red:
<!doctype html>
<html>
<head>
<title>Sammy Shark</title>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<div>Sammy is the <strong style="color: red;">greatest</strong> shark in the ocean.</div>
<div>They like to swim with their friends.</div>
</body>
</html>
Load index.html in your browser and you will find that the style attribute overrides the blue color with red, since a style attribute has higher specificity than the CSS selector. What is in the browser will look similar to the following image:
When working with websites it is common to have Javascript loaded that may apply inline styles like this. Elements with style attributes are at the bottom of the cascade, meaning that even with styles that turn all strong tags blue, this one will be red. In a scenario where Javascript creates the style attribute, it cannot be removed from the HTML.
To force a style override, open up styles.css in your editor and after the blue property value in your strong selector, add !important:
...
strong {
color: blue !important;
}
Now return to your browser and refresh index.html. You will see the blue color again, as in the following image:
Despite the style attribute defining the color as red it is now blue, thanks to the !important rule telling the browser that this is the more important style to use. It is helpful to add a CSS code comment explaining the reason for the !important so future developers or future you understand why you are using it.
...
strong {
/* !imporant used here because of JavaScript applying a style attribute on the selector */
color: blue !important;
}
In this section you learned about the !important rule and used it in a real-world scenario. You also learned that that the !important rule is a dangerous tool that should be used intentionally because of how drastic it overrides cascade and specificity. Additionally, you wrote a CSS comment, which is used to inform future developers looking at your code as well as a reminder to you when you return to your code later.
Conclusion
CSS is a versatile language made for manipulating and styling HTML. In this tutorial you styled HTML elements through various methods of applying styles. You now have the foundation to begin writing your own styles. If you want to dive further into understanding CSS and how it works, the World Wide Web Consortium (W3C), the governing body for CSS, provides all kinds of information about the language.
If you would like to see more tutorials on CSS, check out our CSS topic page.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
Tutorial Series: How To Style HTML with CSS
Cascading Style Sheets (CSS) is the styling language of the web, and is used to design and control the visual representation of Hypertext Markup Language (HTML) on a web page. With CSS, you can manage everything from font to layout to animations on your web page. This series will lead the reader through CSS exercises that demonstrate the building blocks of the language and the fundamental design principles needed to make a user-friendly web site.
author
Developer
I code, design, write, and teach and I’m an IAAP Certified Web Accessibility Specialist.
editor
Senior Technical Editor
Editor at DigitalOcean, fiction writer and podcaster elsewhere, always searching for the next good nautical pun!
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Become a contributor for community
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
DigitalOcean Documentation
Full documentation for every DigitalOcean product.
Resources for startups and SMBs
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
The developer cloud
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Get started for free
Sign up and get $200 in credit for your first 60 days with DigitalOcean.*
*This promotional offer applies to new accounts only.