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
The CSS Layout Cookbook
We have a cookbook dedicated to CSS Layout solutions, with fully worked examples and explanations of common layout tasks.