Introduction

CSS stands for Cascading Style Sheets. With CSS, we give styles to our webpage. As you remember, with HTML we created the webpage structure. Now, with CSS we will focus on how the structure 'looks'. For instance, you could alter the font, color, size and spacing of your content, split it into multiple columns, or add animations and other decorative features. In this module, you will learn how to select elements in your webpage and how to effectively style them.

Imagine a building construction process:

• 🏗️ HTML would represent the foundation and skeleton of the building (the structure)
• 🏠 CSS will represent how it looks: is it made of glass? Is it painted in green? How big are the windows? Where will the door be? How will it be distributed?
• 💡 In the next chapter, JavaScript would be the mechanical and electrical installation (the interaction).

In order for you to have a broad, general sense of what CSS is, please read this article:

Learn to style HTML using CSS

Goals

At the end of this section you should be able to:

• Understand what CSS is.
• Learn to include stylesheets in our webpages.
• Learn main selectors.
• Master multiple selectors.
• Efficiently target HTML elements.
• Be able to change an element's style (border, padding etc)
• Understand the box model.
• Be able to identify cascade and CSS inheritance and use it to change different values.
• Position elements in your webpage effectively with position and flexbox.
• Create responsive content.
• Be able to use DevTools for CSS mastering.
• Create and apply custom properties.
• Extra: create animations and transitions.

Let's start working!💪🏽