3 minutes read
CHEAT SHEET: How To Add CSS To HTML

CHEAT SHEET: How To Add CSS To HTML

CSS is an invaluable tool for adding style and clearly formatting information to a web page designed with HTML. Far beyond just simple layout and adding static images, CSS offers options for adding dynamic, user experience-friendly front-end elements that can transform a static HTML page into an interactive application that wows customers and clients. This guide walks you through the basics and essential steps you need to add CSS to HTML for any project.

How to Add CSS to HTML

CSS offers a dynamic toolkit to take web pages from standard or generic to professional and dynamic. With CSS, you can control the text size, color, font, the spacing between elements, the layout or position of elements, background images or background colors that can be used, different displays for different devices and screen sizes, and many other elements. So how do you add CSS to HTML? Let’s walk through what you need to know to add this powerful tool to your programming arsenal.

CSS stands for Cascading Style Sheets.
CSS allows you to apply specific styles to specific HTML elements and control how the HTML.elements are displayed.

There are three main methods of including CSS in an HTML document:

  • Inline CSS
  • Embedded/Internal CSS
  • External CSS

Let’s look at all three methods of adding CSS to HTML with examples.

Inline CSS

With an inline style, a unique style is applied to a single element.
In order to use an inline style, add the style attribute to the relevant tag.

The example below shows how to create a paragraph with a gray background and white text:

<p style="color:white; background-color:gray;">

   This is an example of inline styling.

</p>

Try It Yourself

 

Result:

CHEAT SHEET: How To Add CSS To HTML by SoloLearn

Note, the CSS property:value pairs are separated by semicolons.

Embedded/Internal CSS

Internal styles are defined within the <style> element, inside the head section of an HTML page.

For example, the following code styles all paragraphs:

<html>

  <head>

     <style>

     p {

        color:white;

        background-color:gray;

     }

     </style>

  </head>

  <body>

     <p>This is my first paragraph. </p>

     <p>This is my second paragraph. </p>

  </body>

</html>

Try It Yourself

All paragraphs have a white font and a gray background:

CHEAT SHEET: How To Add CSS To HTML by SoloLearn

 

You can define any number of <style> elements in an HTML document but they must appear inside the <head> tag.

External CSS

With this method, all styling rules are contained in a text file, which is saved with the .css extension.

This CSS file is then referenced in the HTML using the <link> tag. The <link> element goes inside the head section.

Here is an example:

The HTML:

<head>

  <link rel="stylesheet" href="example.css">

</head>

<body>

  <p>This is my first paragraph.</p>

  <p>This is my second paragraph. </p>

  <p>This is my third paragraph. </p>

</body>

The CSS:

p {

  color:white;

  background-color:gray;

}

Try It Yourself

Result:

CHEAT SHEET: How To Add CSS To HTML by SoloLearn

Both relative and absolute paths can be used to define the href for the CSS file. In our example, the path is relative, as the CSS file is in the same directory as the HTML file.

Using external style sheets is the preferred way to add styles to the HTML documents.

Now that you know the key steps to follow, take your newfound skills to the coding playground at SoloLearn to try them out on real-world coding challenges and projects. 

Or, if you want to know more, try out our CSS or HTML Fundamentals courses to receive detailed instructions, complete quizzes to test knowledge, and continue to build out your programming skill set.