GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Tutorials
  • My W3Schools
  • W3Schools app iOS & Android NEW
  • Spaces
  • Get Certified
  • Plus
  • Practice
  • Campus (previously Academy)
  • Logout
  • 
  • 
  • 
  • 
  • Sign in

This view

  • Original page
  • New address

GeezerVison is showing www.w3schools.com — CSS Exercises

Menu
Search field
×
See More  
NEW W3Schools app iOS & Android Start the adventure
Sign In
★ +1 Spaces Upgrade Paid Courses Spaces Upgrade Paid Courses
   ❮     
     ❯   
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP C C++ C# AWS W3.CSS HOW TO BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS DSA TYPESCRIPT ANGULAR ANGULARJS GIT POSTGRESQL MONGODB ASP AI R GO KOTLIN SWIFT SASS VUE GEN AI SCIPY CYBERSECURITY DATA SCIENCE INTRO TO PROGRAMMING INTRO TO HTML & CSS BASH RUST TOOLS

CSS Tutorial

CSS HOME CSS Introduction CSS Syntax CSS Selectors
Selectors Grouping Selectors Code Challenge
CSS How To
Add External CSS Add Internal CSS Add Inline Style Multiple Style Sheets Code Challenge
CSS Comments CSS Errors CSS Colors
Colors RGB / RGBA HEX / HEXA HSL / HSLA Code Challenge
CSS Backgrounds
Background Color Background Image Background Repeat Background Attachment Background Shorthand Code Challenge
CSS Borders
Border Style Border Width Border Color Border Sides Border Shorthand Rounded Borders Code Challenge
CSS Margins
Margins Margin Collapse Code Challenge
CSS Padding
Padding Padding box-sizing Code Challenge
CSS Height / Width
Height / Width Min / Max Code Challenge
CSS Box Model
Box Model Code Challenge
CSS Outline
Outline Style Outline Width Outline Color Outline Shorthand Outline Offset Code Challenge
CSS Text
Text Color Text Alignment Text Decoration Text Decoration Styles Text Transformation Text Spacing Text Shadow Code Challenge
CSS Fonts
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand Code Challenge
CSS Icons
Icons: Font Awesome Icons: Bootstrap Icons: Google Code Challenge
CSS Links
Styling Links Link Buttons Code Challenge
CSS Lists
Styling Lists Code Challenge
CSS Tables
Table Borders Table Size Table Alignment Table Styling Table Responsive Code Challenge
CSS Display
Display Visibility / Hide Code Challenge
CSS Max-width
Max-width Code Challenge
CSS Position
Static/Relative Position Fixed/Absolute Position Sticky Position Code Challenge
CSS Position Offsets
Offsets Code Challenge
CSS Z-index
Z-index Code Challenge
CSS Overflow
Overflow Overflow X and Y Code Challenge
CSS Float
Float Clear / Clearfix Float Examples Code Challenge
CSS Inline-block
Inline-block Code Challenge
CSS Align
Center Align Horizontal Align Vertical Align Code Challenge
CSS Combinators
Combinators Code Challenge
CSS Pseudo-classes
Pseudo-classes Interactive Structural Code Challenge
CSS Pseudo-elements
Pseudo-elements Text Content Code Challenge
CSS Opacity
Opacity Code Challenge
CSS Navigation Bars
Navbar Intro Vertical Navbar Horizontal Navbar Code Challenge
CSS Dropdowns
Dropdowns Advanced Dropdowns Code Challenge
CSS Image Gallery
Image Gallery Code Challenge
CSS Image Sprites
Image Sprites Code Challenge
CSS Attribute Selectors
Attribute Selectors Advanced Attr Selectors Code Challenge
CSS Forms
Style Forms Style Inputs Input Focus / Icons Other Form Elements Code Challenge
CSS Counters
Counters Nested Counters Code Challenge
CSS Units
Units Absolute Units Relative Units Code Challenge
CSS Inheritance
Inheritance Code Challenge
CSS Specificity
Specificity Specificity Hierarchy Code Challenge
CSS !important
!important Code Challenge
CSS Math Functions
Math Functions Code Challenge
CSS Optimization
Optimization Code Challenge
CSS Accessibility
Accessibility Code Challenge
CSS Website Layout
Website Layout Code Challenge

