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.

Figure 4.1 The result we want to achieve

To create the content columns, we’ll use the CSS Multi-column Layout Module. Along the way, we’ll also look at how we can manage the space between the columns, how to span elements across columns, and how to control where the content breaks to a new column.

Part of the newspaper page uses a list of items, which has some default styles provided to us by the user agent (UA) stylesheet. We’ll look at how to use the CSS Lists and Counters Module, which allows us to customize how our list-items counters (the numbers and bullets) are styled.

4.1 Setting up our theme

4 Creating a responsive web newspaper layout

This chapter covers

Figure 4.1 The result we want to achieve

4.1 Setting up our theme

4.1.1 Fonts

4.1.2 The font-weight property

4.1.3 The font shorthand property

4.1.4 Visual hierarchy

4.1.5 Inline versus block elements

4.1.6 Quotes

4.2 Using CSS counters

4.2.1 The symbols descriptor

4.2.2 The system descriptor