The Power of CSS

Cascading Style Sheets: The language that makes the web beautiful

Introduction to CSS

CSS (Cascading Style Sheets) is the language used to style and layout web pages. It works alongside HTML to define how elements should be displayed on screen, in print, or in other media.

With CSS, you can control:

  • Colors and backgrounds
  • Typography and text styling
  • Layout and positioning
  • Animations and transitions
  • Responsive design
h1 { color: blue; }

Blue Heading

Key CSS Properties

Colors

Control text color, backgrounds, borders and more

color: #3498db; background-color: rgba(52, 152, 219, 0.2);

Layout

Position elements with precision

display: flex; position: relative;

Typography

Control text appearance and readability

font-family: 'Roboto', sans-serif; line-height: 1.6;

Effects

Add shadows, gradients and transformations

box-shadow: 0 4px 8px rgba(0,0,0,0.1); transform: rotate(5deg);

CSS in Action

Before CSS

Plain Heading

This is unstyled content with no CSS applied. Notice how basic and plain it looks.

After CSS

Styled Heading

This content has CSS styling applied. Notice the improved typography, colors, and overall design.

Try CSS Yourself!

Edit CSS

Preview

Edit the CSS to change my appearance!

Try changing properties like background-color, color, border-radius, or transform!