Use CSS to solve common problems - Learn web development

This page rounds up questions and answers, and other material on the MDN site that can help you to solve common CSS problems.

Styling boxes

How do I add a drop-shadow to an element?: Shadows can be added to boxes with the box-shadow property. This tutorial explains how it works and shows an example.
How do I fill a box with an image without distorting the image?: The object-fit property provides different ways to fit an image into a box which has a different aspect ratio, and you can find out how to use them in this tutorial.
Which methods can be used to style boxes?: A rundown of the different properties that might be useful when styling boxes using CSS.
How can I make elements semi-transparent?: The opacity property and color values with an alpha channel can be used for this; find out which one to use when.

How do I add a drop-shadow to text?: Shadows can be added to text with the text-shadow property. This tutorial explains how it works and shows an example.
How do I highlight the first line of a paragraph?: Find out how to target the first line of text in a paragraph with the ::first-line pseudo-element.
How do I highlight the first paragraph in an article?: Find out how to target the first paragraph with the :first-child pseudo-class.
How do I highlight a paragraph only if it comes right after a heading?: Combinators can help you to precisely target elements based on where they are in the document; this tutorial explains how to use them to apply CSS to a paragraph only if it immediately follows a heading.

How do I center an item?: Centering an item inside another box horizontally and vertically used to be tricky, however Flexbox now makes it simple.

We have a cookbook dedicated to CSS Layout solutions, with fully worked examples and explanations of common layout tasks.