CSS Introduction - Learn It Quicker

What is CSS?

CSS stands for Cascading Style Sheets. It is a stylesheet language that describes the presentation of HTML documents. While HTML provides structure and content, CSS provides the visual design and layout.

CSS was created to separate content from presentation. Before CSS, styling was done with HTML attributes and tags, making pages difficult to maintain. CSS allows you to control the style of multiple pages from a single file.

Modern CSS (CSS3 and beyond) includes powerful features like animations, transformations, flexbox, grid layout, and variables that enable complex, responsive designs without JavaScript.

Why Use CSS?

CSS separates presentation from content, making HTML cleaner and easier to maintain. You can change the entire look of a website by modifying a single CSS file.

CSS enables responsive design, allowing websites to adapt to different screen sizes and devices. Media queries and flexible layouts make sites work on phones, tablets, and desktops.

CSS improves page loading speed by reducing HTML file size and enabling browsers to cache stylesheet files. Styles can be reused across multiple pages.

CSS provides powerful selectors and layout systems (Flexbox, Grid) that enable complex designs that would be difficult or impossible with HTML alone.

CSS Syntax

A CSS rule consists of a selector and a declaration block. The selector points to the HTML element to style. The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon. Declaration blocks are surrounded by curly braces.

CSS is case-insensitive for property names and most values, but it's conventional to use lowercase. Class names, IDs, and some values are case-sensitive.

/* CSS Syntax */
selector {
  property: value;
  property: value;
}

/* Example: Style all paragraphs */
p {
  color: blue;
  font-size: 16px;
  line-height: 1.5;
}

/* Multiple selectors */
h1, h2, h3 {
  font-family: Arial, sans-serif;
  color: #333;
}

/* Class selector */
.highlight {
  background-color: yellow;
  padding: 5px;
}

/* ID selector */
#header {
  background-color: navy;
  color: white;
  padding: 20px;
}

Three Ways to Insert CSS

External CSS: A separate .css file linked from HTML. This is the most common and recommended method for maintaining styles across multiple pages.

Internal CSS: Styles defined in a <style> tag within the HTML document's <head>. Useful for single-page styles or overrides.

Inline CSS: Styles applied directly to HTML elements using the style attribute. Has highest specificity but should be avoided for maintainability.

<!-- External CSS (recommended) -->
<head>
  <link rel="stylesheet" href="styles.css">
</head>

<!-- Internal CSS -->
<head>
  <style>
    body {
      background-color: lightblue;
    }
    h1 {
      color: navy;
    }
  </style>
</head>

<!-- Inline CSS (avoid when possible) -->
<h1 style="color: blue; text-align: center;">Heading</h1>
<p style="font-size: 14px; color: gray;">Paragraph</p>

CSS Comments

CSS comments are used to explain code and are ignored by browsers. They start with /* and end with */.

Comments can span multiple lines and are useful for documenting sections of your stylesheet, temporarily disabling rules, or adding notes for other developers.

Good comments explain why something is done, not what is done (the code itself shows what).

/* This is a single-line comment */

/*
This is a
multi-line comment
that spans several lines
*/

/* Main header styles */
header {
  background: #333;
  color: white;
}

/* Temporarily disabled
p {
  color: red;
}
*/

/* IMPORTANT: Don't change this without testing on mobile */
.container {
  max-width: 1200px;
  margin: 0 auto;
}