Skip to content
beginnerPhase 31 · CSS

CSS Fundamentals

Master CSS syntax, selectors, properties, and the cascade.

45m
0 problems
Topic Progress0%

What is CSS

What is CSS

CSS (Cascading Style Sheets) is a styling language used to describe the presentation of HTML documents. While HTML provides the structure and content of a web page, CSS controls how that content looks.

Purpose of CSS

  • Separation of concerns: Keep styling separate from structure
  • Reusability: Apply the same styles to multiple elements
  • Maintainability: Change styles in one place to update the entire site
  • Responsive design: Adapt layouts for different screen sizes

How CSS Works

CSS works by selecting HTML elements and applying style rules to them. A CSS rule consists of a selector and a declaration block:

/* This is a comment */
p {
  color: blue;
  font-size: 16px;
}

Three Ways to Add CSS

  1. Inline styles - directly on HTML elements
  2. Internal stylesheet - in a <style> tag in the <head>
  3. External stylesheet - in a separate .css file
<!-- Inline -->
<p style="color: red;">Hello</p>

<!-- Internal -->
<style>
  p { color: blue; }
</style>

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

CSS Syntax

CSS Syntax

A CSS rule consists of a selector and a declaration block.

Anatomy of a CSS Rule

selector {
  property: value;
  property: value;
}
  • Selector: targets the HTML element(s) to style
  • Property: the aspect you want to change (e.g., color, font-size)
  • Value: the setting for that property (e.g., red, 16px)

Multiple Selectors

h1, h2, h3 {
  font-family: Arial, sans-serif;
}

Comments

/* This is a CSS comment */

/* Multi-line
   comments work too */

Shorthand Properties

/* Longhand */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

/* Shorthand */
margin: 10px 20px 10px 20px;

The !important Declaration

p {
  color: red !important;
}

This overrides normal specificity rules, but should be used sparingly.

The Cascade

The Cascade

The "C" in CSS stands for Cascade. The cascade determines which styles are applied when multiple rules target the same element.

Cascade Order

Styles are applied in this order (from lowest to highest priority):

  1. User agent styles (browser defaults)
  2. User styles (browser settings)
  3. Author styles (your CSS)
  4. !important declarations

Factors Affecting the Cascade

1. Source Order

When two rules have the same specificity, the last one wins:

p { color: blue; }
p { color: red; } /* This wins */

2. Specificity

More specific selectors override less specific ones:

p { color: blue; }
.intro { color: red; } /* This wins */
#main { color: green; } /* This wins over .intro */

3. Inheritance

Some properties are inherited from parent to child:

  • Inherited: color, font-family, font-size, line-height
  • Not inherited: border, padding, margin, background

Cascade Layers (CSS @layer)

Modern CSS introduces cascade layers for explicit control:

@layer base, components, utilities;

@layer base {
  p { color: black; }
}

@layer components {
  p { color: blue; } /* Wins */
}

Specificity

Specificity

Specificity is the algorithm browsers use to decide which CSS rule wins when multiple rules target the same element.

Specificity Hierarchy

Specificity is calculated as a 4-part value (a, b, c, d):

Level Type Example Value
1 Inline styles style="..." 1,0,0,0
2 ID selectors #header 0,1,0,0
3 Class/Attribute/Pseudo-class .nav, [type], :hover 0,0,1,0
4 Element/Pseudo-element div, ::before 0,0,0,1

Examples

/* Specificity: 0,0,1 */
p { color: blue; }

/* Specificity: 0,1,0 */
.text { color: red; } /* Wins */

/* Specificity: 0,1,1 */
p.text { color: green; } /* Wins */

/* Specificity: 1,0,0 */
#header { color: orange; } /* Wins over all above */

Calculating Specificity

/* 0,0,0,1 */
a { }

/* 0,0,0,2 */
a p { }

/* 0,0,1,1 */
a p.intro { }

/* 0,1,0,0 */
#main { }

/* 0,1,1,1 */
#main .intro p { }

Best Practices

  • Avoid using !important
  • Don't rely on specificity for overrides
  • Keep selectors simple and maintainable
  • Use consistent naming conventions (like BEM)

Practice Problems

0/3solved
Build CSS Fundamentals Component

Create a reusable React component implementing CSS Fundamentals. Include proper state management and accessibility.

Solution
// Production-ready component with:
// - Proper TypeScript types
// - Accessibility (ARIA)
// - Error boundaries
// - Loading states
// - Memoization where needed
CSS Fundamentals Testing

Write unit and integration tests for CSS Fundamentals using React Testing Library.

Solution
// Test coverage:
// 1. Rendering tests
// 2. Interaction tests
// 3. Edge case tests
// 4. Accessibility tests
CSS Fundamentals Performance

Optimize CSS Fundamentals for performance. Consider memoization, code splitting, and bundle size.

Solution
// Optimization techniques:
// 1. React.memo / useMemo / useCallback
// 2. Code splitting with lazy()
// 3. Virtual scrolling for lists
// 4. Image lazy loading
// 5. Bundle analysis

Quiz

1. What does CSS stand for?

Question 1 options

2. In CSS specificity, which selector has the highest specificity?

Question 2 options

3. What happens when two CSS rules have the same specificity?

Question 3 options

4. Which property is NOT inherited by child elements by default?

Question 4 options

5. Which method of adding CSS has the highest priority?

Question 5 options

Flashcards

Question

What is CSS?

Click to reveal answer

Answer

CSS (Cascading Style Sheets) is a styling language used to describe the presentation of HTML documents.

Question

What are the three ways to add CSS?

Click to reveal answer

Answer

1. Inline styles (on elements), 2. Internal stylesheet (style tag), 3. External stylesheet (link tag)

Question

What is CSS specificity?

Click to reveal answer

Answer

The algorithm browsers use to determine which CSS rule wins when multiple rules target the same element. Hierarchy: inline > ID > class > element.

Question

What does 'cascade' mean in CSS?

Click to reveal answer

Answer

The cascade determines how styles are applied when multiple rules target the same element, based on specificity, source order, and importance.

Question

What is a CSS shorthand property?

Click to reveal answer

Answer

A single property that sets multiple related values. Example: margin: 10px 20px sets all four margins.

Revision Notes

Key Takeaways

  • 1.CSS separates presentation from structure in web documents
  • 2.The cascade determines which styles win when conflicts arise
  • 3.Specificity follows a hierarchy: inline > ID > class > element
  • 4.Most CSS properties are not inherited by default
  • 5.External stylesheets are preferred for maintainability

Interview Tips

  • •Be able to explain CSS specificity and calculate specificity values
  • •Understand the cascade order and when source order matters
  • •Know the difference between inherited and non-inherited properties
  • •Explain why inline styles are generally discouraged

Cheat Sheet

CSS Fundamentals Cheat Sheet

CSS Rule Structure

selector {
  property: value;
}

Three Ways to Add CSS

  • Inline: style="color: red;" (highest priority)
  • Internal: <style> tag in <head>
  • External: <link rel="stylesheet" href="styles.css">

Cascade Priority

  1. User agent (browser defaults)
  2. User styles
  3. Author styles (your CSS)
  4. !important

Specificity Order (highest to lowest)

  1. Inline styles: 1,0,0,0
  2. ID selectors: 0,1,0,0
  3. Class/Attribute/Pseudo-class: 0,0,1,0
  4. Element/Pseudo-element: 0,0,0,1

Inherited Properties

  • Inherited: color, font-family, font-size, line-height, text-align
  • Not inherited: border, padding, margin, background, width, height