CSS Tutorial

Complete CSS Mastery

Master Cascading Style Sheets - the language for styling modern web applications

Introduction to CSS

CSS (Cascading Style Sheets) is a styling language used to control the appearance of HTML elements on a webpage. While HTML defines the structure and content of a webpage, CSS is responsible for its design, layout, and overall visual presentation. By separating content from style, CSS makes websites easier to maintain, faster to load, and more adaptable across different devices and screen sizes.

CSS allows developers to apply colors, fonts, spacing, animations, and responsive layouts without changing the HTML itself. It follows the concept of "cascading," meaning that styles can be applied at multiple levels (inline, internal, and external), and when conflicts occur, the browser decides which rule to apply based on specificity and priority.

With CSS, you can create visually engaging websites, improve user experience, and ensure consistency across all pages. From simple text formatting to advanced features like Flexbox, Grid, and media queries, CSS is an essential part of modern web development.

Basic CSS Example
/* Change color and font size of all <p> elements */
p {
    color: red;
    font-size: 16px;
}

/* Center align main heading */
h1 {
    text-align: center;
    font-family: Arial, sans-serif;
    color: #333;
}

Why use CSS?

  • ✅ Improves design and user experience
  • ✅ Makes websites responsive and mobile-friendly
  • ✅ Allows separation of content (HTML) and design (CSS)
  • ✅ Reduces code repetition by reusing styles across multiple pages
  • ✅ Enables animations, transitions, and interactive designs

CSS Syntax

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

CSS Rule Structure
selector {
    property: value;
    /* more properties */
}

CSS Comments

/* This is a single-line comment */

/*
This is a
multi-line comment
*/

CSS Selectors

CSS selectors are used to "find" (or select) the HTML elements you want to style.

Selector Example Description
Element p Selects all <p> elements
ID #header Selects element with id="header"
Class .intro Selects all elements with class="intro"
Universal * Selects all elements
Attribute [target] Selects all elements with a target attribute
Pseudo-class a:hover Selects links on mouse hover
Child ul > li Selects direct child elements
Descendant div p Selects all p elements inside divs
Adjacent Sibling h1 + p Selects p elements immediately after h1

CSS Box Model

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

Content Padding Border Margin
Box Model Properties
.box {
    width: 300px;
    height: 100px;
    padding: 20px;
    border: 10px solid black;
    margin: 30px;
    background-color: lightgray;
}

Box Model Components

  • Content - The content of the box (text, images, etc.)
  • Padding - Clears an area around the content (inside the border)
  • Border - A border that goes around the padding and content
  • Margin - Clears an area outside the border (transparent)

Display Property

The display property specifies the display behavior of an element.

Value Description
block Displays as block-level element (like <div>)
inline Displays as inline element (like <span>)
inline-block Displays as inline-level block container
flex Displays as block-level flex container
grid Displays as block-level grid container
none Element is completely removed
table Element behaves like a table
list-item Element behaves like a list item