If you’re building a website, then you’ll start with HTML. With this markup language, you can add headings, paragraphs, images, tables, forms, lists, and much more. But you can’t control how these elements are presented or laid out on the page. That’s where CSS comes in.
If you want greater control over the appearance of your site, then you need to know how to add CSS to your site. Let’s get started.
How to Add CSS to HTML
There are three ways to add CSS to HTML. You can add inline CSS to style a single HTML element on the page. You can embed an internal stylesheet by adding CSS to the head section of your HTML doc. Or you can link to an external stylesheet that will contain all your CSS separate from your HTML.
Technically, you can use all three styles on the same website. To understand how, you need to know that CSS stands for “Cascading Style Sheets.” The cascading bit is important. It means that styles can inherit and override other styles that had previously been declared.
So inline styles added to an element — like style="font-weight: bold;" — always overwrite styles defined in the <head> section of the document, which overwrite styles defined in external stylesheets. Here’s an easy way to remember this: whatever style of CSS is closest to the HTML is considered more relevant by browsers and will therefore be applied. This hierarchy is known as CSS specificity.
Because inline CSS has the highest specificity, it’s best to use it sparingly, if at all. Imagine you’re redesigning your site. You have an external stylesheet where you keep your CSS separate from your HTML. Part of your redesign is changing the color of your font from black to gray. You make the change in your external file, save it, then look at your site. All the font has changed except for one paragraph on the homepage. Weird.
Now you have to open up your HTML file to debug the code. You start scrolling through and find a rogue style attribute defining this paragraph with inline CSS. In this hypothetical case, you could just delete the style attribute and solve the problem. Bit imagine you have a style attribute on every page of your site. Tracking each of them down to ensure they don’t conflict with the CSS in the external stylesheet would be time-consuming and frustrating.
Below we’ll walk through each method for adding CSS to HTML and the ideal use cases for each.
How to Add Inline CSS to HTML
Although inline CSS should be avoided when possible, it is effective for targeting a single element with unique style properties.
To add inline CSS, you need to use a style attribute and place it inside the opening tag of an HTML element. Here’s an example. Let’s say you want to change the color of the heading on your homepage to hot pink and leave the other headers as is. Then you could set the color property to the hex color code for hot pink (#CC0099), place it within a style attribute, and place the whole thing inside the h1 tag. Check it out below.
Here’s the HTML defining a header and paragraph. Notice that they’re wrapped in <body> tags.
Using internal CSS is considered a better practice than using inline CSS. Since it separates the CSS and HTML into different sections but keeps it in the same document, this is ideal for one-page websites.
Internal CSS looks different from inline CSS. A CSS property and value is still set, but instead of being placed inside a style attribute, it is placed inside brackets and defined by a CSS selector. This rule set is then wrapped in <style></style> tags and found in the head section of the HTML file.
Let’s rewrite the example using internal CSS. Here’s the HTML defining a header and paragraph. Notice that nothing has changed except for the removal of the style attribute from the opening tag of the header.
<h1>An Eye-Catching Title</h1>
<p>This is an ordinary paragraph. Since the default text color for the page is black, the paragraph is black. Changing the title to hot pink makes it really stand out.</p>
Using external CSS is considered the best practice for a few reasons. Since you can make changes across your site by changing the CSS in this external file, it’s the most time-effective method. It’s also the fastest and most SEO-friendly. Storing CSS in another file makes your HTML file easier to read for search engines. It also enables a visitor’s browser to cache the CSS file to load your website faster for their next visit.
External CSS is formatted like internal CSS, but it isn’t wrapped in <style> tags or placed in the head section of your HTML file. Instead, it’s placed in an external file with the extension “.css.” In the head section, you’ll just have to add a link to this external stylesheet that looks something like: