Display Property

DISPLAY: BLOCK

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

DISPLAY: TABLE

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

DISPLAY: INLINE

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

Selective Formatting

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

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;

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

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>

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>

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;

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