Start modifying how your pages look and feel in this introductory exploration of CSS.

Web Essentials

If you’re looking to style your front-end, this module is for you. You'll find it particularly useful if you're coming from some other area of software development, although prior experience is not required.

In this module, you will start with a short tour of CSS. You’ll get to experiment with it through examples that explain its role and behavior. From there, you will then dive deep into each technology, exploring concepts like CSS patterns to make your web pages look good.

By the end of this module, you will be able to beautify your own web applications.

Cascading Style Sheets (CSS)

Let's go straight to an example: 

<br />

## Example
Consider the markup below: 


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>A Simple Page</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
  <div class="one">
            One Hello World!
            <div class="two">
                Two Hello World
                <div class="three">
                Three Hello World
                </div>
            </div>
  </div>
</body>
</html>


Please look very closely. Class, `.one` is a parent to `.two` and `.two` is a parent to `three`. Some deep nested stuff going on there.

So, if you styled the text in `.one` like this:


Let's go straight to an example: 

<br />

# Example
Consider the markup below: 


The EM unit can cause unintended results when not understood. Let me save you the stress. 

The problem with the EM unit.

The EM unit can cause unintended results when not understood. Let me save you the stress.