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)

Consider the case where you need to build two or more different buttons. Same common base styles, just a bit of difference between the buttons.

Below is an example, and do not forget to hover over the buttons too. 

.btn {
  padding: 2rem 4rem;
  border: 2px solid var(--color, black);
  background: transparent;
  font-size: 0.6em;
  border-radius: 2px;
}
.btn:hover {
  cursor: pointer;
  background: var(--color, black);
  color: white;
}


/* variations */

.btn.red {
  --color: red
}
.btn.yellow {
  --color: yellow
}
.btn.green {
  --color: green
}
.btn.blue {
  --color: blue
}
.btn.orange {
  --color: orange
}




<html>
 <head>
 </head>
 <body>
   <button class="btn">Hello</button>
	 <button class="btn red">Hello</button>
   <button class="btn yellow">Hello</button>
   <button class="btn green">Hello</button>
   <button class="btn blue">Hello</button>
   <button class="btn orange">Hello</button>
 </body>
</html>


codemirror

In this case, the properties that differ are the `background-color` and `border-color` of the variants. 

So, how would you do this? 

Here’s the typical solution.

Create a base class, say `.btn` and add the variant classes. Here’s an example markup: 




```html

<button class="btn">Hello</button>
<button class="btn red">Hello</button>

```

`.btn` would contain the base styles on the button. For example: 

```css

.btn {
   padding: 2rem 4rem;
   border: 2px solid black;
   background: transparent;
   font-size: 0.6em;
   border-radius: 2px;
 }

 /*on hover */
 .btn:hover {
   cursor: pointer;
   background: black;
   color: white;
 }

```

So, where does the variant come in? 

Here: 

```css

/* variations */

.btn.red {
  border-color: red
 }
.btn.red:hover {
  background: red
}

```

You see how we are duplicating code here and there? This is good, but we could make it better with CSS variables. 

What’s the first step? 

Substitute the varying colors with CSS variables, and don’t forget to add default values for the variables! 

```

.btn {
    padding: 2rem 4rem;
    border: 2px solid var(--color, black);
    background: transparent;
    font-size: 0.6em;
    border-radius: 2px;
  }
  
  /*on hover*/ 
  .btn:hover {
   cursor: pointer;
    background: var(--color, black);
    color: white;
  }
  
```
<br />


When you do this: `background: var(--color, black)` you’re saying, set the background to the value of the variable `--color` . However, if the variable doesn't exist, use the **default value** of `black`

Here’s the good part.

With the variants, you just supply the new value of the CSS variable like so: 

```css

btn.red {
    --color: red
 }

```

That’s all. Now when the `.red` class is used, the browser notes the different `--color` variable value, and immediately updates the appearance of the button. 

This is really good if you spend a lot of time building reusable components. 

  

Here’s a side by side difference 



```html

<button>Hello</button>
<button>Hello</button>

```

`.btn` would contain the base styles on the button. For example: 

```css

.btn {
   padding: 2rem 4rem;
   border: 2px solid black;
   background: transparent;
   font-size: 0.6em;
   border-radius: 2px;
 }

 /*on hover */
 .btn:hover {
   cursor: pointer;
   background: black;
   color: white;
 }

```

So, where does the variant come in? 

Here: 

```css

/* variations */

.btn.red {
  border-color: red
 }
.btn.red:hover {
  background: red
}

```

You see how we are duplicating code here and there? This is good, but we could make it better with CSS variables. 

What’s the first step? 

Substitute the varying colors with CSS variables, and don’t forget to add default values for the variables! 

```

.btn {
    padding: 2rem 4rem;
    border: 2px solid var(--color, black);
    background: transparent;
    font-size: 0.6em;
    border-radius: 2px;
  }
  
  /*on hover*/ 
  .btn:hover {
   cursor: pointer;
    background: var(--color, black);
    color: white;
  }
  
```
<br />


When you do this: `background: var(--color, black)` you’re saying, set the background to the value of the variable `--color` . However, if the variable doesn't exist, use the **default value** of `black`

Here’s the good part.

With the variants, you just supply the new value of the CSS variable like so: 

```css

btn.red {
    --color: red
 }

```

That’s all. Now when the `.red` class is used, the browser notes the different `--color` variable value, and immediately updates the appearance of the button. 

This is really good if you spend a lot of time building reusable components. 

  

Here’s a side by side difference 

Before We Begin

Getting started with CSS

Oh My Selectors!

CSS Fundamentals Everyone Should Know

Colors, colors, colors!

We all Need Units

Typography in CSS

The Box Model

Challenge: Practice with Texts, Margin, Padding and Borders

Getting creative with Backgrounds

Project: Build a Movie Order Page

Making Sense of CSS Gradients

Hands-on Practice with Gradients

Project: Build a Sign Up Page for a Startup

{New} Teach Me Positioning Like I'm Five

{New} A Detailed Look at CSS Variables ( a.k.a Custom Properties

{New} CSS Variables Real World Applications

{New} Long Live the CSS Grid

Final Words

Conclusion

Creating Component Variations using CSS Variables