CSS fundamentals
Selectors, the box model, layout and responsive design.
Level 101 · 21 lessons · 18 practice labs
Lessons
Selectors and appearance
- Linking CSS and selectors: You will link a CSS file to a page and use selectors to choose which elements get styled.
- Specificity, the cascade and inheritance: You explain which of two clashing rules wins and resolve conflicts without reaching for !important.
- Pseudo-classes and pseudo-elements: You style states such as hover, focus and first-child with :hover, :focus and ::before.
- Units: px, em, rem, %, vw: You tell fixed from relative units and write pages that respect the user’s font-size setting.
- Text and fonts: You will set font, size, weight and line spacing to make text easy to read.
- Colours: hex and RGB: You will write colours as hex and RGB values and keep a readable contrast between text and background.
- Backgrounds: You will give elements a background colour or image and control how the image is placed.
- Short task: make an article readable
Boxes and layout
- The box model: padding, border, margin, box-sizing: You will see every element as a box of content, padding, border and margin, and work out its size correctly.
- Positioning: relative, absolute, sticky: You place elements in or out of normal flow on purpose and manage stacking order with z-index.
- Layout with flexbox: You will use flexbox to line items up in a row or column, align them and set the space between them.
- Two-dimensional layout with CSS Grid: You build a page skeleton of rows and columns and choose correctly between Flexbox and Grid.
- A horizontal navigation menu: You will build and style a horizontal navigation menu made of links, start to finish.
- Styling tables and responsive design: You will style tables so they read well and make a page adapt to small screens such as phones.
- Media queries and mobile-first design: You write a responsive page that starts small and grows toward wide screens.
- Short task: a responsive two-column layout
Themes, motion and accessibility
- CSS variables and light/dark themes: You manage colours in one place and build light and dark themes that follow the system setting.
- Transitions, animations and reduced motion: You add smooth transitions and switch animation off for users who are bothered by motion.
- Accessible CSS: focus rings and colour contrast: You restyle focus rings instead of removing them and measure and fix text and background contrast.
- Utility classes with Tailwind CSS: You style a component quickly with utility classes and see how this differs from classic CSS.
- Capstone: style the page: You style a plain HTML page for a fictional person with colours, layout and a menu, and make it look right on a phone too.
Practice labs
- Target the right element: Colour five different elements by writing selectors alone, without adding classes to the HTML.
- Find why a rule doesn't win: A button that should be blue stays grey; work out the specificity and fix it without !important.
- Clean up inherited styles: Font and colour settings leak into nested components; fix it with inherit, initial and unset.
- Make an article readable: Make a long article readable by setting line length, line height and font size in rem.
- Untangle an em chain: Find why font size grows in nested lists and fix it by switching units to rem.
- Match backgrounds and colours to a brand guide: Apply Zümrüt Tea's colour codes and gradient background to the page and verify the contrast ratios.
- Fix the gaps between cards: Show that uneven gaps between cards come from margin collapse and fix them.
- Fix an overflowing box with box-sizing: Percentage-width columns with padding wrap to the next line; fix the maths with box-sizing.
- Position a sticky header and badges: Make the page header sticky, position a discount badge absolutely on the product card and solve the z-index clash.
- Build a horizontal menu: Turn a vertical list into an evenly spaced horizontal menu with Flexbox.
- Fix a broken layout with Flexbox: Rewrite a float-based three-column layout with broken heights using Flexbox.
- Lay out a product list with Grid: Build the product list with CSS Grid so the featured product spans two cells.
- Fix a missing viewport: Add a viewport tag to a page that looks tiny on phones and show the difference in device mode.
- Stack two columns on mobile: Use mobile-first media queries to collapse a two-column layout into one column on narrow screens.
- Make a wide table usable on phones: Make an eight-column price table readable on narrow screens with a scrolling wrapper or card view.
- Bring back the focus ring: Restore the focus indicator removed with outline: none, clearly, using :focus-visible.
- Build a dark theme with variables: Move colours into CSS variables and add a dark theme with prefers-color-scheme.
- Respect motion preferences: Reduce the page's transitions and animations under prefers-reduced-motion and also fix contrast errors.
About this course
Selectors, the box model, layout and responsive design.
What you will learn
- Selectors and appearance
- Boxes and layout
- Themes, motion and accessibility
Prerequisites
No prior knowledge is needed; the course starts from zero.
Lab environment
Lessons run on your own Kali Linux desktop in the browser, with the tools ready in their windowed interfaces. Nothing to install; a computer screen is recommended.
Frequently asked questions
- Is this course right for my level?
- The course is at beginner level; every term is explained where it first appears.
- Is there anything to install?
- No. Every lesson runs in your own lab environment that opens in the browser.
- How do lessons work?
- Each lesson has 8 to 10 steps and a short quiz. Early steps show the command to type, later steps give less help; if two attempts fail, the solution opens.
- Can I try it for free?
- Yes. The first three lessons of every course are free.