Introduction to CSS

CSS (Cascading Style Sheets) is used to style and format the layout of HTML documents. It controls the look and feel of your web pages, such as colors, fonts, spacing, and positioning.

CSS Syntax & Structure

CSS works with selectors and declarations. A declaration has a property and a value.

selector {
  property: value;
}

p { color: blue; font-size: 20px; }

Inline vs Internal vs External CSS

• Inline CSS: Written inside the HTML element.
• Internal CSS: Written inside a <style> tag in HTML.
• External CSS: Written in a separate .css file.

h2 { text-align: center; }

Comments in CSS

Comments help developers explain their code. They are ignored by the browser.

/* This is a CSS comment */
p { color: green; }

/* Make text purple */
p { color: purple; }

CSS Units

CSS supports different measurement units like px,em, rem, %, vw,vh, etc.

.box {
  width: 50%;
  font-size: 2em;
  padding: 20px;
  background: lightblue;
}

CSS Variables (Custom Properties)

CSS Variables let you reuse values across your stylesheet for consistency and easy updates.

:root {
  --main-color: blue;
}

h1 {
  color: var(--main-color);
}

:root { --main-color: orange; }
h1 { color: var(--main-color); }