CSS Fundamentals

20 min

CSS, or Cascading Style Sheets, is the design language of the web. While HTML provides the structure (the skeleton), CSS provides the style (the skin and clothes). It allows you to control colors, fonts, layouts, and responsiveness across multiple web pages simultaneously.

The power of CSS lies in its 'cascading' nature. Styles can be defined in various places—browser defaults, external stylesheets, internal style blocks, or inline styles—and the browser determines which rule applies based on a specific hierarchy.

A fundamental concept in CSS is the rule set, which consists of a selector and a declaration block. The selector targets the HTML element (e.g., `p` for paragraphs), and the declaration block contains property-value pairs (e.g., `color: blue;`) that define the style.

By separating content (HTML) from presentation (CSS), you can maintain cleaner code, improve page load speeds, and ensure consistency across your entire website. Changing the look of a thousand pages can be as simple as editing a single line in a CSS file.

Key Concepts

CSS separates presentation from content.
The 'Cascade' determines which styles apply.
Selectors target HTML elements.
Declarations consist of properties and values.
External stylesheets enable site-wide consistency.

Learning Objectives

Master

The role of CSS in web development
Anatomy of a CSS rule set
Different ways to include CSS (Inline, Internal, External)
Basic syntax: Selectors, Properties, and Values

Develop

Design-oriented thinking
Code organization skills
Understanding of browser rendering

Tips

Use external stylesheets (`<link>`) for better caching and maintenance.
Keep your CSS organized with comments.
Use consistent naming conventions for classes.
Validate your CSS to catch syntax errors.

Common Pitfalls

Overusing inline styles (`style='...'`), which are hard to maintain.
Forgetting semicolons at the end of declarations.
Using generic names like `.style1` instead of semantic names like `.nav-link`.
Not understanding the cascade, leading to unexpected results.

Summary

CSS controls the visual presentation of web pages.
It works alongside HTML to create complete web experiences.
Rule sets are the building blocks of CSS.
Proper usage improves maintainability and performance.

Exercise

Change the color of all <p> elements to blue.

p {
  color: blue;
}

Exercise Tips

Try using a class selector instead to target specific paragraphs.
Experiment with different color values (hex, rgb, named colors).
Add multiple properties to see how they work together.
Use browser DevTools to inspect and modify styles in real-time.

CSS Fundamentals