Learning Responsive Web Design

Chapter 4. CSS for Responsive Sites

While HTML gives structure to all the content on your site, CSS will tell the browser how to style it.

Like Chapter 3, this chapter will be a review for anyone who is already experienced with the technology. However, we’re going to go into more detail on the basic concepts of CSS than we did with HTML, simply because CSS is the code that responsive design is made of. It’s impossible to have a real comprehension of how a responsive website is put together without understanding concepts like the cascade and the box model.

We’ll first look at how versioning of CSS works, and how browser prefixes are used to make sure that new style properties can be rendered appropriately in different browsers, even while these properties are still in the testing period.

Then we’ll look at the different ways to include styles in your website, either by embedding the styles in web pages, by using stylesheets to apply styles to multiple pages or an entire website at once, or by using inline styles to apply styles to individual elements.

Next, you’ll learn the concept of the cascade, which gives Cascading Style Sheets its name. The cascade determines the order in which styles are applied and how the browser chooses among conflicting style rules. We’ll also look at the best way to use the cascade to implement styles on your site with minimal confusion.

After that, we’ll go over the concept of the box model, which determines how elements are displayed on the web page: each ...