🎨 CSS Basics

Master the styling language that brings web pages to life with visual design

← Back to Programming Courses

CSS Basics Curriculum

12
CSS Units
~100
CSS Properties
20+
Projects
CSS3
Modern Features
1

CSS Introduction

Learn the fundamentals of CSS and how to style web pages.

  • What is CSS?
  • CSS syntax and structure
  • Adding CSS to HTML
  • CSS comments
  • Browser developer tools
  • CSS validation
  • CSS versions
  • Getting started
2

Selectors and Specificity

Master CSS selectors and understand how specificity works.

  • Element selectors
  • Class selectors
  • ID selectors
  • Attribute selectors
  • Pseudo-classes
  • Pseudo-elements
  • Combinators
  • Specificity rules
3

Colors and Typography

Style text and apply colors to create visually appealing designs.

  • Color values
  • Background colors
  • Text colors
  • Font properties
  • Web fonts
  • Text styling
  • Line height
  • Text alignment
4

Box Model

Understand the CSS box model and how elements are sized and spaced.

  • Content area
  • Padding
  • Borders
  • Margins
  • Box-sizing property
  • Width and height
  • Collapsing margins
  • Developer tools
5

Layout and Positioning

Control element positioning and create page layouts.

  • Display property
  • Block vs inline
  • Position property
  • Static positioning
  • Relative positioning
  • Absolute positioning
  • Fixed positioning
  • Z-index
6

Flexbox

Master flexible box layout for modern responsive design.

  • Flex container
  • Flex items
  • Main and cross axis
  • Justify-content
  • Align-items
  • Flex-direction
  • Flex-wrap
  • Flex properties
7

CSS Grid

Create complex layouts with CSS Grid system.

  • Grid container
  • Grid items
  • Grid tracks
  • Grid lines
  • Grid areas
  • Grid template
  • Gap properties
  • Responsive grids
8

Responsive Design

Create websites that work on all devices and screen sizes.

  • Mobile-first design
  • Media queries
  • Viewport meta tag
  • Flexible images
  • Responsive units
  • Breakpoints
  • Fluid layouts
  • Testing responsive
9

Animations and Transitions

Add motion and interactivity to your web pages.

  • CSS transitions
  • Transform property
  • Keyframe animations
  • Animation properties
  • Timing functions
  • Animation events
  • Performance tips
  • Hover effects
10

CSS Variables

Use CSS custom properties for maintainable and dynamic styles.

  • Custom properties
  • Variable declaration
  • Variable usage
  • Global variables
  • Local variables
  • Fallback values
  • JavaScript integration
  • Theme switching
11

Modern CSS Features

Explore the latest CSS features and modern techniques.

  • CSS logical properties
  • Container queries
  • CSS subgrid
  • Color functions
  • CSS shapes
  • Scroll behavior
  • CSS filters
  • Feature queries
12

Best Practices

Learn industry best practices for writing maintainable CSS.

  • CSS organization
  • Naming conventions
  • Code structure
  • Performance optimization
  • Browser compatibility
  • CSS methodologies
  • Documentation
  • Debugging techniques

Unit 1: CSS Introduction

Learn the fundamentals of CSS and how to style web pages.

What is CSS?

Understand the purpose and role of CSS in web development.

Styling Presentation Layout Visual Design
CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation and visual design of HTML documents. It controls colors, fonts, layouts, spacing, and all visual aspects of web pages.
/* CSS controls the visual presentation */
h1 {
  color: #3b82f6;
  font-size: 32px;
  text-align: center;
}

p {
  color: #374151;
  line-height: 1.6;
  margin: 16px 0;
}
Before CSS: Plain black text, default fonts
After CSS: Styled, colorful, and attractive

CSS Syntax and Structure

Learn the basic syntax rules and structure of CSS code.

CSS Rule Structure:
• Selector: Targets HTML elements to style
• Declaration block: Contains style declarations
• Property: The style attribute to change
• Value: The setting for the property
• Semicolon: Separates declarations
Syntax Example:
selector { property: value; property: value; }
/* CSS Syntax Breakdown */
.my-class { /* Selector */
  color: blue; /* Property: value; */
  font-size: 18px; /* Another declaration */
  margin: 10px; /* Final declaration */
} /* End of rule */

Adding CSS to HTML

Discover the three main ways to include CSS in your HTML documents.

Three Methods:
• Inline CSS: Style attribute on HTML elements
• Internal CSS: <style> tag in HTML head
• External CSS: Separate .css file linked to HTML
<!-- Inline CSS -->
<p style="color: red;">Red text</p>

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

<!-- External CSS -->
<link rel="stylesheet" href="styles.css">
Best Practice: Use external CSS files for better organization, maintainability, and performance. Avoid inline styles except for dynamic styling.

Unit 2: Selectors and Specificity

Master CSS selectors and understand how specificity works.

CSS Selectors

Learn different types of selectors to target HTML elements precisely.

Element Class ID Attribute
CSS selectors are patterns that match HTML elements. They determine which elements receive the styling rules you define.
/* Element selector */
p { color: black; }

/* Class selector */
.highlight { background: yellow; }

/* ID selector */
#header { font-size: 24px; }

/* Attribute selector */
input[type="email"] { border: 2px solid blue; }
This text is styled with class selector
This is smaller text

Pseudo-classes and Pseudo-elements

Style elements based on their state or create virtual elements.