CSS Fundamentals

Understand what CSS is, how styles are applied, how the cascade works, and how browsers turn CSS into a rendered page.

What Is CSS?

CSS, or Cascading Style Sheets, is the language used to describe the presentation of HTML documents. HTML provides structure while CSS controls appearance, spacing, positioning, typography, colors, responsive behavior, and visual effects.

CSS is not a programming language in the traditional sense. It is a declarative styling language: you describe the visual result you want and the browser determines how to render it.

A CSS rule normally contains a selector and a declaration block. The selector determines which elements are targeted, while declarations define the styles applied to those elements.

The browser does not simply read CSS from top to bottom. It resolves competing declarations using the cascade, specificity, source order, inheritance, and importance.

Think in layers

HTML describes what an element is, CSS describes how it should look and behave visually, and JavaScript generally handles application behavior and interaction.

HTML → CSS → Rendered Page

A Basic CSS Rule

p {
  color: #2563eb;
  font-size: 18px;
  line-height: 1.6;
}

💡 The selector p targets paragraph elements. Each declaration consists of a property and value.

Key Takeaways

CSS controls presentation and visual layout.
A CSS rule consists of a selector and declarations.
The browser resolves conflicting rules through the cascade.

Knowledge Check

What is the primary purpose of CSS?

Ways to Add CSS

CSS can be applied using inline styles, internal stylesheets, or external stylesheets. External stylesheets are generally preferred for production applications because they separate presentation from HTML and can be cached by the browser.

Inline styles are useful for highly localized dynamic styling but become difficult to maintain at scale. Internal styles can be useful for isolated documents or prototypes.

Ways to Add CSS

Three CSS Application Methods

<!-- External stylesheet -->
<link rel="stylesheet" href="styles.css">

<!-- Internal stylesheet -->
<style>
  .title { color: blue; }
</style>

<!-- Inline style -->
<h1 style="color: red">Hello CSS</h1>

💡 All three methods can apply CSS, but external stylesheets usually provide the cleanest architecture for larger applications.

Key Takeaways

Prefer external stylesheets for maintainability.
Inline styles have high precedence but should not become the default architecture.

Knowledge Check

Which approach is generally best for a large application?

CSS Syntax and Declarations

A declaration consists of a property followed by a colon and a value. Multiple declarations are enclosed inside braces. CSS allows comments using /* ... */.

Values may be keywords, numbers, lengths, percentages, colors, functions, or compound expressions.

CSS Rule Anatomy

CSS Declaration Syntax

/* Card styling */
.card {
  width: 320px;
  padding: 24px;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.12);
}

💡 Each property-value pair forms a declaration. CSS functions such as rgb() can also be used to express values.

Key Takeaways

Property names and values form declarations.
CSS supports functions such as rgb(), calc(), min(), max(), and clamp().

Knowledge Check

Which part of `color: blue` is the property?

Comments and Organization

CSS comments are ignored by the browser but are valuable for documenting complex sections, design decisions, browser workarounds, or architecture boundaries.

Good comments explain why unusual code exists rather than restating obvious declarations.

CSS Comments Are Ignored

CSS Comments

/* Layout container */
.container {
  width: min(100% - 2rem, 1200px);
  margin-inline: auto;
}

/* Keep this fallback for older embedded browsers. */
.card {
  margin-left: auto;
  margin-right: auto;
}

💡 Comments can document intent and compatibility decisions without affecting rendering.

Key Takeaways

CSS comments use /* */ syntax.
Prefer comments that explain intent rather than obvious code.

Knowledge Check

Which syntax creates a CSS comment?

What Is CSS?

Ways to Add CSS

CSS Syntax and Declarations

Comments and Organization

STAY UPDATED WITH BYTES!