CSS Tutorial – Learn Cascading Style Sheets from Basics to Advanced

Introduction to CSS

What is CSS?

CSS (Cascading Style Sheets) is the language used to style HTML content. It controls layout, fonts, colors, spacing, animations, and responsiveness on web pages.

Why Use CSS?

Think of HTML as the skeleton and CSS as the skin and outfit. CSS gives your web pages life by making them visually appealing and organized.

Key Benefits:

• Separation of content (HTML) and style (CSS)
• Reusability and maintainability
• Enhanced design flexibility

History and Evolution of CSS

• 1994: Proposed by Håkon Wium Lie
• CSS1 (1996): Basic styling
• CSS2 (1998): Added positioning, media types
• CSS3 (2001–present): Modular design, animations, transitions, responsive design

How CSS Works

The Role of CSS in Web Design

CSS controls how HTML elements appear — including their layout, size, position, colors, and animation.

How Browsers Interpret CSS

• CSS rules are applied based on cascading, inheritance, and specificity
• The most specific and recent rule wins

CSS Syntax and Structure

selector {
  property: value;
}

Example:

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

• Selector: Targets HTML elements
• Declaration Block: One or more property-value pairs

Types of CSS

CSS Selectors Explained

Basic Selectors

• p → element selector
• .class → class selector
• #id → ID selector

Combinator Selectors

• div p → descendant
• div > p → child
• div + p → adjacent sibling

Pseudo-classes & Pseudo-elements

• :hover, :focus, :nth-child(n)
• ::before, ::after

Attribute Selectors

input[type="text"] {
  background-color: yellow;
}

Styling Text and Fonts

• font-family, font-size, font-weight
• text-align, text-transform, text-decoration
• Line height: line-height, letter-spacing, word-spacing
• Integrate with Google Fonts

CSS Colors and Backgrounds

• Backgrounds: background-image, background-color, linear-gradient()
• Transparency: opacity, rgba()

Box Model in CSS

Every element is treated as a rectangular box consisting of:

• Content: Main content
• Padding: Space around content
• Border: Surrounds padding
• Margin: Outside spacing

box-sizing: border-box;

Use browser DevTools to visualize box dimensions.

CSS Positioning and Layout

Position Values

• static: Default flow
• relative: Offset from normal
• absolute: Positioned to nearest ancestor
• fixed: Stays fixed on viewport

Display Property

• block, inline, inline-block, none

Flexbox & Grid Layouts

Flexbox – For 1D layouts
Grid – For 2D layouts

display: flex;
justify-content: space-between;

Responsive Design with CSS

Media Queries

@media (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}

• Use for screen-size-specific styles
• Enables mobile-first development

Viewport Units

• vw, vh, vmin, vmax → scale with device size

Advanced CSS Concepts

CSS Variables

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

Use var(--main-color) wherever needed.

Transitions & Animations

• transition: all 0.3s ease;
• @keyframes for animations

z-index & Layering

• Control element stacking
• Higher z-index comes forward

CSS Frameworks

Use frameworks to speed up development without reinventing styles.

Tools and Resources for CSS

Code Editors

• VS Code
• Sublime Text

CSS Generators

• CSS Gradient
• Animista
• Flexbox Froggy

Learning Platforms

• FreeCodeCamp
• MDN Web Docs
• CSS-Tricks

Common CSS Mistakes to Avoid

Practice Projects to Improve CSS Skills

• Build a Portfolio Website
• Create a Responsive Grid Layout
• Animate Buttons & Modals Using CSS

Summary — CSS Tutorial

CSS is an essential tool for modern web development. From simple styling to complex animations and layouts, mastering CSS enables developers to build polished, responsive, and visually appealing websites.

Keep practicing, explore frameworks, and always stay updated with new features.