CSS

CSS

📌 CSS — A Simple Introduction

CSS (Cascading Style Sheets) is a language used to define the appearance and design of web pages. All visual aspects such as colors, fonts, spacing, alignment, and layout are controlled with CSS.

While HTML creates the structure of a page, CSS styles and enhances that structure. CSS also plays an important role in making web pages responsive across different devices.

🔹Key Concepts

Selectors

  • Define which HTML elements will be styled.
  • Example: p , .card, #header

Properties & Values

  • Style rules are written as property: value;
  • Example: color: red;

Box Model

  • Every HTML element is a box consisting of:
  • content → padding → border → margin

Cascade & Specificity

  • Determines which style is applied when multiple rules conflict.
  • Priority order: ID > class > tag

Responsive Design

  • Ensures the page adapts to different screen sizes.
  • Uses @media, %, rem, vw, and similar units.

Flexbox & Grid

  • Modern layout systems:
  • Flexbox → One-dimensional layouts
  • Grid → Two-dimensional layouts

🔹How to Add CSS

CSS can be added to a web page in three ways:

1. External File (Recommended)

HTML
<link rel="stylesheet" href="styles.css">

2. Internal Style

HTML

<style>
    /* CSS goes here */
</style>

3. Inline Style (Not Recommended)

HTML
<div style="color: red;"></div>

🔹Example

HTML (index.html)

HTML

<! DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Example</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <header id="site-header">Welcome</header>
        <main class="container">
            <p class="lead">This is a CSS example.</p>
        </main>
    </body>
</html>

CSS (styles.css)

CSS

:root {
  --primary: #0b5ed7;
  --gap: 16px;
  --max-width: 960px;
}

* {
  box-sizing: border-box;
}

body {
  font-family: system-ui, Arial, sans-serif;
  margin: 0;
  padding: 0;
  color: #222;
  line-height: 1.6;
}

#site-header {
  background: var(--primary);
  color: white;
  padding: calc(var(--gap) * 1.5);
  text-align: center;
}

.container {
  max-width: var(--max-width);
  margin: 24px auto;
  padding: 0 var(--gap);
}

.lead {
  font-size: 1.125rem;
  color: #333;
}

/* Responsive Example */
@media (max-width: 600px) {
  .lead {
    font-size: 1rem;
  }
}

  • Best Practices

  • Use an external CSS file
  • Create reusable class structures
  • Use CSS variables --var
  • Avoid unnecessary use of !important
  • Prefer modern layout systems (Flexbox, Grid)
  • Ensure good color contrast and accessibility
History of CSS