CSS Exercises

Test your CSS skills with exercises from all categories:

Exercises

Tip: Sign in to track your progress.

<input id="exercise_filter" type="search" placeholder="Filter categories (e.g. align, background, flex, etc.)" aria-label="Filter categories"> 0/151 done

[## Syntax6 exercises

OpenDone](exercise.asp?x=xrcise_syntax1)[## Selectors6 exercises

OpenDone](exercise.asp?x=xrcise_selectors1)[## Selectors Grouping3 exercises

OpenDone](exercise.asp?x=xrcise_selectors_grouping1)[## How To4 exercises

OpenDone](exercise.asp?x=xrcise_howto1)[## How To - Internal2 exercises

OpenDone](exercise.asp?x=xrcise_howto_internal1)[## How To - Inline2 exercises

OpenDone](exercise.asp?x=xrcise_howto_inline1)[## How To - Multiple and Cascade3 exercises

OpenDone](exercise.asp?x=xrcise_howto_multiple_cascade1)[## Comments5 exercises

OpenDone](exercise.asp?x=xrcise_comments1)[## Colors5 exercises

OpenDone](exercise.asp?x=xrcise_colors1)[## RGB5 exercises

OpenDone](exercise.asp?x=xrcise_colors_rgb1)[## HEX7 exercises

OpenDone](exercise.asp?x=xrcise_colors_hex1)[## HSL6 exercises

OpenDone](exercise.asp?x=xrcise_colors_hsl1)[## Background Color7 exercises

OpenDone](exercise.asp?x=xrcise_background1)[## Background Image6 exercises

OpenDone](exercise.asp?x=xrcise_background_image1)[## Background Repeat6 exercises

OpenDone](exercise.asp?x=xrcise_background_repeat1)[## Background Attachment5 exercises

OpenDone](exercise.asp?x=xrcise_background_attachment1)[## Background Shorthand6 exercises

OpenDone](exercise.asp?x=xrcise_background_shorthand1)[## Border5 exercises

OpenDone](exercise.asp?x=xrcise_border1)[## Border Width6 exercises

OpenDone](exercise.asp?x=xrcise_border_width1)[## Border Color6 exercises

OpenDone](exercise.asp?x=xrcise_border_color1)[## Border Sides5 exercises

OpenDone](exercise.asp?x=xrcise_border_sides1)[## Border Shorthand5 exercises

OpenDone](exercise.asp?x=xrcise_border_shorthand1)[## Rounded Borders5 exercises

OpenDone](exercise.asp?x=xrcise_border_rounded1)[## Margins8 exercises

OpenDone](exercise.asp?x=xrcise_margin1)[## Margin Collapse3 exercises

OpenDone](exercise.asp?x=xrcise_margin_collapse1)[## Padding7 exercises

OpenDone](exercise.asp?x=xrcise_padding1)[## Padding box-sizing1 exercises

OpenDone](exercise.asp?x=xrcise_padding_box-sizing1)[## Height and Width5 exercises

OpenDone](exercise.asp?x=xrcise_height_width1)[## Height and Width3 exercises

OpenDone](exercise.asp?x=xrcise_height_width_min_max1)[## Box Model8 exercises

OpenDone](exercise.asp?x=xrcise_boxmodel1)[## Outline4 exercises

OpenDone](exercise.asp?x=xrcise_outline1)[## Outline Width6 exercises

OpenDone](exercise.asp?x=xrcise_outline_width1)[## Outline Color6 exercises

OpenDone](exercise.asp?x=xrcise_outline_color1)[## Outline Shorthand3 exercises

OpenDone](exercise.asp?x=xrcise_outline_shorthand1)[## Outline Offset4 exercises

OpenDone](exercise.asp?x=xrcise_outline_offset1)[## Text5 exercises

OpenDone](exercise.asp?x=xrcise_text1)[## Text Alignment7 exercises

OpenDone](exercise.asp?x=xrcise_text_align1)[## Text Decoration7 exercises

OpenDone](exercise.asp?x=xrcise_text_decoration1)[## Decoration Styles4 exercises

OpenDone](exercise.asp?x=xrcise_css_text_decoration_styles1)[## Text Transformation5 exercises

OpenDone](exercise.asp?x=xrcise_text_transformation1)[## Text Spacing6 exercises

OpenDone](exercise.asp?x=xrcise_text_spacing1)[## Text Shadow5 exercises

OpenDone](exercise.asp?x=xrcise_text_shadow1)[## Font Family6 exercises

OpenDone](exercise.asp?x=xrcise_font1)[## Web Safe Fonts5 exercises

OpenDone](exercise.asp?x=xrcise_font_websafe1)[## Font Style8 exercises

OpenDone](exercise.asp?x=xrcise_font_style1)[## Font Size7 exercises

OpenDone](exercise.asp?x=xrcise_font_size1)[## Font Shorthand3 exercises

OpenDone](exercise.asp?x=xrcise_font_shorthand1)[## Icons3 exercises

OpenDone](exercise.asp?x=xrcise_icons1)[## Links8 exercises

OpenDone](exercise.asp?x=xrcise_link1)[## Lists8 exercises

OpenDone](exercise.asp?x=xrcise_list1)[## Tables6 exercises

OpenDone](exercise.asp?x=xrcise_table1)[## Table Size4 exercises

OpenDone](exercise.asp?x=xrcise_table_size1)[## Table Alignment7 exercises

OpenDone](exercise.asp?x=xrcise_table_align1)[## Table Style6 exercises

OpenDone](exercise.asp?x=xrcise_table_style1)[## Table Responsive5 exercises

OpenDone](exercise.asp?x=xrcise_table_responsive1)[## Display6 exercises

OpenDone](exercise.asp?x=xrcise_display_visibility1)[## Display / Hide3 exercises

OpenDone](exercise.asp?x=xrcise_display_hide1)[## Max Width5 exercises

OpenDone](exercise.asp?x=xrcise_max-width1)[## Position Static / Relative5 exercises

OpenDone](exercise.asp?x=xrcise_positioning1)[## Position Fixed / Absolute5 exercises

OpenDone](exercise.asp?x=xrcise_positioning_fixed_absolute1)[## Position Sticky4 exercises

OpenDone](exercise.asp?x=xrcise_positioning_sticky1)[## Z-index6 exercises

OpenDone](exercise.asp?x=xrcise_z-index1)[## Overflow6 exercises

OpenDone](exercise.asp?x=xrcise_overflow1)[## Overflow X/Y4 exercises

OpenDone](exercise.asp?x=xrcise_overflow_xy1)[## Float4 exercises

OpenDone](exercise.asp?x=xrcise_float1)[## Clear7 exercises

OpenDone](exercise.asp?x=xrcise_float_clear1)[## Inline-block4 exercises

OpenDone](exercise.asp?x=xrcise_inline-block1)[## Align Horizontal5 exercises

OpenDone](exercise.asp?x=xrcise_align_horizontal1)[## Align Vertical5 exercises

OpenDone](exercise.asp?x=xrcise_align_vertical1)[## Combinators9 exercises

OpenDone](exercise.asp?x=xrcise_combinators1)[## Pseudo Classes Interactive8 exercises

OpenDone](exercise.asp?x=xrcise_pseudo_classes_interactive1)[## Pseudo Classes Structural5 exercises

OpenDone](exercise.asp?x=xrcise_pseudo_classes_structural1)[## Pseudo Elements Text5 exercises

OpenDone](exercise.asp?x=xrcise_pseudo_elements_text1)[## Pseudo Elements Content7 exercises

OpenDone](exercise.asp?x=xrcise_pseudo_elements_content1)[## Opacity9 exercises

OpenDone](exercise.asp?x=xrcise_image_transparency1)[## Vertical Navbar4 exercises

OpenDone](exercise.asp?x=xrcise_navbar_vertical1)[## Horizontal Navbar4 exercises

OpenDone](exercise.asp?x=xrcise_navbar_horizontal1)[## Dropdowns4 exercises

OpenDone](exercise.asp?x=xrcise_dropdowns1)[## Advanced Dropdowns4 exercises

OpenDone](exercise.asp?x=xrcise_dropdowns_advanced1)[## Attribute Selectors5 exercises

OpenDone](exercise.asp?x=xrcise_attribute_selectors1)[## Attribute Selectors Advanced5 exercises

OpenDone](exercise.asp?x=xrcise_attribute_selectors_advanced1)[## Form Inputs5 exercises

OpenDone](exercise.asp?x=xrcise_form_inputs1)[## Form Focus/Icons4 exercises

OpenDone](exercise.asp?x=xrcise_form_focus1)[## Form Elements4 exercises

OpenDone](exercise.asp?x=xrcise_form_elements1)[## Counters4 exercises

OpenDone](exercise.asp?x=xrcise_counters1)[## Counters Nested3 exercises

OpenDone](exercise.asp?x=xrcise_counters_nested1)[## Units Absolute4 exercises

OpenDone](exercise.asp?x=xrcise_units_absolute1)[## Units Relative6 exercises

OpenDone](exercise.asp?x=xrcise_units_relative1)[## Specificity5 exercises

OpenDone](exercise.asp?x=xrcise_specificity1)[## Specificity Hierarchy3 exercises

OpenDone](exercise.asp?x=xrcise_specificity_hierarchy1)[## !important5 exercises

OpenDone](exercise.asp?x=xrcise_important1)[## Math Functions9 exercises

OpenDone](exercise.asp?x=xrcise_math_functions1)[## Rounded Corners8 exercises

OpenDone](exercise.asp?x=xrcise_css3_borders1)[## Border Images6 exercises

OpenDone](exercise.asp?x=xrcise_css3_border_images1)[## Multiple Backgrounds9 exercises

OpenDone](exercise.asp?x=xrcise_css3_backgrounds1)[## Colors9 exercises

OpenDone](exercise.asp?x=xrcise_css3_colors1)[## Color Keywords7 exercises

OpenDone](exercise.asp?x=xrcise_colors_keywords1)[## Linear Gradients8 exercises

OpenDone](exercise.asp?x=xrcise_css3_gradients1)[## Radial Gradients8 exercises

OpenDone](exercise.asp?x=xrcise_css3_gradients_radial1)[## Conic Gradients4 exercises

OpenDone](exercise.asp?x=xrcise_css3_gradients_conic1)[## Shadow Effects7 exercises

OpenDone](exercise.asp?x=xrcise_css3_shadows1)[## Box Shadow5 exercises

OpenDone](exercise.asp?x=xrcise_css3_shadows_box1)[## Text Effects9 exercises

OpenDone](exercise.asp?x=xrcise_css3_text_effects1)[## Web Fonts5 exercises

OpenDone](exercise.asp?x=xrcise_css3_fonts1)[## 2D Transforms5 exercises

OpenDone](exercise.asp?x=xrcise_css3_2dtransforms1)[## 2D Transform Scale4 exercises

OpenDone](exercise.asp?x=xrcise_css3_2dtransforms_scale1)[## 2D Transform Skew4 exercises

OpenDone](exercise.asp?x=xrcise_css3_2dtransforms_skew1)[## 3D Transforms6 exercises

OpenDone](exercise.asp?x=xrcise_css3_3dtransforms1)[## Transitions4 exercises

OpenDone](exercise.asp?x=xrcise_css3_transitions1)[## Transition Timing5 exercises

OpenDone](exercise.asp?x=xrcise_css3_transitions_timing1)[## Animations3 exercises

OpenDone](exercise.asp?x=xrcise_css3_animations1)[## Animation Timing5 exercises

OpenDone](exercise.asp?x=xrcise_css3_animations_timing1)[## Animation Properties4 exercises

OpenDone](exercise.asp?x=xrcise_css3_animations_properties1)[## Tooltips4 exercises

OpenDone](exercise.asp?x=xrcise_tooltip1)[## Tooltip Arrows4 exercises

OpenDone](exercise.asp?x=xrcise_tooltip_arrows1)[## Images5 exercises

OpenDone](exercise.asp?x=xrcise_css3_images1)[## Image Effects4 exercises

OpenDone](exercise.asp?x=xrcise_css3_images_effects1)[## Image Hover4 exercises

OpenDone](exercise.asp?x=xrcise_css3_images_hover1)[## Image Centering4 exercises

OpenDone](exercise.asp?x=xrcise_css3_image_center1)[## Image Filters8 exercises

OpenDone](exercise.asp?x=xrcise_css3_image_filters1)[## Image Shapes8 exercises

OpenDone](exercise.asp?x=xrcise_css3_image_shapes1)[## Object Fit6 exercises

OpenDone](exercise.asp?x=xrcise_css3_object-fit1)[## Object Position3 exercises

OpenDone](exercise.asp?x=xrcise_css3_object-position1)[## Masking5 exercises

OpenDone](exercise.asp?x=xrcise_css3_masking1)[## Button Hover4 exercises

OpenDone](exercise.asp?x=xrcise_css3_buttons_hover1)[## Button Groups4 exercises

OpenDone](exercise.asp?x=xrcise_css3_buttons_groups1)[## Pagination4 exercises

OpenDone](exercise.asp?x=xrcise_css3_pagination1)[## Pagination Styles4 exercises

OpenDone](exercise.asp?x=xrcise_css3_pagination_styles1)[## Multiple Columns4 exercises

OpenDone](exercise.asp?x=xrcise_css3_multiple_columns1)[## Multiple Column Rules5 exercises

OpenDone](exercise.asp?x=xrcise_css3_multiple_columns_rules1)[## User Interface4 exercises

OpenDone](exercise.asp?x=xrcise_css3_user_interface1)[## Variables6 exercises

OpenDone](exercise.asp?x=xrcise_css3_variables1)[## The property Rule4 exercises

OpenDone](exercise.asp?x=xrcise_css3_property1)[## Box Sizing5 exercises

OpenDone](exercise.asp?x=xrcise_css3_box-sizing1)[## Media Queries6 exercises

OpenDone](exercise.asp?x=xrcise_css3_mediaqueries1)[## Flexbox3 exercises

OpenDone](exercise.asp?x=xrcise_css3_flexbox1)[## Flex Container4 exercises

OpenDone](exercise.asp?x=xrcise_css3_flexbox_container1)[## Flexbox Justify4 exercises

OpenDone](exercise.asp?x=xrcise_css3_flexbox_container_justify1)[## Flexbox Align4 exercises

OpenDone](exercise.asp?x=xrcise_css3_flexbox_container_align1)[## Flex Items6 exercises

OpenDone](exercise.asp?x=xrcise_css3_flexbox_items1)[## Flex Responsive3 exercises

OpenDone](exercise.asp?x=xrcise_css3_flexbox_responsive1)[## Grid Columns and Rows7 exercises

OpenDone](exercise.asp?x=xrcise_grid_columns_rows1)[## Grid Container8 exercises

OpenDone](exercise.asp?x=xrcise_grid_container1)[## Grid Align Content4 exercises

OpenDone](exercise.asp?x=xrcise_css_grid_align_content1)[## Grid Item6 exercises

OpenDone](exercise.asp?x=xrcise_grid_item1)[## RWD Intro3 exercises

OpenDone](exercise.asp?x=xrcise_rwd_intro1)[## RWD Viewport4 exercises

OpenDone](exercise.asp?x=xrcise_rwd_viewport1)[## RWD Grid View3 exercises

OpenDone](exercise.asp?x=xrcise_rwd_grid1)[## RWD Media Queries4 exercises

OpenDone](exercise.asp?x=xrcise_rwd_mediaqueries1)[## RWD Images4 exercises

OpenDone](exercise.asp?x=xrcise_rwd_images1)[## RWD Videos3 exercises

OpenDone](exercise.asp?x=xrcise_rwd_videos1)

Log in to track your progress

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

As a logged-in EA Academy 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.