Intro to CSS

What is CSS?

CSS stands for Cascading Style Sheet. It describes how HTML elements are to be displayed on different screens and in print. It works on top of the HTML and makes use of the tree-structure of the HTML documents. The HTML elements inherit stylistic properties through CSS.

How do we write CSS?

Here’s a syntax example of a CSS rule:

selector {
    property: value;
}

How does it work?

• The selector points to the HTML element you want to style
• The declaration block contains one or more declarations separated by semicolons.
• Each declaration includes a CSS property name and value, separated by a colon.
• A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.

h4 {
    color: #0066CC;
    font-style: italic;
}

This is how the h4 with #0066CC color and italic font style it looks.

Let’s see CSS at work

Here is the Museums page example. Let’s do some really basic styling.

The box model

All HTML elements can be considered as boxes. In CSS, the term “box model” is used when talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML element. It consists of margins, borders, padding, and the actual content.

• Content: The content of the box, where text and images appear
• Padding: Clears an area around the content. The padding is transparent
• Border: A border that goes around the padding and content
• Margin: Clears an area outside the border. The margin is transparent

CSS most used properties