Tiny CSS Projects

4 Creating a responsive web newspaper layout

This chapter covers

• Using the CSS Multi-column Layout Module to create a newspaper layout
• Using the counter-style CSS at-rule to create custom list styles
• Styling images using the filter property
• Handling broken images
• Formatting captions
• Using the quotes property to add quotation marks to HTML elements
• Using media queries to change the layout based on screen size

In chapter 1, we looked at creating a single-column article, which taught us the basic principles of CSS. The design, however, was simple. Let’s revisit the concept of formatting articles but make it much more visually interesting. In this chapter, we’ll style our content to look like a page out of a newspaper, as shown in figure 4.1.