HTML & CSS Masterclass Tutorial

Comprehensive guide to modern HTML and CSS development.

Chapter Quiz Exercises
Course Topics
Introduction Environment Setup First Web Page Workflow & Tools Essentials Document Structure Text Content Lists & Tables Links & Navigation Images & Media Forms & Validation Reusable Components Styling Essentials Selectors & Specificity Cascade & Inheritance Typography Colors & Backgrounds Box Model Layout Fundamentals Positioning & Z-Index Flexbox CSS Grid Layout Patterns Responsive Design Responsive Components Custom Properties Calc & Functions Transitions Transforms Animations Effects & Filters Accessibility Design Systems Performance Debugging & Testing Tooling & Automation Landing Page Project Exercises Quiz

Styling Essentials

Styling Essentials

CSS (Cascading Style Sheets) is what makes the web look beautiful. There are three ways to insert CSS into an HTML document:

  1. External CSS: A separate .css file linked in the <head> using the <link> tag. (Best practice)
  2. Internal CSS: Using the <style> element in the HTML <head>.
  3. Inline CSS: Using the style attribute directly inside an HTML element. (Usually avoided)

CSS Syntax

A CSS rule consists of a selector and a declaration block. Declarations contain a property and a value, separated by a colon, ending with a semicolon.

Try It Yourself

Edit the code below and click Run to see the result live.

Source Code
Result
Topics
Introduction Environment Setup First Web Page Workflow & Tools Essentials Document Structure Text Content Lists & Tables Links & Navigation Images & Media Forms & Validation Reusable Components Styling Essentials Selectors & Specificity Cascade & Inheritance Typography Colors & Backgrounds Box Model Layout Fundamentals Positioning & Z-Index Flexbox CSS Grid Layout Patterns Responsive Design Responsive Components Custom Properties Calc & Functions Transitions Transforms Animations Effects & Filters Accessibility Design Systems Performance Debugging & Testing Tooling & Automation Landing Page Project Exercises Quiz