1. Display Property

2. DISPLAY: BLOCK

3. Forcing a box (block) model
Note all elements are defined as blocks
Examples not:
Cite, em, strong
Want them to flow with the text
Display: block
starts a new line

4. DISPLAY: TABLE

5. Letting the browser help
Remember that we need a size to be able to center
In the case of the list, we didn’t know what it was
But the computer does!
display: table

6. DISPLAY: INLINE

7. List items Start new lines: blocks! We can change that!
display: inline
Creates horizontal list
Defaults to no bullets

8. Selective Formatting

9. Formatting by section
Paragraph in each section may want to look different
Smaller in header or footer
Lists
No bullets
In a line
Different spacing

10. Selecting one of several definitions for the same tag
Name the context in the css by using a space
Any div with the class of center can look like this.
header p {
text-align: center; }
footer p {
text-align: right;

11. Multiple Styles: Classes
HTML: class=“name”
Use names to imply content, not style
Multiple ways to define
Style that applies to only one element
Style that applies to many elements

12. Class for one element
Name the declaration set for a specific selector (tag)
HTML: class=“name”
CSS: tag.name
Any div with the class of center can look like this.
div.intro{
text-align: center; }
<div class=“intro”>
</div>

13. Class for many elements
HTML: class=“name”
CSS: .name
Particularly useful for maintaining consistency
.intro{
text-align: center;
color: red; }
<h1 class=“intro”>Header 1</h1>
<h2 class=“intro”>Header 2</h2>

14. Nested Selector Only applies within context
Avoids putting class= everywhere!
Useful for formatting lists
HTML: class=“name” only for encompassing
CSS: tag.name tag
ul.horizontal {
list-style-type: none; }
ul.horizontal li {
display: inline;

15. Inheritence Some times multiple formatting applies
Formatting with no classes or scope
Formatting with a class or scope
When the second applies, BOTH APPLY
Override
Additive