How To Link Css Stylesheet In Hubspot Design Tools

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.

CSS describes how a page should look to the browser, which renders it accordingly. CSS can be used for a wide variety of stylistic purposes, including changing text and background color on a page, removing the underline from links, and animating images, text, and other HTML elements.

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.

Download Now: Free Intro Guide to HTML & CSS

How to Add CSS to HTML

There are three ways to add CSS to HTML. You can add inline CSS in a style attribute 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.

Here's another way to summarize the three ways you can add CSS to HTML:

Inline CSS: Requires the style attribute placed inside an HTML element.
Internal CSS: Requires the <style> element placed inside the head section of an HTML file.
External CSS: Requires the <link> element placed inside the head section of an HTML file.

Below we'll walk through each method for adding CSS to HTML and the ideal use cases for each. If you'd prefer to skip to a specific method, click on one of the jump links above.

How to Add Inline CSS to HTML

Inline CSS allows you to put CSS "in" HTML. To add inline CSS, you use a style attribute and place it inside the opening tag of an HTML element. Here's the syntax:

                                          
<element style="CSS property: value">

Inline CSS, otherwise known as the "embedded stylesheet," will override any other CSS targeting the same elements. Since it's the closest to HTML, browsers determine 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 — but it should be avoided when it's possible to use internal or external CSS.

Inline CSS Example

Let's say you want to change the color of a key term in a paragraph to a bright orange and leave the other text as is. To start, you'd wrap the key term in span tags. Then, set the color property to the hex color code for a shade of orange (#FF7A59), place it within a style attribute, and place the whole thing inside the opening <span> tag. Check it out below.

See the Pen bGqVdLQ by Christina Perricone (@hubspot) on CodePen.

How to Add Internal CSS to HTML

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.

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

Using internal CSS is considered a better practice than using inline CSS.

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 it separates the CSS and HTML into different sections but keeps it in the same document, internal CSS is ideal for one-page websites. 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. (Or you can use external CSS).

Internal CSS Example

Let's say you want to change the text color of every paragraph element on a web page to a navy blue color. In that case, you'd set the color property to the hex color code for a shade of navy (#33475B), place it within a CSS rule set with the type selector p, and place the whole thing inside the head section of the web page.

Here's how the HTML file would look:

                                                                   <!DOCTYPE html>
                      <html>
                      <head>
                      <style>
                      p {
                        color: #33475B;
                      }
                      </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>

Here's the result:

See the Pen Internal CSS Example by Christina Perricone (@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 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:

                                          
<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 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 Example

Let's use external CSS to style a div in HTML. Here's how the whole HTML file 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>

Here's how the mystyle.css file would look:

                                                                   div {
                        background-color: #EAF0F6;
                        color: #33475B;
                        border: 3px solid #00A4BD;
                        padding: 5px;
                      }

Here's how the div would look on the front-end:

A div styled with external CSS to have a gray background color, navy text color, and bright blue border

Adding All Three Types of CSS to HTML

Technically, you can use all three styles of CSS 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 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.

Imagine you're redesigning your site. You decide to load Bootstrap onto your website so you have an external stylesheet.

Maybe another part of your redesign is changing the color of your font from black to navy. You can make this change in your external stylesheet or in the head section of your HTML file. Let's say you do the latter, save the file, and 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 the body section and find a rogue style attribute defining this paragraph with inline CSS. Here's an example of how that might look:

See the Pen Using All Three Types of CSS by Christina Perricone (@hubspot) on CodePen.

In this hypothetical case, you could just delete the style attribute and solve the problem. But 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.

To avoid a situation like this, it's important to remember the rules of specificity when adding different types of CSS to your website.

Customizing 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.

New Call-to-action

css introduction

Originally published May 10, 2021 7:00:00 AM, updated August 23 2021