Display Property DISPLAY BLOCK Forcing a box block
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 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 � 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; } <h 1 class=“intro”>Header 1</h 1> <h 2 class=“intro”>Header 2</h 2>
Nested Selector � Only applies within context › Avoids putting class= everywhere! Useful 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
- Slides: 15