How to add css to html

4 Ways to Add CSS in HTML (Simple Examples)

Welcome to a tutorial and examples on how to add CSS in HTML. Just started with web development and wondering how CSS styles are added into HTML? There are actually a couple of ways to do it:

That’s all for the basics, but read on for more examples!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

QUICK SLIDES

TABLE OF CONTENTS

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

QUICK NOTES

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

CSS IN HTML

All right, let us now get into the examples of how to add CSS in HTML.

1) INLINE CSS (DIRECTLY STYLE ELEMENT)

Yep, this is probably the easiest method. Just define the styles on an element using the style attribute. But I am personally not a fan of inline CSS – The styles only apply to that one element.

Things get messy when we have hundred of style scattered all over the place; The whole idea of CSS is to actually keep all the styles in one place for easy maintenance.

2) INTERNAL CSS (STYLE TAG)

This should be pretty self-explanatory – Define a

Hello World!

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Know How to Add CSS to HTML with Examples

Table of Contents

CSS is a design language that improves the aesthetic of a website by making simple or uninteresting text more appealing. CSS is responsible for visual structure and layout, whereas HTML is primarily responsible for textual information. HTML is a markup language, whereas CSS is a style sheet language. It is responsible for describing the presentation of an HTML or XML document (including XML dialects such as SVG, MathML or XHTML). CSS specifies how elements should appear on a screen, on paper, in speech, or in other forms of media.

CSS may be added to HTML in three different ways. To style a single HTML element on the page, use Inline CSS in a style attribute. By adding CSS to the head section of our HTML document, we can embed an internal stylesheet. We can also connect to an external stylesheet that separates our CSS from our HTML.В

Now let’s discuss all the methods one by one.

Post Graduate Program: Full Stack Web Development

Inline CSS

Style rules can be applied to individual HTML elements using inline CSS. Inlining CSS is the process of embedding CSS into an HTML file rather than using an external CSS file. Because inline CSS only allows us to apply a single style to one HTML element, it’s only useful for establishing unique properties. Inline CSS is advantageous since it decreases the number of files that the browser must download before the web page can be shown. The browser loads an HTML file first, then downloads the CSS file when using external CSS. We only need to download one HTML file instead of two using inline CSS, which speeds up the process.

The inline styles will only affect the HTML element to which the style attribute with CSS-property values is applied. The first paragraph in the example below will be styled in red with a 20px font size. The properties apply just to the first line of the code, not the full code.

How to add CSS to HTML (With Link, Embed, Import, and Inline styles)

Matthew James Taylor 19 February 2009
Updated 26 March 2022

Adding CSS to HTML can be confusing because there are many ways to do it.

CSS can be added to HTML by linking to a separate stylesheet file, importing files from existing stylesheets, embedding CSS in a style tag, or adding inline styles directly to HTML elements. Many of these methods can also be done with javascript.

Today we’re going to explore the pros and cons of each CSS method, see how they work, and learn when to use each one.

We’ll cover how to:

We’ll also cover some of the common questions developers have when inserting CSS into HTML documents:

Let’s get started.

Please enable JavaScript

1. How to Link to a Stylesheet File

This is the most common method of attaching CSS rules to HTML documents.

The rel attribute is set to stylesheet to tell the browser that the linked file is a Cascading Style Sheet (CSS).

If you’re using HTML5, the type attribute is not required, you can remove it and save a few bytes per page.

The href attribute is where you specify the path to your CSS file.

If the CSS file is in the same folder as your HTML file then no path is required, you only need to specify the filename like in the example above.

If it’s saved in a folder, then you can specify the folder path relative to the HTML file like this:

You can also specify a path relative to the root of your domain by prefixing with a forward slash like this:

Absolute URLs also work:

The media attribute in a link tag specifies when the CSS rules are to be applied. Here are the most common values:

Advantages of linking to a separate CSS file

Disadvantages

You can include as many CSS files in your HTML document as you like by adding multiple link tags, just remember, each file requires an additional HTTP request.

2. How to Embed CSS With a Style Tag

You can embed CSS rules directly into HTML documents by using a style tag. Here’s what this looks like:

Similar to the link tag, the type attribute can be omitted for HTML5, and the media value controls when your styles are applied (leave it off to default to all devices).

Add your CSS rules between the opening and closing style tags and write your CSS the same way as you do in stand-alone stylesheet files.

CSS rules are render-blocking so it’s recommended to add style tags into the of the HTML document so they download as soon as possible. We’ll discuss render-blocking CSS shortly.

Advantages of embedded style tags

Disadvantages

3. How to Add Inline Styles to HTML Elements With the Style Attribute

Style rules can be added directly to any HTML element. To do this, simply add a style attribute to the element then enter your rules as a single line of text (a string of characters) for the value.

Here’s an example of a heading with inline styles:

Advantages of inline styles

Disadvantages

4. How to Load a Stylesheet File With the @import Rule

Another interesting way to add CSS to an HTML page is with the @import rule. This rule lets us attach a new CSS file from within CSS itself. Here’s how this looks:

Just change «newstyles» to the name of your CSS file and be sure to include the correct path to the file too. Remember the path is relative to the current CSS file that we are in, if the CSS is embedded into the HTML page then the path is relative to the HTML file.

