Skip to main content
  1. Web Development Course/
  2. Introduction to CSS/

What is CSS?

Alejandro AO
Author
Alejandro AO
I’m a software engineer building AI applications. I publish weekly video tutorials where I show you how to build real-world projects. Feel free to visit my YouTube channel or Discord and join the community.
Introduction to CSS - This article is part of a series.
Part 1: This Article

Awesome! You’ve learned how to create a web page using HTML. Now it’s time to learn how to make your web pages look beautiful using CSS.

CSS stands for Cascading Style Sheets. It is a language that is used to style web pages. It is used to control the layout of multiple web pages all at once. It can be used to define text styles, table sizes, and other aspects of web pages that previously could only be defined in a page’s HTML.

How does CSS work?
#

CSS is a very powerful tool for web developers. It allows you to create consistent and attractive web pages without having to write a lot of code. It also allows you to make changes to your website’s appearance quickly and easily.

To give you a taste of what it looks like to use CSS, here is an example of a CSS rule that changes the color of all the headings on a web page:

h1 {
  color: red;
}

You see? It uses the HTML element name as a selector, and then inside the curly braces, you define a CSS property (in this case, color) and a value (in this case, red). Pretty simple, right?

Now let’s add this CSS rule to our web page. We will add it to the <head> element of our HTML file. Here is what our HTML file looks like with the CSS rule added:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page</title>
    <style>
      h1 {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>My First Web Page</h1>
    <p>This is my first web page.</p>
  </body>
</html>

As you can see, we have added a <style> element to our HTML file. The <style> element contains CSS code that changes the color of the <h1> element to red. The result is a web page with a red heading. Pretty cool, right?

Next Steps
#

We will now explain the different ways you can add CSS to your web pages. Let’s get started!

Introduction to CSS - This article is part of a series.
Part 1: This Article