Coding For Dummies

Chapter 7

Next Steps with CSS

IN THIS CHAPTER

Formatting lists and tables

Styling web pages using parent and child selectors

Naming pieces of code using id and class

Using the box model to position HTML elements on the page

Design is not just what it looks like and feels like. Design is how it works.

—STEVE JOBS

In this chapter, you continue building on the CSS you learned in the previous chapter. So far, the CSS rules you’ve seen applied to the entire web page, but now they get more specific. You learn how to style several more HTML elements, including lists, tables, and forms, and how to select and style specific parts of a web page, such as the first paragraph in a story or the last row of a table. Finally, you learn how professional web developers use CSS and the box model to control down to the pixel the positioning of elements on the page. Understanding the box model is not necessary to build our app in Chapter 10.

Before diving in, remember the big picture: HTML puts content on the web page, and CSS further styles and positions that content. Instead of trying to memorize every rule, use this chapter to understand CSS basics. CSS selectors have properties and values that modify HTML elements. There is no better way to learn than by doing, so feel free to skip ahead to the Codecademy practice lessons at the end of the chapter. Then, use this chapter as a reference when you have questions about specific elements you are trying to style.

Styling (More) Elements on Your Page ...