Lesson 2 – Including CSS3 to HTML5

There are four different methods to include CSS3 into your HTML5 document. We will discuss them one by one.

Inline CSS

The first method is to write CSS directly in the opening tag of the element using the Style attribute. In this case, the style rules will apply only to that element. Take a look at the following example.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>Inline CSS</title>
</head>
<body>
    

This is an example of inline CSS

This is how you can add inline CSS to an element.

</body> </html>

The above code will produce the following result.

This method works but it is impractical, especially if you need to apply multiple styles to an element.

Embedded CSS

Another method is to include the style <style> element directly into the head <head> element of the HTML5 document. It enables you to apply style rules to all the elements in the document.

This is how you embed CSS within the <head></head> tags.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Embedding CSS In Head Element</title>
    <style>
        div {
            text-align: center;
        }
        h1 {
            color: red;
            text-transform: uppercase;
            font-size: 20px;
            font-weight: 400;
        }
    </style>
</head>
<body>
    

How to Embed CSS within Head Tags

This is how you can embed CSS within head tags.

</body> </html>

External CSS

This is perhaps the best method to include CSS to your document. In this method, you create a separate stylesheet with .css extension. Subsequently, you use the <link> element within the <head></head> tags to include the stylesheet to your HTML5 document.

Have a look at the following example.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>Including External Stylesheet</title>
</head>
<body>
    

Including External Stylesheet

This is how you can include external stylesheet in HTML5.

</body> </html>

Now we style heading 1 and paragraph elements by writing the following code on the external style sheet.

h1 {
    font-family: Arial, Helvetica, sans-serif;
    color: red;
    letter-spacing: 1px; 
}
p {
    font-size: 24px;
    letter-spacing: 0.5px;
}

Imported CSS

Just like the link <link> method, you can use the import rule to include an external stylesheet. The following is the generic syntax of the import rule.

<!DOCTYPE html>
<html lang="en">
<head>
    <@import "URL">
</head>
<body>
    
</body>
</html>

You will add the actual URL of the file containing CSS rules in place of the URL in the above code.

In the next lecture, we will study CSS3 colors.