NSI Rocks !

Introduction to CSS

What is CSS?

CSS (Cascading Style Sheets) is the language that allows you to style your HTML pages. It defines what your HTML elements should look like: colors, sizes, fonts, and much more. With CSS, you can create simple and professional designs.

Example of an HTML page without CSS

index.html
<!DOCTYPE html>
<html>
<head>
  <title>My first page</title>
</head>
<body>
  <h1>Welcome!</h1>
  <p>This is a simple web page.</p>
</body>
</html>

Example of the same page with CSS

index.html
<!DOCTYPE html>
<html>
<head>
  <title>My first page</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1 class="title">Welcome!</h1>
  <p class="text">This is a simple web page.</p>
</body>
</html>
In this second case, we notice the use of the class attribute in the HTML code, as well as the values title and text.These values correspond to classes created in the style.css file and modify the appearance of the result.

Welcome!

This is a simple web page.

<h1>Welcome!</h1>
<p>This is a simple web page.</p>

Welcome!

This is a simple web page.

<h1 class="title">Welcome!</h1>
<p class="text">This is a simple web page.</p>

How to Use CSS?

Adding CSS directly in the HTML file (inline CSS)

You can write CSS directly in your HTML tags, but this quickly becomes complicated to maintain.

<h1 style="color: red; text-decoration: underline;">Important text</h1>

Adding CSS in a <style> tag

This is an intermediate solution where CSS remains in the HTML file.

<head>
  <style>
    h1 {
      color: green;
      text-transform: uppercase;
    }
  </style>
</head>

Adding CSS in a separate file

This is the best practice: a separate CSS file.

<link rel="stylesheet" href="style.css">
Tips for getting started well
  • Experiment! Modify property values and observe what changes.
  • Use development tools: Right-click on your page, choose "Inspect" and manipulate CSS live.
  • Keep your files organized: a clear HTML file and a well-structured CSS file make maintenance easier.
With these basics and a little practice, you'll soon be able to bring your own designs to life!