index.md

---

title: Use CSS to solve common problems
slug: Learn/CSS/Howto

---

{{LearnSidebar}}

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 {{cssxref("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 {{cssxref("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 {{cssxref("opacity")}} property and color values with an alpha channel can be used for this; find out which one to use when.

Box styling lessons and guides

• The Box Model

• Styling backgrounds and borders

CSS and text

• How do I add a drop-shadow to text?

  • : Shadows can be added to text with the {{cssxref("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 {{cssxref("::first-line")}} pseudo-element.

• How do I highlight the first paragraph in an article?

  • : Find out how to target the first paragraph with the {{cssxref(":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.

Text styling lessons and guides

• How to style text

• How to customize a list of elements

• How to style links

• CSS Selectors

CSS Layout

• 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.

Layout guides

• Using CSS Flexbox

• Using CSS multi-column layouts

• Using CSS Grid Layout

• Using CSS generated content

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