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.
- How do I add a drop-shadow to an element?
Shadows can be added to boxes with the
box-shadowproperty. This tutorial explains how it works and shows an example.
- How do I fill a box with an image without distorting the image?
object-fitproperty 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?
opacityproperty 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-shadowproperty. 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
- How do I highlight the first paragraph in an article?
Find out how to target the first paragraph with the
- 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 do I center an item?
Centering an item inside another box horizontally and vertically used to be tricky, however Flexbox now makes it simple.
Note: We have a cookbook dedicated to CSS Layout solutions, with fully working examples and explanations of common layout tasks.