CSS

What's inside

Lessons go from the basics to advanced topics. Read them in order, or jump to what you need.

1. 01

   Chapter 1

   CSS Basics

   • 1CSS IntroductionLearn what CSS is, how it gives web pages their colors, fonts and layout, and why we keep structure and style separate.
   • 2CSS SyntaxUnderstand the anatomy of a CSS rule — selector, property, value and declaration — and learn how to write comments.
   • 3CSS SelectorsLearn how to pick the elements you want to style — by tag, class, id, relationship or attribute — and how specificity settles conflicts.
   • 4How to Add CSSLearn the three ways to add CSS to a page — inline, internal and external — and which one wins when they conflict.
   • 5CSS ColorsLearn every way to write colors in CSS — names, HEX, RGB, RGBA and HSL — and the difference between transparent colors and opacity.
   • 6CSS BackgroundsColor element backgrounds, create eye-catching gradients, control background size, position and repeat — then combine it all in one line.
   • 7CSS BordersAdd borders around elements, control their width, style and color, and create rounded corners with border-radius.
2. 02

   Chapter 2

   Box Model & Text

   • 8The CSS Box ModelEvery element on a page is a box made of content, padding, border and margin. Understand this model and control sizes precisely with box-sizing: border-box.
   • 9CSS TextStyle text with color, alignment, decoration, letter case, line height and letter spacing — including smart alignment that works for Arabic.
   • 10CSS FontsChoose the right fonts for your site, set their size and weight, and load beautiful Arabic fonts like Cairo from Google Fonts.
   • 11CSS UnitsGet to know CSS units — fixed ones like px and relative ones like %, em, rem, vw, vh and fr — and when to use each.
3. 03

   Chapter 3

   Layout

   • 12CSS DisplayUnderstand how display controls the way an element appears — block, inline or inline-block — and how to hide elements with display: none or visibility: hidden.
   • 13CSS PositionPlace elements precisely with position and its five values, and control which overlapping element appears on top with z-index.
   • 14CSS FlexboxArrange elements in a row or column with full flexibility using Flexbox — distribute, center, space, wrap and stretch them.
   • 15CSS GridBuild two-dimensional layouts of rows and columns with CSS Grid: define columns with fr and repeat(), let items span several cells, and create responsive cards without media queries.
   • 16Responsive DesignMake your site look great on every screen with the viewport meta tag, media queries, a mobile-first approach and fluid images.
4. 04

   Chapter 4

   Advanced CSS

   • 17CSS Pseudo-classesStyle elements based on their state or position: on hover with :hover, on focus with :focus, by order with :first-child and :nth-child(), and exclude some with :not().
   • 18CSS Pseudo-elementsStyle specific parts of an element, like its first letter or selected text, and add decorative content before and after it with ::before and ::after.
   • 19CSS TransitionsMake changes in color, size and position smooth and gradual instead of instant, using transition and its four parts.
   • 20CSS AnimationsCreate multi-step animations that run on their own with @keyframes and the animation property — while respecting users who prefer reduced motion.
   • 21CSS VariablesStore colors and spacing in CSS custom properties and reuse them with var(), use fallback values, and build light and dark themes with ease.