Course: CSS Basics

CSS Basics [1/15]

In the previous courses, you've learned some CSS already. In this and some next courses we will discuss CSS in more detail.

Let's remember that CSS stands for Cascading Style Sheets. This language is responsible for the layout of HTML pages. The syntax of this language is quite simple: it consists of selectors and properties.

Using selectors you can say to the browser which elements you would like to style. Properties define a specific type of styling you would like to use. So we may say that selectors are a sniper scope, and properties are a brush, a chisel, a scalpel and a hammer.

In the Structure of HTML Page course you have learned several ways to add styles. In this course, we will use our CSS editor for styling.

Do it
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS Basics</title> </head> <body> <div class="scene"> <div class="roof"></div> <div class="house"> <div class="door"></div> </div> </div> </body> </html>
/* .scene { width: 400px; height: 500px; margin: 0 auto; } .roof { width: 0; margin: 0 auto; margin-top: -50px; border: 150px solid white; border-bottom-color: red; } .house { width: 200px; height: 200px; margin: 0 auto; background-color: blue; overflow: hidden; } .door { height: 100px; width: 50px; margin-top: 100px; margin-left: 50px; background-color: red; } */
HTML Academy
  1. Uncomment the code in CSS Editor by removing /* and */.
Theory Check Next