3 Ways You Can Add CSS To HTML

by DM
how to add css to html

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:

  1. Inline by way of the style attribute.
  2. Internal by embedding CSS with a style tag in the head section.
  3. 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!

inline css example
adding inline css to html

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:

  1. Styles get mixed-in with HTML syntax making code difficult to read and maintain.
  2. 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!

internal css example
Give a class to the second h1 to add its unique style.

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.

adding internal css to html

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 :

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

new css file
Make a new file in VS Code.
create an external css stylesheet
Save your file with a .css extension!
  1. 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).

external style sheet CSS
A CSS file only contains styles! Don’t add HTML tags.

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

add external css to html file
Link your .css file in your HTML document. You need to TELL your browser to use that stylesheet.
adding external css to html

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?

More: How To Create An HTML Project For Beginners (guided tutorial)

Related Posts