EasyCode365EasyCode365

CSS Foundations

Start here to style your first web pages with colors, spacing, typography, and beginner-friendly layouts.

  1. What is CSS?

    Learn what CSS is, how CSS and HTML work together, and how styles can be written with style tags, inline styles, and external stylesheets.

  2. CSS syntax and basic selectors

    Learn CSS rule structure, declarations, and basic selectors including element, class, ID, and grouped selectors.

  3. Advanced CSS selectors and combinators

    Practice advanced CSS selectors such as attribute selectors, child selectors, sibling selectors, descendant selectors, and the universal selector.

  4. Specificity, inheritance, and the cascade

    Understand selector weight, cascade order, inheritance, conflicting rules, and when !important should or should not be used.

  5. CSS values, units, and colors

    Learn common CSS values, units, and colors, including px, em, rem, percentages, RGB, RGBA, HSL, and hex colors.

  6. Mastering the CSS box model

    Understand the content area, padding, borders, margins, margin collapsing, and how box-sizing affects layout.

  7. Web typography basics

    Learn web typography basics, including font-family, font size, line height, alignment, and simple text formatting.

  8. Backgrounds and borders

    Learn how to style backgrounds and borders with colors, images, repeat behavior, border styles, and border radius.

  9. Interactive

    Interactive Lesson: margin, padding, border

    Practice margin, padding, border width, border style, and border radius with a live CSS box.

  10. Creating links and navigation

    Learn how to style link states and create simple vertical and horizontal navigation bars.

  11. Styling lists and tables

    Learn how to style lists and tables with custom bullets, spacing, borders, alignment, alternating rows, and readable data layouts.

  12. Styling forms and buttons

    Learn how to style inputs, labels, checkboxes, buttons, focus states, and default browser form styles.

  13. Basic visual formatting and positioning

    Learn document flow, display values like block, inline, and inline-block, plus basic relative and absolute positioning.

  14. Floating elements and clearfixes

    Learn how floats work, how text wraps around floated elements, and how clearing and clearfix techniques solve layout issues.

  15. Introduction to CSS Flexbox

    Learn the basics of flex containers, flex items, direction, alignment, wrapping, spacing, and proportions.

  16. Interactive

    Interactive Lesson: CSS Flexbox

    Practice Flexbox direction, wrapping, alignment, spacing, and item proportions with focused live playgrounds.

  17. Introduction to CSS Grid

    Learn the basics of CSS Grid, including grid containers, grid items, rows, columns, gaps, and simple page layouts.

  18. Interactive

    Interactive Lesson: CSS Grid Layout

    Practice CSS Grid columns, rows, gaps, spanning, and auto-placement with a live playground.

  19. Introduction to responsive design and media queries

    Learn basic media queries, mobile-first layouts, breakpoints, and how to adapt pages for mobile, tablet, and desktop.