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)

## Intended audience
This module is designed for anyone who wants to learn the basics of Cascading Style Sheets (CSS). It will prepare you to take the initial steps towards learning the basics of CSS, styling text, images, CSS gradients, flexbox, and CSS grid. You’ll have full command of styling the web pages at the end of this module.


## Module structure
This module contains 18 main chapters, namely:

1. __Introduction__ is based on the general guideline for taking this module.

2. __Getting Started with CSS__ is about the rules in which CSS works.

3. __Oh My Selectors!__ elaborates on different selectors types. This will also let us know when and which selector we should use.

4. __CSS Fundamentals Everyone Should Know__ describes the working of CSS by defining the concept of cascade and inheritance.

5. __Colors, colors, colors!__ teaches us about color selection and different color tools.

6. __We all Need Units__ describes units in CSS for text, images, and spacing. 

7. __Typography in CSS__ elaborates on different kinds of font types and styles.

8. __The Box Model__ introduces us to borders, padding, and margins in a box model.

9. __Challenge: Practice with Texts, Margin, Padding, and Border__ tests our mastery of basic concepts of CSS.

10. __Getting creative with Backgrounds__ explains how to change and make the background attractive by using different images.

11. __Project: Build a Movie Order Page__ helps us practice by creating a project using different concepts discussed earlier.


12. __Making Sense of CSS Gradients__ teaches us about different types of gradients and how they function.

13. __Hands-on Practice with Gradients__ tests our mastery of gradients by giving different problems. 

14. __Project: Build a Sign Up Page for a Startup__ helps us create a new sign-up page.


15. __{New} Teach Me Positioning Like I'm Five__  teaches us about the best way of positioning in CSS by creating a project.

16. __{New} A Detailed Look at CSS variables (a.k.a Custom Properties)__ explains how to use CSS variables and how to avoid common mistakes.

17. __{New} CSS Variables Real World Applications__ teaches us about the usage of different concepts by creating components variations, themed sites, and 
 a CSS variable booth. 

18. __{New} Long Live the CSS Grid__ introduces us to the grid in CSS. We will learn about how to use, resize and position the grid. 




# Intended audience
This module is designed for anyone who wants to learn the basics of Cascading Style Sheets (CSS). It will prepare you to take the initial steps towards learning the basics of CSS, styling text, images, CSS gradients, flexbox, and CSS grid. You’ll have full command of styling the web pages at the end of this module.


# Module structure
This module contains 18 main chapters, namely:

1. __Introduction__ is based on the general guideline for taking this module.

2. __Getting Started with CSS__ is about the rules in which CSS works.

3. __Oh My Selectors!__ elaborates on different selectors types. This will also let us know when and which selector we should use.

4. __CSS Fundamentals Everyone Should Know__ describes the working of CSS by defining the concept of cascade and inheritance.

5. __Colors, colors, colors!__ teaches us about color selection and different color tools.

6. __We all Need Units__ describes units in CSS for text, images, and spacing. 

7. __Typography in CSS__ elaborates on different kinds of font types and styles.

8. __The Box Model__ introduces us to borders, padding, and margins in a box model.

9. __Challenge: Practice with Texts, Margin, Padding, and Border__ tests our mastery of basic concepts of CSS.

10. __Getting creative with Backgrounds__ explains how to change and make the background attractive by using different images.

11. __Project: Build a Movie Order Page__ helps us practice by creating a project using different concepts discussed earlier.


12. __Making Sense of CSS Gradients__ teaches us about different types of gradients and how they function.

13. __Hands-on Practice with Gradients__ tests our mastery of gradients by giving different problems. 

14. __Project: Build a Sign Up Page for a Startup__ helps us create a new sign-up page.


15. __{New} Teach Me Positioning Like I'm Five__  teaches us about the best way of positioning in CSS by creating a project.

16. __{New} A Detailed Look at CSS variables (a.k.a Custom Properties)__ explains how to use CSS variables and how to avoid common mistakes.

17. __{New} CSS Variables Real World Applications__ teaches us about the usage of different concepts by creating components variations, themed sites, and 
 a CSS variable booth. 

18. __{New} Long Live the CSS Grid__ introduces us to the grid in CSS. We will learn about how to use, resize and position the grid. 




This lesson discusses the intended audience and the necessary prerequisites of the module.

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

About This Module

Intended audience

Module structure