How do you add CSS to HTML? How can you style your HTML content?
CSS, Cascading Style Sheets, is the styling language of the web. It complements HTML well by incorporating a visual language to content so your HTML isn’t hella boring.
Read: HTML For Beginners – A Step-by-Step Guide To HTML Tags
There are 3 different ways you can add CSS to HMTL pages:
- Inline by way of the style attribute.
- Internal by embedding CSS with a style tag in the head section.
- External by linking to an external CSS file.
Each method of CSS integration has its pros and cons. Let’s go over when you should use each and when you should not.
Inline CSS
Inline CSS goes inside HTML tags by way of the style attribute.
In turn, the style attribute takes on property-value pairs separated by a colon ( : ). Different properties are separated by a semicolon ( ; ).
One property (color) with its corresponding value (purple).
<p style="color: purple"></p>More properties (color AND font-size) with their corresponding values.
<p style="color: blue; font-size:200%;"></p>Try it!
Tip: there are a lot of CSS properties – you don’t need to remember them.
Start familiarizing yourself by browsing here. Afterward, just google based on your needs.
The more you use CSS to style web pages, the more exposure you will get and the more familiar you will become with certain CSS properties.
Problems with inline CSS
There are two main problems with inline CSS:
- Styles get mixed-in with HTML syntax making code difficult to read and maintain.
- Styles are linked to specific tags so if a certain style applies to more than one HTML element, you have to repeat the style in each tag. This makes code messy (and, let’s be real, who wants to have to re-write the same styles over and over and over again?).
To address these problems with inline CSS, let’s take a look at a better way of including CSS into a webpage – internal CSS.
Internal CSS
Internal CSS still applies CSS in the HTML document, however, it’s a cleaner method than inline CSS. Why? Because you don’t add your styles in each line of HTML code.
Instead, add CSS within the style tags, <style></style>, inside the <head> of your HTML document.
It’s good practice, though not necessary, to set up a type attribute, type="text/css", to tell the browser what styles to apply in the document.
<head>
<style type="text/css">
p {
Color: red;
Font-size: 200%;
}
</style>
</head>Note:
- stylings are applied to ALL paragraph elements since referencing
p
- a semicolon ( ; ) is necessary when you have more then one property
- you don’t need a semicolon if you only have one property or for the last property, but it’s good practice to include it
Try it!
Notice how we only need to set color as blue once (no more inline CSS repeats here!), then target the element with a unique style by way of giving it a class.
We have now cleaned up our code significantly by moving from inline CSS to internal CSS.
However, we are still adding our styles in the same document that we write our HTML content in.
There is an even better way to include CSS to your webpage without mixing languages – external CSS.
External CSS
External CSS is good for decluttering code since it keeps CSS separate from HTML by storing CSS off the page you are working on.
There are two steps to creating a CSS external style sheet :
- Save your styles in a new file with the extension “.css” (unlike your html file which has a “.html” extension).
Read: HTML For Beginners – A Step-by-Step Guide To HTML Tags
- Reference the .css file in the HTML file by way of the self-closing link tag.
<link type="text/css" rel="stylesheet" href="your .css file path">Link attributes explained
type
again it’s optional and serves the same purpose as when used for internal CSS in the style tag – it lets the browser know what styling is applied.
rel
identifies the relationship between the .css file and the .html file – in this case (and all I have ever seen), the .css file is a stylesheet.
href
points to the location of your .css file.
Be careful with the file path you provide – if it’s incorrect, you will be sending your browser on a wild goose chase and no styles will render.
The .css file only contains the styles – basically element references, properties, and values. It shouldn’t contain HTML tags (so NO
<style>tag).
If you include anything other than just styles in the .css file, the browser won’t render the styles (this warning comes from personal experience).
NOTE: an external CSS style sheet needs to be saved with a .css extension or it won’t work.
There you go – now you have 3 ways to add CSS to HTML. Ready to start styling?