How to Add CSS to HTML: Understanding Inline, Internal & External CSS

Jamie Juviler
Jamie Juviler

Published:

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.

Site owner learning how to add CSS to HTML

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]

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.

We're committed to your privacy. HubSpot uses the information you provide to us to contact you about our relevant content, products, and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy.

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
Loading your download form

You're all set!

Click this link to access this resource at any time.

Access now
Learn more
We're committed to your privacy. HubSpot uses the information you provide to us to contact you about our relevant content, products, and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy.

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:

<element style="CSS property: value">

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.

<head> <style> selector { CSS property: value; } </style> </head>

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:

<!DOCTYPE html> <html> <head> <style> p { color: #FF7A59; } </style> </head> <body> <h2>Internal CSS Example</h2> <p>The default text color for the page is black. However I can change the color of every paragraph element on the page using internal CSS.</p> <p>Using internal CSS, I only need to write one rule set to change the color of every paragraph elemnet.</p> <p>With inline CSS, I'd have to add a style attribute to every single paragraph in my HTML.</p> </body> </html>

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:

<link rel="stylesheet" type="text/css" rel="noopener" target="_blank" href="mystyles.css">

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:

<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" rel="noopener" target="_blank" href="mystyle.css"> </head> <body> <div> <h1>External CSS Example</h1> <p>In the external stylesheet, the div is styled to have a background color, text color, border, and padding.</p> </div> </body> </html> div { background-color: #EAF0F6; color: #33475B; border: 3px solid #00A4BD; padding: 5px; }

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.

We're committed to your privacy. HubSpot uses the information you provide to us to contact you about our relevant content, products, and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy.

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
Loading your download form

You're all set!

Click this link to access this resource at any time.

Access now
Learn more

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.

coding-hacks

Topics: HTML

Related Articles

We're committed to your privacy. HubSpot uses the information you provide to us to contact you about our relevant content, products, and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy.

Tangible tips and coding templates from experts to help you code better and faster.

CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

START FREE OR GET A DEMO