CSS Review

What does CSS mean?

CSS is an acronym for Cascading Style Sheets. It is a style language that defines layout of HTML documents. For example, CSS covers fonts, colors, margins, lines, height, width, background images, advanced positions and many other things. CSS was invented to remedy this situation by providing web designers with sophisticated layout opportunities supported by all browsers. At the same time, separation of the presentation style of documents from the content of documents, makes site maintenance a lot easier.

What is "box model"?

What is selector?

Selectors are one of the most important aspects of CSS as they are used to "select" elements on an HTML page so that they can be styled.

Type selectors

The most common and easy to understand selectors are type selectors. Type selectors will select any HTML element on a page that matches the selector, regardless of their position in the document.

Examples of type selectors: div { text-align:center }

Class selectors

While type selectors target every instance of an element, class selectors can be used to select any HTML element that has a class attribute, regardless of their position in the document.

Examples of class selectors: .header { width: 12em; color: #333; }

ID Selectors

ID selectors are similar to class selectors. They can be used to select any HTML element that has an ID attribute, regardless of their position in the document.

Examples of ID selectors: #navigation { width: 12em; color: #333; }

The major difference is that IDs can only be applied once per page, while classes can be used as many times on a page as needed.

How to understand the code?

How to find the bug or the error in the code?

Patient, Persistence, and Practice!

Tips and tutorials for "debug"

FAQ

How to insert an image

Activity: Create a webpage with an image in it, and center the image with CSS.

How to create a "box"?

Activity: Create a webpage with three boxes. Each box should have a different border color and border style.

How to position a "box"?

Activity: Create a webpage with a "box" defined with CSS. Position that box with a "600px" top margin and "200px" left margin.

How to center an object (box, image, text)?

Activity: Create two boxes. The first box need to be centered, and the text in it should be aligned to the right. The second box do not need to be centered, but the text in the second need to be centered both vertically and horizontally.

How to use "float" property?

Activity: Create two boxes on the webpage, make one of them float to the left and another one float to the right. Both of them should be on the same row.

Additional Questions