Loading lesson path
CSS
Exercises, quizzes, examples, and short drills that reinforce css foundations.
The CSS Universal Selector The universal selector (*) selects all HTML elements on the page. Example The CSS rule below will affect every HTML element on the page: * { text-align: center; color: blue…
Challenge: Group Headings and Paragraphs Test your understanding of CSS by completing a small coding challenge.
Internal CSS An internal style sheet may be used if one single HTML page has a unique style. The internal style is defined inside the <style> element, inside the head section. Example Internal styles…
Challenge: How To Add CSS Test your understanding of CSS by completing a small coding challenge.
Challenge: Colors Test your understanding of CSS by completing a small coding challenge.
CSS background-image The background-image property specifies an image to use as the background of an element. By default, the image is repeated so it covers the entire element. Example Set the backgr…
CSS background-attachment The background-attachment property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page): Example Specify that the bac…
Challenge: Backgrounds Test your understanding of CSS by completing a small coding challenge.
CSS Border - Individual Sides From the examples on the previous pages, you have seen that it is possible to specify a different border for each side. In CSS, there are also properties for specifying…
CSS Rounded Borders The border-radius property is used to add rounded borders to an element: Normal border Round border Rounder border Roundest border Example p { border: 2px solid red; border-radius…
Challenge: Borders Test your understanding of CSS by completing a small coding challenge.
Challenge: Margins Test your understanding of CSS by completing a small coding challenge.
Challenge: Padding Test your understanding of CSS by completing a small coding challenge.
Challenge: Height/Width Test your understanding of CSS by completing a small coding challenge.
Challenge: Box Model Test your understanding of CSS by completing a small coding challenge.
CSS Outline Offset The outline-offset property adds a space between an outline and the edge/border of an element. The space between an element and its outline is transparent. The following example sp…
Challenge: Outline Test your understanding of CSS by completing a small coding challenge.
Challenge: Text Test your understanding of CSS by completing a small coding challenge.
Challenge: Fonts Test your understanding of CSS by completing a small coding challenge.
Challenge: Icons Test your understanding of CSS by completing a small coding challenge.
CSS Styling Links HTML links can be styled with many CSS properties, like color, text-decoration, background-color, font-size, font-weight, font-family, etc.). Example Style a link with a color, back…
CSS Link Buttons CSS can be used to create HTML link buttons: Link Button Link Button Example Combine several CSS properties to display links as boxes/buttons a:link, a:visited { background-color: #f…
Challenge: Links Test your understanding of CSS by completing a small coding challenge.
Challenge: Lists Test your understanding of CSS by completing a small coding challenge.
Challenge: Tables Test your understanding of CSS by completing a small coding challenge.
Challenge: Display Test your understanding of CSS by completing a small coding challenge.
Challenge: Max-width Test your understanding of CSS by completing a small coding challenge.
Challenge: Position Test your understanding of CSS by completing a small coding challenge.
Challenge: Position Offsets Test your understanding of CSS by completing a small coding challenge.
Challenge: Z-index Test your understanding of CSS by completing a small coding challenge.
Challenge: Overflow Test your understanding of CSS by completing a small coding challenge.
CSS Float Examples
Challenge: Float Test your understanding of CSS by completing a small coding challenge.
Challenge: Inline-block Test your understanding of CSS by completing a small coding challenge.
Challenge: Align Test your understanding of CSS by completing a small coding challenge.
Challenge: Combinators Test your understanding of CSS by completing a small coding challenge.
Challenge: Pseudo-classes Test your understanding of CSS by completing a small coding challenge.
Challenge: Pseudo-elements Test your understanding of CSS by completing a small coding challenge.
Challenge: Opacity Test your understanding of CSS by completing a small coding challenge.
Challenge: Navbar Test your understanding of CSS by completing a small coding challenge.
Challenge: Dropdowns Test your understanding of CSS by completing a small coding challenge.
Challenge: Image Gallery Test your understanding of CSS by completing a small coding challenge.
Challenge: Image Sprites Test your understanding of CSS by completing a small coding challenge.
Challenge: Attribute Selectors Test your understanding of CSS by completing a small coding challenge.
Challenge: Form Styling Test your understanding of CSS by completing a small coding challenge.
CSS Using Two Counters You can create multiple counters for different levels of numbering. The following example creates one counter for the page (named "section") and one counter for each <h1> eleme…
Challenge: Counters Test your understanding of CSS by completing a small coding challenge.
Challenge: Units Test your understanding of CSS by completing a small coding challenge.
Challenge: Inheritance Test your understanding of CSS by completing a small coding challenge.
Specificity Hierarchy Each type of CSS selector has a position in the specificity hierarchy, and the selector types carry different "weights". Selector Example Description Weight Inline styles <h1 st…
Challenge: Specificity Test your understanding of CSS by completing a small coding challenge.
Challenge: !important Test your understanding of CSS by completing a small coding challenge.
Challenge: Math Functions Test your understanding of CSS by completing a small coding challenge.
Challenge: Optimization Test your understanding of CSS by completing a small coding challenge.
Challenge: Accessibility Test your understanding of CSS by completing a small coding challenge.
Challenge: Website Layout Test your understanding of CSS by completing a small coding challenge.