If you鈥檙e 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鈥榯 look good by itself 鈥� or at least not in my opinion. That鈥檚 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.
HTML and CSS go hand in hand, but it鈥檚 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
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:
Let鈥檚 walk through each of these methods in more detail and discuss their use cases.
Inline CSS is placed 鈥渋nside鈥� 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 by 探花精选 () on .
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鈥檚 what that looks like:
See the Pen by 探花精选 () on .
Because the inline CSS is written in the <span> tag, it only applies to the contents of that span tag.
Inline CSS is 鈥渃losest鈥� 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鈥檚 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鈥檚 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鈥檚 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 鈥渙range鈥� with the same rule. Here's how I would do that with inline CSS:
See the Pen by 探花精选 () on .
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鈥檚 why it鈥檚 considered a better practice to separate your HTML and CSS code, as we鈥檒l see with internal and external CSS.
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鈥檚 the syntax:
See the Pen by 探花精选 () on .
Let鈥檚 go back to our orange example from above. If we want to make every instance of the word 鈥渙range鈥� the color orange, we鈥檒l 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.
Then, I鈥檒l add <style></style> tags to the <head> section of the HTML document. Inside the <style> tags, I鈥檒l 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 by 探花精选 () on .
Now, if we want to change the color of every instance of 鈥渙range鈥� at once or style them in other ways, we need only modify the rules for the .orange selector.
See below: I鈥檝e 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 by 探花精选 () on .
Internal CSS is usually better than inline CSS because it鈥檚 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鈥檒l 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鈥檒l run into a similar problem as with inline CSS: To change a style rule on multiple pages, you鈥檒l need to update the internal CSS in each HTML file individually. Again, not ideal.
That鈥檚 why it鈥檚 better to use external CSS in this case. That鈥檚 next!
External CSS looks like internal CSS, but it isn鈥檛 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鈥檛 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鈥檚 what that looks like:
<link rel=鈥渟tylesheet鈥� type=鈥渢ext/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鈥檝e most often seen them called 鈥渟tyles.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.
Going back to our orange example, we鈥檒l 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 by 探花精选 () on .
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.
External CSS is considered a best practice for a few reasons:
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.
Technically, it鈥檚 possible to use external, internal, and inline CSS all on the same website. And if you鈥檙e running a larger website, chances are you鈥檙e 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 鈥淐ascading Style Sheets.鈥� The 鈥渃ascading鈥� part means that styles can inherit and override other styles that had previously been declared. This hierarchy is called specificity. Here鈥檚 how specificity works for the three methods we鈥檝e discussed:
Here鈥檚 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:
See the Pen by 探花精选 () on .
Here鈥檚 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.
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.