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.

Free Intro Guide to HTML & CSS [Download Now]

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.

 

 

   <body>

<h1 style="color: #CC0099">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>

</body>

 

Here’s how that would look on the front-end:

A heading targeted with inline CSS is hot pink

Image Source

How to Add Internal CSS to HTML

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.

 

 

   <body>

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

</body>



Here’s how that would look on the front-end:

 

 

   h1 {

color: #CC0099

}

 

Here’s how that would look on the front-end:

A heading targeted with internal CSS is hot pink

Image Source

How to Add an External CSS File to HTML

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:

 

 

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



Let’s use external CSS to change the background color and the font color of the header. 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>

<h1>An Eye-Catching Title</h1>

<p>In the external stylesheet, the background color is set to baby blue and the font color of the header is set to navy blue.</p>

<p>This is an ordinary paragraph. Since the default text color for the page is black, the paragraph is black.</p>

</body>

</html>



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

 

 

   body {

background-color: #89CFF0

}

h1 {

color: #000080

 }

 

Here’s how your site would look on the front-end:

The font color of the heading and background color are targeted with external CSS to be navy and baby blue respectively

Image Source

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 Aug 31, 2020 7:00:00 AM, updated August 31 2020

Topics:

HTML