Advantages of the @import rule

Disadvantages

5. How to Inject CSS With Javascript

Sometimes we need to apply CSS from within Javascript. We can do this in the following ways:

Inject an external stylesheet file with javascript

To do this we create a link element, add our CSS file path as the href attribute value, then inject it into the page with javascript:

Want to inject CSS into a shadow DOM? See the instructions in my article: Style Blocker: How To Prevent CSS Cascade With Shadow DOM

Insert a block of rules into a page with javascript

This method creates a style element, inserts our CSS rules as a string, then attaches the element to the HTML head.

Add inline styles to individual elements with javascript

In this method we first get a handle on the element(s) we want to change, then we add CSS properties.

CSS and Page Performance

So now we’ve covered all the methods of adding CSS to HTML the next step is to learn how to put them all together and improve your website speed.

How to minify CSS to speed up your website

CSS in its hand-written state is quite verbose. We can reduce its file size by a process of minification.

What is CSS minifying?

Minifying CSS is the process of removing redundant data without affecting the browser’s rendered output, this includes removing whitespace, line breaks, comments, unused code, and switching to shorthand properties to save space.

I recommend using CSS minifyer, it’s a free online tool. Just make sure you keep a copy of your unminified CSS as your source code.

How to Inline Your Above-The-Fold CSS to Improve Page Rendering Time

If you want your page to load fast then you need to prioritize your above-the-fold content.

Above-the-fold content is any content that is visible in the viewport before you scroll down the page, naturally, this will be different for different sized devices and screens.

There is no exact answer to where the ‘fold’ is — you need to decide how far down the page is right for you based on the screen sizes of your website visitors. Check your site statistics for insights on this.

Once you’ve made a call on your page fold, identify all elements that appear above it, then inline that CSS in a style tag.

Next, link to your main stylesheet in a non-render-blocking way. For most modern browsers you can do this by adding the following attributes to your link tag:

Check async CSS loading on icanuse.com for the latest support stats.

If you need to support older browsers, use the loadCSS polyfill which does the same thing with javascript.

This method works by utilizing browser caching for the main stylesheet and maximizes rendering speed by inlining CSS that’s required for the initial page load, very neat!

Use Minimal CSS for Additional Speed Gains

The most important thing you can do to stop CSS from slowing down your website is to use as little as possible. It’s surprising how little CSS you need to make a beautiful-looking website.

I aim for a stylesheet small enough to be inlined on every page eliminating extra HTTP requests. This ensures my pages load with a single request (not including images).

Conclusion

So now you’ve learned all the methods of adding CSS to HTML and you’ve seen how they can work together to speed up your website.

I hope you’ve found this tutorial valuable.

Do you use

Are you building a responsive website? The following articles may help you:

And for a bit of fun, check out my Responsive house plan which changes layout depending on the size of the page.

Web design

Web design

Web design

Web design

Web design

Web design

Web design

Web design

Architecture

Web design

Web design

Web design

Web design

Matthew James Taylor

Artist. Designer. Author.

I’ve been running this website since 1997.

I cover all the things I care about such as art, web design, architecture, life drawing, comics and much more.

report this ad report this ad

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

Written by Anna Fitzgerald

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.

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:

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

Here’s how the HTML file would look:

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

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.

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

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

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

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.

Originally published May 10, 2021 7:00:00 AM, updated April 20 2022

How to add CSS to a Webpage

When it comes to adding CSS to your document, you have a choice of methods. However, one method stands out as the most common.

Inline Styles

With inline styles, style sheet information is applied directly to the HTML element. Instead of defining the style once, then applying the style against all instances of an element (say the

tag), you add the style directly to the specific element you want the style to apply to.

While inline styles can be a quick and convenient way to add styles to an HTML document, this method should be used sparingly.

Adding inline styles all over a website can make it much more difficult to maintain. A small change can become a major undertaking if the style has been applied to many pages across the site.

Embedded Styles

You add all CSS information to one part of the document (usually the top). This allows you to style any element on the page from a single place. You do this by embedding the CSS information within

Here’s an example of where that code fits in to an HTML document:

External Styles

External style sheets are the most common method of applying styles to a website. Most modern websites use an external stylesheet to apply site-wide styles to the whole website.

External styles refer to creating a separate file that contains all style information. This file is then linked to from as many HTML pages as you like. This will often be the whole website.

For the following example, I’ve taken the styles from the above (embedded) example, moved them to an external style sheet, then linked to that file.

So, you can see that the HTML file no longer contains any actual CSS code. The CSS code is located in the external file.

Import Styles

You can also use the CSS @import rule to import an external style sheet.

To do this, use the

Here, we use the same style sheet as in the previous example, but this time we use the @import rule to import the style sheet.

Note that this method can affect performance and it’s often more efficient to use the first method (i.e. with the tag).

However, the @import rule can also be used from within the external style sheet itself (in order to import another style sheet into that one) without incuring the same performance issues.

You’re not limited to just one method of applying styles to a document. You can combine all three methods if required.

Most modern websites use external styles for most (if not all) of their styles.

However, there are many valid reasons why they might also need to use one or both of the other methods.