If you’re building a website, HTML is your best friend. With it, you create all of your page content, including headings, paragraphs, images, tables, forms, lists, and so on. However, you can’t control how these elements look on the page, at least not with HTML alone. That’s why we have CSS.
CSS determines how the contents of a web page look when shown in browser. It can be used for a huge range of stylistic purposes, from changing colors and animating elements to determining the whole layout of your page.
![Download Now: 25 HTML & CSS Hacks [Free Guide]](https://no-cache.hubspot.com/cta/default/53/848be230-f06a-420e-9a24-82b45fe61632.png)
HTML and CSS go hand in hand, but it’s up to you to decide how they’re joined. So, let's learn how to add CSS to your HTML.
Free Guide: 25 HTML & CSS Coding Hacks
Tangible tips and coding templates from experts to help you code better and faster.
- Coding to Convention
- Being Browser-Friendly
- Minimizing Bugs
- Optimizing Performance
How to Add CSS to HTML
There are three ways to add CSS to HTML:
- Inline CSS places the CSS inside an HTML tag and affects only that element.
- Internal CSS is placed inside a <style> element, which goes inside the <head> of the HTML document.
- External CSS exists in a separate file called an external stylesheet, and requires a <link> element placed inside the head section of an HTML file.
Let’s walk through each of these methods in more detail and discuss their ideal use cases.
How to Add Inline CSS to HTML
Inline CSS, also called an embedded stylesheet, goes "inside" the HTML. To add inline CSS, use a style attribute inside the opening tag of an HTML element. Here's the syntax:
Inline CSS will override any other CSS targeting the same element. Because it's the “closest” to the HTML, browsers determine that inline CSS declarations are the most relevant to the HTML element and should be applied.
For this reason, inline CSS is effective for targeting a single element with unique style properties. However, it should be avoided if it's possible to use internal or external CSS, since inline CSS is difficult to maintain and it’s generally considered a better practice to keep your HTML and CSS separate.
Inline CSS Example
Say you want to change the color of a single word in a paragraph to a bright orange. Wrap the key term in span tags, then add a style attribute with the color property inside the opening <span> tag. Then, set the color property to your shade of orange. Here’s what that looks like:
See the Pen Inline CSS Example by HubSpot (@hubspot) on CodePen.
How to Add Internal CSS to HTML
Internal CSS is placed inside an HTML document inside <style> tags in the <head> section of the document. 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.
Using internal CSS is considered a better practice than using inline CSS because it is easier to maintain and results in less code. Internal CSS allows you to style groups of elements at once, rather than having to add the same style attributes to elements over and over again.
Also, since internal CSS separates the CSS and HTML into different sections but keeps it in the same document, internal CSS is ideal for simple, one-page websites. All your code is in one file, making it easy to access.
But, if you have a multi-page site and would like to make changes across your site, you'll have to open up each HTML file representing those pages and add or change the internal CSS in each head section. That’s why it’s better to use external CSS in this case.
Internal CSS Example
Say you want to change the text color of every paragraph on a page to orange. Add <style></style> tags to the <head> section of the HTML document. Inside the <style> tags, add a rule that sets the color property to orange. Assign this sule to the p selector.
Here's what the HTML file would look like:
And here's the result:
See the Pen Inline CSS Example by HubSpot (@hubspot) on CodePen.
How to Add an External CSS File to HTML
External CSS is formatted like internal CSS, but it isn’t wrapped in <style> tags or placed in your HTML file. Instead, it’s placed in a separate file called an external stylesheet. This file ends with the extension “.css.”
In the <head> section of your HTML document, you just need to add a link to this external stylesheet using the <link> Element. Here’s what that looks like:
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 the most SEO-friendly. Storing CSS in another file makes your HTML file easier to read for search engines.
- It enables a visitor’s browser to cache the CSS file to load your website faster for their next visit.
External CSS Example
Let’s use external CSS to style a div in HTML. Here’s how the HTML and CSS files would look:
Here’s how the div would look on the front-end:
See the Pen external css example by HubSpot (@hubspot) on CodePen.
Working With All Three Types of CSS
Technically, you can use all three styles of CSS on the same website. However, to understand how your HTML will actually look on the front end, you need to understand how CSS determines hierarchy.
Free Guide: 25 HTML & CSS Coding Hacks
Tangible tips and coding templates from experts to help you code better and faster.
- Coding to Convention
- Being Browser-Friendly
- Minimizing Bugs
- Optimizing Performance
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.
Inline CSS added to an element always overwrites any other internal CSS, which overwrites any external CSS. Here’s an easy way to remember: 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.
Customize your site with CSS.
Changing the look of your site is easy with CSS. Using any of the methods above, you can quickly and easily add CSS to your website to match the unique look and feel of your brand.
Editor's note: This post was originally published in May 2021 and has been updated for comprehensiveness.
