Introduction to CSS

Tutorial 3 of 5

Introduction to CSS

1. Introduction

Goal of the tutorial

This tutorial aims to introduce you to the basics of CSS (Cascading Style Sheets), an essential language for web development that is used to describe how HTML elements should be displayed.

Learning outcomes

After completing this tutorial, you will be able to:
- Understand what CSS is and why it's important
- Write basic CSS syntax
- Apply CSS to HTML to style web pages

Prerequisites

Basic understanding of HTML is expected. If you're not familiar with HTML, consider reviewing an HTML tutorial first.

2. Step-by-Step Guide

CSS is used to control the look and feel of your web pages. It allows you to specify styles for individual HTML elements, whole pages, or entire websites.

CSS Syntax

A CSS rule-set consists of a selector and a declaration block. The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons.

selector {
    property: value;
}

How to Add CSS

There are three ways to insert CSS:
- Inline: by using the style attribute inside HTML elements
- Internal: by using a <style> block in the <head> section of the HTML file
- External: by linking to an external CSS file using <link> tag in the <head> section of the HTML file

Best Practices

Try to use an external CSS file where possible. This keeps your HTML clean and makes your styles reusable across different pages.
Use comments (/* This is a comment */) to describe your code and make it easier to understand.
Keep your CSS code DRY (Don't Repeat Yourself). If multiple elements share the same styles, group them in one selector.

3. Code Examples

Example 1: Inline CSS

HTML elements can be styled directly using the style attribute. However, this method is generally not recommended because it can quickly become unmanageable.

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

Example 2: Internal CSS

You can include CSS in your HTML document within <style> tags in the <head> section.

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

Example 3: External CSS

The best way to include CSS is through an external file. This keeps your HTML clean and your styles reusable.

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

In your styles.css file:

p {
  color: green;
}

4. Summary

In this tutorial, we've covered the basic concepts of CSS, including its syntax, how to include it in HTML, and some best practices. The next step is to dive deeper into CSS to learn about more complex selectors, the box model, layout techniques, and responsive design.

5. Practice Exercises

Create an HTML page with a <p> tag and use inline CSS to change its color.
Create an HTML page with a <div> and a <p> tag. Use internal CSS to give them different background colors.
Create an HTML page with a <h1> tag and an external CSS file. Use the CSS file to change the font size of the <h1> tag.

Remember, practice is crucial in mastering CSS. Try to experiment with different properties and values and see what they do. Good luck!