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 styles 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 our 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 quite simple. Let’s revisit the concept of formating articles but make it much more visually interesting. In this chapter we will style our content to look like a page out of a newspaper as seen in Figure 4.1.
Figure 4.1 The end result we want to achieve
To create the content columns we will use the CSS multi-column module. Along the way we will also look at how we can manage the space between the columns, how to span elements across multiple columns and how to control where the content breaks onto a new column.
Part of the newspaper uses a list of items, which has some default styles provided to us by the user agent stylesheet. We will look at how to use a new module called the CSS Counters module which allows us to customize how our list-items counters (the numbers and bullets) are styled.