Use CSS to solve common problems

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.