Getting Started with CSS: Styling Your Web Pages

CSS (Cascading Style Sheets) is the cornerstone of web design. It allows you to control the look and feel of your website from colors fonts to layouts and animations.

1. What is CSS?

CSS is a language used to describe the presentation of a document written in HTML. It defines how HTML elements should appear on screen, paper or in other media.

2. Basic Syntax

A CSS rule consists of a selector and a declaration block:

selector {
  property: value;
}

for example:

body {
  background-color: lightblue;
}

This changes the background color of the page to light blue.

3. Selectors

Selectors allow you to target specific HTML elements to apply styles. You can select elements by:

• Type: p {} targets all paragraphs.
• Class: .my-class {} targets elements with the class "my-class".
• ID: #my-id {} targets elements with the ID "my-id".

4. Box Model

Every HTML element can be thought of as a box, consisting of:

• Content: The actual text or media inside.
• Padding: The space between the content and the border.
• Border: The outline around the element.
• Margin: The space outside the border, seperating elements.

5. Common Properties

Color: color: red; changes text color.

• Font: font-size: 16px; sets the text size.
• Background: background-color: lightgray; changes the background color.
• Width/Height: width: 100%; and height: 200px; define element dimensions.

6. Responsive Design

Use media querries to make your web pages look good on all devices. For example:

@media screen and (max-width: 600px) {
  body {
    background-color: lightyellow;
  }
}

This changes the background color to light yellow when the screen width is 600px or less.