CSS Advanced

CSS Rounded Corners
Rounded Corners Code Challenge
CSS Border Images
Border Images Code Challenge
CSS Backgrounds
Multiple Backgrounds Background Size Background Origin Background Clip Code Challenge
CSS Colors
Colors Color Keywords Code Challenge
CSS Gradients
Linear Gradients Radial Gradients Conic Gradients Code Challenge
CSS Shadows
Text Shadow Box Shadow Code Challenge
CSS Text Effects
Text Effects Code Challenge
CSS Custom Fonts
Custom Fonts Code Challenge
CSS 2D Transforms
Translate / Rotate Scale Skew / Matrix Code Challenge
CSS 3D Transforms
3D Transforms 3D Perspective 3D Card Flip 3D Cube 3D Carousel Code Challenge
CSS Transitions
Transitions Transition Timing Code Challenge
CSS Animations
Animations Animation Timing Animation Properties Code Challenge
CSS Tooltips
Tooltips Tooltip Arrows Code Challenge
CSS Image Styling
Image Styling Image Effects Hover Overlays Code Challenge
CSS Image Modal
Image Modal Code Challenge
CSS Image Centering
Image Centering Code Challenge
CSS Image Filters
Image Filters Code Challenge
CSS Image Shapes
Image Shapes Code Challenge
CSS object-fit
object-fit Code Challenge
CSS object-position
object-position Code Challenge
CSS Masking
Masking - PNG Masking - Gradients Masking - SVG Code Challenge
CSS Buttons
Styling Buttons Hover Effects Button Groups Code Challenge
CSS Pagination
Pagination Pagination Styles Code Challenge
CSS Multiple Columns
Multiple Columns Multiple Column Rules Code Challenge
CSS User Interface
User Interface Code Challenge
CSS Variables
The var() Function Overriding Variables Variables and JavaScript Variables in MQ Code Challenge
CSS @property
@property Code Challenge
CSS Box Sizing
Box Sizing Code Challenge
CSS Functions CSS Media Queries
Media Queries MQ Examples Code Challenge

CSS Flexbox

Flexbox Intro
Flexbox Intro Code Challenge
Flex Container
Flexbox Container Flexbox Justify Content Flexbox Align Items Code Challenge
Flex Items
Flex Items Code Challenge
Flex Responsive
Flex Responsive Code Challenge

CSS Grid

Grid Intro
Grid Intro Code Challenge
Grid Container
Grid Container Grid Tracks Grid Gaps Grid Align Code Challenge
Grid Items
Grid Items Grid Item Named Grid Item Align Grid Item Order Code Challenge
Grid 12-column Layout
12-column Layout Code Challenge
CSS @supports
@supports Code Challenge

CSS Responsive

RWD Intro
RWD Intro Code Challenge
RWD Viewport
RWD Viewport Code Challenge
RWD Grid View
RWD Grid View Code Challenge
RWD Media Queries
RWD Media Queries Code Challenge
RWD Images
RWD Images Code Challenge
RWD Videos
RWD Videos Code Challenge
RWD Frameworks RWD Templates

CSS Cert

CSS Certificate

CSS SASS

SASS Tutorial

CSS Examples

CSS Templates CSS Examples CSS Videos CSS Editor CSS Snippets CSS Quiz CSS Exercises CSS Code Challenges CSS Website CSS Syllabus CSS Study Plan CSS Interview Prep

CSS References

CSS Reference CSS Selectors CSS Combinators CSS Pseudo-classes CSS Pseudo-elements CSS At-rules CSS Functions CSS Reference Aural CSS Web Safe Fonts CSS Animatable CSS Units CSS PX-EM Converter CSS Colors CSS Color Values CSS Default Values CSS Browser Support

CSS Exercises

❮ Previous Next ❯

