If you’re building a website, HTML is your best friend — you can create all of your page content, including headings, paragraphs, images, tables, forms, lists, and so on.
The problem? HTML doesn‘t look good by itself — or at least not in my opinion. That’s why we have CSS.
CSS determines how the things on a web page look when shown in the browser, from font size to colors to shaping the layout of your entire page.
![Download Now: How to Land a Developer Role in the World of AI [Free Checklist]](https://no-cache.hubspot.com/cta/default/53/8d6a0803-23b3-44d8-a193-5da3a6e366a7.png)
HTML and CSS go hand in hand, but it’s up to you to decide how to join them. Having worked with these languages for almost a decade at this point, I figured I could give some pointers here. So, let's learn how to add CSS to your HTML.
Table of Contents
How to Add CSS to HTML
CSS affects how HTML content looks on a page. But, in order for this to happen, the browser processing the HTML file needs to know what CSS code should be applied. There are three ways to do this:
- Inline CSS is written inside an HTML tag with the style attribute. Inline CSS affects only the element of the tag (and possible child elements depending on the property that’s applied).
- Internal CSS is written inside a <style> element, which goes inside the <head> of the HTML document.
- External CSS is written in a separate file called an external stylesheet, and linked to the HTML document with a <link> tag.
Let’s walk through each of these methods in more detail and discuss their use cases.
How to Add Inline CSS to HTML
Inline CSS is placed “inside” an HTML element — in other words, the CSS itself is written in the HTML tag of the element.
To add inline CSS to your HTML, put a style attribute inside the opening tag of the target HTML element. The value of style will be the CSS declarations that you want to apply to that specific element.
Here's the syntax for inline CSS. Note that you can add multiple declarations for your value:
See the Pen inline css syntax by HubSpot (@hubspot) on CodePen.
Inline CSS Example
Say I have a paragraph, and I want to change the text color of one word to orange. I can wrap the target word in a span element, and then add a style attribute with the color property inside the opening <span> tag. Then, I set the color property to orange. Here’s what that looks like:
See the Pen Inline CSS Example by HubSpot (@hubspot) on CodePen.
Because the inline CSS is written in the <span> tag, it only applies to the contents of that span tag.
When to Use Inline CSS
Inline CSS is “closest” to the HTML, so it will override any other conflicting CSS that targets the same element. For example, if we tried to set the color of our span tag above to a different color using internal or external CSS, the word would still appear orange because that’s what the inline CSS declares.
For this reason, inline CSS is good for targeting a single element with unique style properties, especially ones that may appear elsewhere in internal or external CSS. I also think it’s easy for making quick and temporary fixes to an HTML document.
However, inline CSS is generally considered poor practice and and I generally recommend avoiding it in favor of internal or external CSS.
The reason? Inline CSS is hard to reuse — if you want to apply the same style rule to multiple elements with inline CSS, you need to repeat the same CSS in each element’s tag. For one or two elements, this isn't much extra work. But, if you have many elements, inline CSS makes your HTML needlessly cluttered, difficult to maintain, and prone to errors.
Say instead of one sentence, I have several paragraphs and want to target each use of the word “orange” with the same rule. Here's how I would do that with inline CSS:
See the Pen Inline CSS Example - multiple spans by HubSpot (@hubspot) on CodePen.
Do you see the issue here? If I wanted to change the color value or add another property, I would have to go in and change each individual instance of inline CSS — not very convenient.
That’s why it’s considered a better practice to separate your HTML and CSS code, as we’ll see with internal and external CSS.
How to Add Internal CSS to HTML
Internal CSS, also called an embedded stylesheet, goes inside the HTML document. But instead of going inside the elements themselves, internal CSS is placed inside a <style> tag in the <head> section of the document. With internal CSS, you can style groups of elements as opposed to individual elements.
In order to target an element, class, or ID, CSS rules are placed inside brackets and paired with a CSS selector. Here’s the syntax:
See the Pen internal css syntax by HubSpot (@hubspot) on CodePen.
Internal CSS Example
Let’s go back to our orange example from above. If we want to make every instance of the word “orange” the color orange, we’ll make some small modifications to the code.
First, I'll add the class orange to every span tag. Doing this designates a group of span tags that I want to make into orange text.
How To Land a Developer Role in the World of AI
A free checklist to you help you stand out from the competition featuring Software Developer and YouTube Creator Tech With Tim.
- Expert advice on how to build a portfolio
- Top programming languages to learn
- Resume building and interview tips
- Resources to strengthen communication skills
Download Free
All fields are required.
Then, I’ll add <style></style> tags to the <head> section of the HTML document. Inside the <style> tags, I’ll add a rule that sets the color property to orange, then assign this rule to the .orange class selector.
Here's what that looks like:
See the Pen Inline CSS Example - internal css by HubSpot (@hubspot) on CodePen.
Now, if we want to change the color of every instance of “orange” at once or style them in other ways, we need only modify the rules for the .orange selector.
See below: I’ve changed the color to green and added a font-weight declaration to bold all of the text. Try adding some declarations of your own and seeing what they do:
See the Pen Inline CSS Example - internal css by HubSpot (@hubspot) on CodePen.
When to Use Internal CSS
Internal CSS is usually better than inline CSS because it’s easier to maintain and results in less code.
Also, since internal CSS separates the CSS and HTML into different sections within the same document, internal CSS is ideal for simple one-page websites or if you only want to apply a set of styles to one specific page. All your code is in one file, making it easy to access. For quick and easy web pages, I’ll sometimes use internal CSS so the CSS code is just a bit easier to access.
But, if you have a multi-page website and want to make changes across your site, you’ll run into a similar problem as with inline CSS: To change a style rule on multiple pages, you’ll need to update the internal CSS in each HTML file individually. Again, not ideal.
That’s why it’s better to use external CSS in this case. That’s next!
How to Link External CSS to HTML
External CSS looks like internal CSS, but it isn’t placed in the HTML file. Instead, it goes in a separate CSS file called an external stylesheet. This file ends with the extension “.css.”
To use external CSS, first create a new text file and label it styles.css. Then, put your CSS inside this file (you don’t need to wrap it in <style> tags).
Next, open your HTML document. In the <head> section, add a link to this external stylesheet using the <link> element. Here’s what that looks like:
<link rel=“stylesheet” type=“text/css” href="styles.css">
Note that you can name your stylesheet anything you want, as long as the name of the file matches the name given in the <link> element. I’ve most often seen them called “styles.css” or something similar.
Then, when you open your HTML file in the browser, the external CSS will apply to the page because it is linked to the HTML file.
External CSS Example
Going back to our orange example, we’ll move the CSS from the <style> section of the HTML and put it in its own file, then include a <link> element to link the two documents together.
See the Pen Inline CSS Example - external css by HubSpot (@hubspot) on CodePen.
Easy! Like with internal CSS, changing our CSS code will affect all elements with class .orange on the page. The difference is that this change will apply to any other HTML files with the same <link> element included.
When to Use External CSS
External CSS is considered a best practice for a few reasons:
- Separating your HTML from your CSS makes your code overall easier to read, manage, and debug.
- 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 most SEO-friendly method. Storing CSS in another file makes your HTML file easier to read for search engines.
- External CSS sometimes helps with load time. A visitor’s browser can cache the CSS file so that your website loads faster on their next visit. It also makes HTML files smaller and, therefore, quicker to load.
- External CSS helps with accessibility because the HTML code is easier to parse by accessibility tools.
For these reasons, I recommend using external CSS on your website whenever possible, keeping internal CSS to a minimum, and avoiding inline CSS if you can.
Working With All Three Types of CSS
Technically, it’s possible to use external, internal, and inline CSS all on the same website. And if you’re running a larger website, chances are you’re working with some combination of these three.
But what happens if your CSS rules conflict? What if one property set with external CSS is set differently with internal CSS? To understand how your HTML will actually look on the front end, we need to understand how CSS determines hierarchy.
CSS stands for “Cascading Style Sheets.” The “cascading” part means that styles can inherit and override other styles that had previously been declared. This hierarchy is called specificity. Here’s how specificity works for the three methods we’ve discussed:
- External CSS has the least specificity of our three methods. It can be overwritten by both internal and inline CSS.
- Internal CSS is more specific than external CSS but less specific than internal CSS. This means that internal CSS will override external CSS, but it can be overwritten by inline CSS.
- Internal CSS has the highest specificity and can override both external and internal CSS.
Here’s a demonstration of specificity. Here, we have three CSS properties at play: font-size, font-weight, and color. All three target the same span tag, but specificity determines which rules ultimately apply:
- font-size is only declared in external CSS and doesn’t conflict with the internal or inline CSS, so the external CSS applies.
- font-weight is declared in external and internal CSS. Since internal CSS has higher specificity, it overrides the external CSS.
- color is declared in external, internal, and inline CSS. Inline CSS has the highest specificity, so blue ultimately prevails as the color of the text.
See the Pen CSS Specificity example by HubSpot (@hubspot) on CodePen.
Here’s how I remember: Whatever style of CSS is closest to the HTML is considered more relevant by browsers and will therefore be applied. To learn more about this concept, you can check out our guide to 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.
How To Land a Developer Role in the World of AI
A free checklist to you help you stand out from the competition featuring Software Developer and YouTube Creator Tech With Tim.
- Expert advice on how to build a portfolio
- Top programming languages to learn
- Resume building and interview tips
- Resources to strengthen communication skills
Download Free
All fields are required.
![HTML Projects for Beginners: How to Create a Personal Portfolio Page [Step-by-Step]](https://www.hubspot.com/hubfs/personal_portfolio.png)
![How to Embed Google Map in HTML [Step-By-Step Guide]](https://www.hubspot.com/hubfs/Google%20Drive%20Integration/How%20to%20Embed%20Google%20Map%20in%20HTML%20%5BStep-By-Step%20Guide%5D-2.jpeg)
![How to Create an HTML Tooltip [+ Code Templates]](https://www.hubspot.com/hubfs/Google%20Drive%20Integration/How%20to%20Create%20an%20HTML%20Tooltip%20%5B+%20Code%20Templates%5D.jpeg)
![How to Make an HTML Text Box [Examples]](https://www.hubspot.com/hubfs/html-text-box.webp)
