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.
Box styling lessons and guides
CSS and text
- 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.
Text styling lessons and guides
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
Note: We have a cookbook dedicated to CSS Layout solutions, with fully working examples and explanations of common layout tasks.