Day 10

CSS and HTML together

But how do we get CSS onto a web page? There are three basic ways of adding CSS to a web page: Inline style, Internal and External stylesheets.

 

This post is part of the series 30 Days of Web Development.

In this series, we start from the basics and walk through everything you need to know to get started with Web Development.

CSS and HTML together

But how do we get CSS onto a web page? There are three basic ways of adding CSS to a web page: Inline style, Internal and External stylesheets.

Yesterday we played with changing the color of an HTML element via the DevTools.

Today we're going to look at how you add CSS to a web page.

How do you add CSS to a web page?

There are three basic ways of adding CSS to a web page.

  1. Inline style
  2. Internal stylesheet
  3. External stylesheet

1. Inline style

One way to add CSS to HTML is via Inline style. Inline style adds CSS directly inside any HTML element. To do this, you use the style attributeattr on the HTML element you want to add style to.

For example, here is our Heading element with the color blue added via Inline style.

<h1 style="color: blue">Heading Size 1</h1>

Inline here means what it sounds like: the style is applied in-line with the element.

You can apply CSS this way to any element. However, because of the way CSS rules sort themselves out, inline styles are generally avoided, especially in more complex projects.

Exercise: Inline Styles

  1. Open up the "css-practice.html" file from yesterday. If you don't have it open, here's a quick link.

On row 3, add the Inline style to the heading element, such that it reads like the following:

<html>
  <body>
    <h1 style="color:blue">Heading Size 1</h1>
  </body>
</html>

Save your changes. Open the HTML document in your Chrome browser and see the heading element change.

Additionally, if you open your Chrome DevTools, you'll see that the color:blue is now added the h1 styles.

2. Internal stylesheet

The second way to add CSS to an HTML file is within an HTML element called the style <style></style> element. Not to be confused with the "style" attribute used in Inline styles. They are very similar, but one is an attribute, and the one here is an element.

This approach requires that you add t