From the course: CSS: Float-Based Page Layouts (2012)
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Controlling element display - CSS Tutorial
From the course: CSS: Float-Based Page Layouts (2012)
Controlling element display
The display property is by far one of my favorite CSS properties. Now when I first learned about it, I remember thinking to myself, "There is no way you can really do that, can you?" So what does it allow you to do? Well, the display property allows you to change how an element displays within the browsers. Block-level elements can become inline. A div tag can display as a table cell, or you can even tell elements to not display at all. As I'm sure you can imagine, controlling how an element displays within the browser is one of the most powerful CSS capabilities a designer has when creating page layouts. It's also surprisingly simple to do. So what I have right here is I've got the page that we are going to be working on, I've got it previewed within one of my browsers. And I did that because I wanted to show you what the possible values for the display property are, and talk about them a little bit. So, this little group of values right here are the options that we have when setting…
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
-
-
-
(Locked)
Box model review8m 47s
-
(Locked)
Calculating element dimensions11m 11s
-
Understanding margin collapse7m 59s
-
(Locked)
Calculating em values7m 41s
-
(Locked)
Calculating percentage values7m 51s
-
(Locked)
Normal document flow13m 3s
-
(Locked)
Controlling element display8m 53s
-
(Locked)
Using CSS Resets7m 11s
-
(Locked)
Fixed, fluid, and responsive layouts9m 9s
-
(Locked)
CSS debugging tools6m 46s
-
(Locked)
Using the Firebug Inspector and the WebKit Web Inspector11m 5s
-
(Locked)
-
-
-
-
-
-
-
-