From the course: EPUB: CSS
Unlock the full course today
Join today to access over 22,400 courses taught by industry experts or purchase this course individually.
Understanding the CSS box model
It's impossible to learn anything about CSS without understanding the CSS box model. So in this movie, that's what we'll be taking a look at. So every block of HTML content has it's own box. So every heading and paragraph or div or other structural elements or strong element or every anchor tag, there's nothing I can think of that it doesn't apply to. Boxes can have any combination of three essential properties: The first of which is border, and that as you'd expect draws a line around an object, not necessarily all of it, as you'll see in Chapter 3, when we go into that in a little bit more detail. But border is the first of those properties. Now you'd never normally see a border applied like this around a content, if it was a word like that. For example, it'd be most obvious because of the second property which is padding. And the job of padding is to move the edge of the box, here easy to see, because it's got a border applied to it, away from the content, so it gives it a little…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
What is CSS?4m 30s
-
Understanding the relationship between CSS and EPUB57s
-
Understanding the concept of inheritance2m 59s
-
Taking a look at the basic anatomy of a CSS rule3m 42s
-
Working with three basic CSS selectors4m 23s
-
Working with more advanced compound selectors3m 9s
-
Targeting elements with group selectors1m 43s
-
Understanding descendant selectors3m 48s
-
Using classes and IDs with compound selectors2m 57s
-
Discovering how Cascading Style Sheets are implemented6m 22s
-
Incorporating @ directives in CSS1m 52s
-
Understanding fixed and relative units6m 57s
-
Understanding the CSS box model3m 32s
-
Including comments inside CSS2m 47s
-
Writing more efficient code with shorthand notation3m 53s
-
-
-
-
-