Test your CSS skills with exercises from all categories:

Exercises

Tip: Sign in to track your progress.

0/151 done

Syntax6 exercises

Done

Selectors6 exercises

Done

Selectors Grouping3 exercises

Done

How To4 exercises

Done

How To - Internal2 exercises

Done

How To - Inline2 exercises

Done

How To - Multiple and Cascade3 exercises

Done

Comments5 exercises

Done

Colors5 exercises

Done

RGB5 exercises

Done

HEX7 exercises

Done

HSL6 exercises

Done

Background Color7 exercises

Done

Background Image6 exercises

Done

Background Repeat6 exercises

Done

Background Attachment5 exercises

Done

Background Shorthand6 exercises

Done

Border5 exercises

Done

Border Width6 exercises

Done

Border Color6 exercises

Done

Border Sides5 exercises

Done

Border Shorthand5 exercises

Done

Rounded Borders5 exercises

Done

Margins8 exercises

Done

Margin Collapse3 exercises

Done

Padding7 exercises

Done

Padding box-sizing1 exercises

Done

Height and Width5 exercises

Done

Height and Width3 exercises

Done

Box Model8 exercises

Done

Outline4 exercises

Done

Outline Width6 exercises

Done

Outline Color6 exercises

Done

Outline Shorthand3 exercises

Done

Outline Offset4 exercises

Done

Text5 exercises

Done

Text Alignment7 exercises

Done

Text Decoration7 exercises

Done

Decoration Styles4 exercises

Done

Text Transformation5 exercises

Done

Text Spacing6 exercises

Done

Text Shadow5 exercises

Done

Font Family6 exercises

Done

Web Safe Fonts5 exercises

Done

Font Style8 exercises

Done

Font Size7 exercises

Done

Font Shorthand3 exercises

Done

Icons3 exercises

Done

Links8 exercises

Done

Lists8 exercises

Done

Tables6 exercises

Done

Table Size4 exercises

Done

Table Alignment7 exercises

Done

Table Style6 exercises

Done

Table Responsive5 exercises

Done

Display6 exercises

Done

Display / Hide3 exercises

Done

Max Width5 exercises

Done

Position Static / Relative5 exercises

Done

Position Fixed / Absolute5 exercises

Done

Position Sticky4 exercises

Done

Z-index6 exercises

Done

Overflow6 exercises

Done

Overflow X/Y4 exercises

Done

Float4 exercises

Done

Clear7 exercises

Done

Inline-block4 exercises

Done

Align Horizontal5 exercises

Done

Align Vertical5 exercises

Done

Combinators9 exercises

Done

Pseudo Classes Interactive8 exercises

Done

Pseudo Classes Structural5 exercises

Done

Pseudo Elements Text5 exercises

Done

Pseudo Elements Content7 exercises

Done

Opacity9 exercises

Done

Vertical Navbar4 exercises

Done

Horizontal Navbar4 exercises

Done

Dropdowns4 exercises

Done

Advanced Dropdowns4 exercises

Done

Attribute Selectors5 exercises

Done

Attribute Selectors Advanced5 exercises

Done

Form Inputs5 exercises

Done

Form Focus/Icons4 exercises

Done

Form Elements4 exercises

Done

Counters4 exercises

Done

Counters Nested3 exercises

Done

Units Absolute4 exercises

Done

Units Relative6 exercises

Done

Specificity5 exercises

Done

Specificity Hierarchy3 exercises

Done

!important5 exercises

Done

Math Functions9 exercises

Done

Rounded Corners8 exercises

Done

Border Images6 exercises

Done

Multiple Backgrounds9 exercises

Done

Colors9 exercises

Done

Color Keywords7 exercises

Done

Linear Gradients8 exercises

Done

Radial Gradients8 exercises

Done

Conic Gradients4 exercises

Done

Shadow Effects7 exercises

Done

Box Shadow5 exercises

Done

Text Effects9 exercises

Done

Web Fonts5 exercises

Done

2D Transforms5 exercises

Done

2D Transform Scale4 exercises

Done

