Table of Contents

CSS How To

There are 3 typical ways to include CSS in your webpages. Those 3 ways are:

  • Inline CSS
  • Internal CSS
  • External CSS

Inline CSS

In the previous section we gave you a simple example of how to use inline CSS. You simply include style as an attribute inside of your HTML selector like so:

<p style="text-align:center">I'm a paragraph</p>

And now your paragraph will be aligned to the center thanks to the inline CSS.

Internal CSS

To use internal CSS we can include styles in the head of our html document. So, our HTML page would look like the following:

<!DOCTYPE html>
<html>
    <head>
        <title>Learning CSS</title>
        <style>
        p{
            text-align:center;
        }
        </style>
    </head>
<body>

    <p>I'm a paragraph that will be centered via Internal CSS</p>
		
</body>
</html>

As you can see above we have included a new tag in the head of our document called <style>, then we have specified that we want all of our paragraphs to be aligned center. We'll learn more about this style of syntax in the next section.

External CSS

To use external CSS we will specify a location of an external CSS file. Inside of the head tag of our HTML document we will link to a separate .css file. This is referred to as using external CSS.

<!DOCTYPE html>
<html>
    <head>
        <title>Learning CSS</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
<body>

    <p>I'm a paragraph that will be centered via Internal CSS</p>
		
</body>
</html>

As you can see we referenced an external file called style.css by adding the following link tag

<link rel="stylesheet" type="text/css" href="style.css">

to the <head> of our HTML page. There are a few attributes and values that you will want to use inside of this link tag which include the rel="stylesheet", type="text/css", and href="style.css". The rel attribute is defining the relationship of the external file, the type is defining the type of file, and lastly the href attribute is defining the location of the external file.

And now if we have a file named style.css in the same location as our HTML document, it will reference a CSS file, which may look like the following:

body{
   background:blue;
}

p{
   text-align:center;
}

The file above will add a blue background to the body of our document and it will center align our paragraphs. Let's learn more about using CSS syntax in the next section.

Previous Section Next Section