Teach Yourself VISUALLY HTML and CSS, 2nd Edition

CHAPTER 9

Sizing and Positioning with CSS

In this chapter, you learn how to use CSS to size and position elements in your web pages. You work with elements, pseudo-classes, and pseudo-elements; use the :important declaration to override CSS; and control padding, borders, and margins. You fix elements in place, float elements alongside other elements, and create CSS Flexboxes to allocate space dynamically.

Understanding Pseudo-Classes

Apply Contextual Formatting with Pseudo-Classes

Understanding CSS Combinators

Target Elements Using CSS Combinators

Understanding Pseudo-Elements

Apply CSS to Pseudo-Elements

Override CSS by Using the !important Declaration

Understanding the CSS Box Model

Understanding Ways of Sizing Elements

Specify the Size for an Element

Specify Padding and Borders for an Element

Set Margins to Control Element Spacing

Understanding CSS Positioning Essentials

Create Block Quotes

Fix an Element in Place in the Viewport

Float an Element Beside Another Element

Understanding the display Property

Control the Display of an Element

Create a Flexbox Layout

Understanding Pseudo-Classes

In Chapter 7, you learned to use CSS classes, selectors that enable you to apply styles to items you mark as belonging to a particular class. For example, if you define a style called .dramatic, you can apply it to different elements by using class statements, such as <p class="dramatic"> ...