Learn CSS with Real Code Examples

CSS uses selectors to target HTML elements and apply style rules.

It enables consistent design across multiple pages.

CSS works alongside HTML for structure and JavaScript for interactivity.

Separation of content and presentation

Cascading and inheritance of styles

Flexible units (px, em, rem, %, vw, vh)

Layered styling via specificity and !important

Support for custom properties (CSS variables)

Selectors: element, class, ID, attribute, pseudo-class

Properties: color, font-size, margin, padding, display

Values: keywords, lengths, percentages, colors, functions

Box model: content, padding, border, margin

Cascading and specificity rules

styles/main.css - primary stylesheet

styles/reset.css - reset browser defaults

styles/components/ - reusable component styles

styles/layout/ - page layout styles

assets/fonts/ - custom fonts for typography

Write CSS rules in `.css` file

Link CSS to HTML via `<link>` or `<style>`

Test styles in browser

Use developer tools for debugging

Optimize for performance and responsiveness

Beginner: simple color and font changes

Intermediate: layouts with Flexbox or Grid

Advanced: responsive design with media queries

Expert: animations, transitions, and CSS variables

Community: contribute to CSS frameworks or open standards

Simpler than scripting languages for styling

Complements HTML for content presentation

More flexible than inline HTML attributes

Lightweight and widely supported

Essential for modern web design

1994 – CSS1 specification by W3C

1996 – CSS2 released

1998 – CSS2.1 updates

2011–2018 – CSS3 modules standardized

2025 – CSS continues evolving with modern features

Selector: targets HTML elements

Property: style attribute to apply

Value: assigned value for a property

Box model: content, padding, border, margin

Media query: conditional style for viewport sizes