2D Transform Skew4 exercises

Done

3D Transforms6 exercises

Done

Transitions4 exercises

Done

Transition Timing5 exercises

Done

Animations3 exercises

Done

Animation Timing5 exercises

Done

Animation Properties4 exercises

Done

Tooltips4 exercises

Done

Tooltip Arrows4 exercises

Done

Images5 exercises

Done

Image Effects4 exercises

Done

Image Hover4 exercises

Done

Image Centering4 exercises

Done

Image Filters8 exercises

Done

Image Shapes8 exercises

Done

Object Fit6 exercises

Done

Object Position3 exercises

Done

Masking5 exercises

Done

Button Hover4 exercises

Done

Button Groups4 exercises

Done

Pagination4 exercises

Done

Pagination Styles4 exercises

Done

Multiple Columns4 exercises

Done

Multiple Column Rules5 exercises

Done

User Interface4 exercises

Done

Variables6 exercises

Done

The property Rule4 exercises

Done

Box Sizing5 exercises

Done

Media Queries6 exercises

Done

Flexbox3 exercises

Done

Flex Container4 exercises

Done

Flexbox Justify4 exercises

Done

Flexbox Align4 exercises

Done

Flex Items6 exercises

Done

Flex Responsive3 exercises

Done

Grid Columns and Rows7 exercises

Done

Grid Container8 exercises

Done

Grid Align Content4 exercises

Done

Grid Item6 exercises

Done

RWD Intro3 exercises

Done

RWD Viewport4 exercises

Done

RWD Grid View3 exercises

Done

RWD Media Queries4 exercises

Done

RWD Images4 exercises

Done

RWD Videos3 exercises

Done

Log in to track your progress

If you haven't already, sign up to become a W3Schooler, and get points for every exercise you complete.

As a logged-in W3Schools user you will have access to many features like having your own web page, track your learning progress, receive personal guided paths, and more.

The Exercise

The exercises are a mix of "multiple choice" and "fill in the blanks" questions.

There are between 3 and 9 questions in each category.

The answer can be found in the corresponding tutorial chapter.

If you're stuck, or answer wrong, you can try again or hit the "Show Answer" button to see the correct answer.

Course Certification

Get Certified in coding

Complete the W3Schools coding course, strengthen your knowledge, and earn a certificate you can add to your CV, portfolio, and LinkedIn profile.

Get Certified Today
W3Schools HTML Certificate
W3Schools Certificate
Coding
Learn it. Practice it. Prove it.

❮ Previous Next ❯
★ +1
Sign in to track progress
W3Schools Full Access - your next career move

REMOVE ADS

This way to the W3Schools Adventure app
Learn more about Adventure Mode›

Free account

Track your progress

XP earned 0 Day streak 0 Spaces 0 League —
Sign in to track progress

New

Learn in Adventure Mode W3Schools Adventure App

Coding fundamentals as bite-sized lessons and challenges.

PLUS
SPACES
GET CERTIFIED
FOR TEACHERS
PRACTICE
CONTACT US
×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
[email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
[email protected]

Top Tutorials
HTML Tutorial
CSS Tutorial
JavaScript Tutorial
How To Tutorial
SQL Tutorial
Python Tutorial
W3.CSS Tutorial
Bootstrap Tutorial
PHP Tutorial
Java Tutorial
C++ Tutorial
jQuery Tutorial
Top References
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
AngularJS Reference
jQuery Reference
Top Examples
HTML Examples
CSS Examples
JavaScript Examples
How To Examples
SQL Examples
Python Examples
W3.CSS Examples
Bootstrap Examples
PHP Examples
Java Examples
XML Examples
jQuery Examples
Get Certified
 HTML Certificate
CSS Certificate
JavaScript Certificate
Front End Certificate
SQL Certificate
Python Certificate
PHP Certificate
jQuery Certificate
Java Certificate
C++ Certificate
C# Certificate
XML Certificate
   
FORUM ABOUT CAMPUS
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness
of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookies and privacy policy.

Copyright 1999-2026 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.









You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.