What is CSS?

CSS (Cascading Style Sheet) is one of the three cornerstones of the web, along with HTML and JavaScript. It’s what brings life to websites through colors, styling, positioning and much more. Thus, knowing CSS is hugely valuable in today’s labor market!

Cascading Stylesheets — or CSS — is the first technology you should start learning after HTML. While HTML is used to define the structure and semantics of your content, CSS is used to style it and lay it out. For example, you can use CSS to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.

Once you understand the fundamentals of HTML, we recommend that you learn HTML and CSS at the same time, moving back and forth between the two topics. This is because HTML is far more interesting and much more fun to learn when you apply CSS, and you can't really learn CSS without knowing HTML.

 

A quick CSS example

The above descriptions may or may not have made sense, so let's make sure things are clear by presenting a quick example. First of all, let's take a simple HTML document, containing an <h1> and a <p> (notice that a stylesheet is applied to the HTML using a <link> element):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My first CSS Example</title>
    <link rel="stylesheet" href="style.css"> <!--This will link to your css file saved as .css --> 
  </head>
  <body>
    <h1>Welcome to my Website!</h1>
    <p>My first CSS Example</p>
  </body>
</html>

Now let's look at a very simple CSS example containing two rules:

h1 {
  color: orange;
  background-color: black;
  border: 1px solid black;
}

p {
  color: red;
}

The first rule starts with an h1 selector, which means that it will apply its property values to the <h1> element. It contains three properties and their values (each property/value pair is called a declaration):

  1. The first one sets the text color to blue.
  2. The second sets the background color to black.
  3. The third one puts a border around the header that is 1 pixel wide, solid (not dotted, or dashed, etc.), and colored black.

The second rule starts with a p selector, which means that it will apply its property values to the <p> element. It contains one declaration, which sets the text color to red.

In a web browser, the code above would produce the following output:

firt css

SEE CODE LIVE ON CODEPEN

This isn't too pretty, but at least it starts to give you an idea of how CSS works.

CSS Solved a Big Problem

HTML was NEVER intended to contain tags for formatting a web page!

HTML was created to describe the content of a web page, like:

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large websites, where fonts and color information were added to every single page, became a long and expensive process.

To solve this problem, the World Wide Web Consortium (W3C) created CSS.

CSS removed the style formatting from the HTML page!

 

CSS Saves a Lot of Work!

The style definitions are normally saved in external .css files.

With an external stylesheet file, you can change the look of an entire website by changing just one file!

CSS OUTLINE