CSS in Depth

Chapter 12. Contrast, color, and spacing

This chapter covers

• Converting a designer mockup into HTML and CSS
• Using contrast to draw attention to the right parts of a page
• Selecting colors
• Leveraging white space
• Working with line height

An important part of web development involves taking a mockup from a designer and bringing it to life with CSS. When you do this, you’re effectively translating art into code. Sometimes that translation is straightforward. Other times, you may have to work with the designer to make compromises. Where the designer has fine-tuned every piece of the mockup, you’ll need to consider how to organize the CSS for easy re-use. Your CSS will be more general-purpose than their single-page mockup.

After the translational ...