Applying CSS Styles to HTML

Tutorial 5 of 5

Introduction

This tutorial aims to introduce you to Cascading Style Sheets (CSS), a style sheet language used for describing the look and formatting of a document written in HTML. You will learn the different ways to apply CSS styles to your HTML elements and understand when to use each method.

By the end of this tutorial, you should be able to:
- Understand what CSS is and how it interacts with HTML.
- Inline CSS directly within your HTML tags.
- Use internal CSS in the <style> tag.
- Link to external CSS files using the <link> tag.

Prerequisites: Basic knowledge of HTML is recommended. If you're unfamiliar with HTML, you might want to run through a HTML tutorial before proceeding.

Step-by-Step Guide

Understanding CSS

CSS stands for Cascading Style Sheets. It is used to control the style and layout of multiple web pages all at once. CSS can be added to HTML documents in 3 ways: Inline style, Internal style sheet, External style sheet.

Inline CSS

Inline styles are used to apply the unique style rules to an element, by putting the CSS rules directly into the start tag. It can be attached to an element using the style attribute.

<p style="color: red;">This is a paragraph.</p>

In the example above, the <p> element is styled with red color text.

Internal CSS

An internal CSS is used to define a style for a single HTML page. The styles are defined within the <style> element, inside the <head> section.

<head>
  <style>
    p {color: red;}
  </style>
</head>
<body>
  <p>This is a paragraph.</p>
</body>

Here, all <p> elements on the page will be styled with red color text.

External CSS

An external style sheet is ideal when the style is applied to many pages. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the <head> section.

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <p>This is a paragraph.</p>
</body>

In an external style sheet file (styles.css in this case), you might have something like:

p {
  color: red;
}

All <p> elements on the pages that link to this style sheet will have red text.

Code Examples

Let's dive into some code examples.

Example 1: Inline CSS

<!DOCTYPE html>
<html>
<body>
  <h1 style="color:blue;text-align:center;">This is a heading</h1>
  <p style="color:red;">This is a paragraph.</p>
  <div style="color:orange;">This is some text in a div element.</div>
</body>
</html>

In this example, each HTML element is styled differently using inline CSS. The heading is blue and centered, the paragraph is red, and the text in the div is orange.

Example 2: Internal CSS

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: linen;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

In this example, we apply a linen background to the body, and color the heading blue and the paragraph red.

Example 3: External CSS

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

And in the styles.css file:

body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}

This will style the page in the same way as the previous example, but the CSS is stored in an external file.

Summary

In this tutorial, we have learned how to apply CSS styles to HTML elements in three different ways: inline, internal, and external. The method you choose will depend on your specific needs and the scope of your project.

Practice Exercises

Create a HTML page and apply inline styles to all elements.
Convert the inline styles from the first exercise to an internal style sheet.
Finally, move the styles to an external stylesheet and link it to your HTML page.

Remember, practice makes perfect. The more you code, the better you'll get!

Additional Resources

Happy Coding!