GDT 150 Design for the Internet
Handout: CSS Examples
this is normal paragraph text with a P tag. font-family, font-size, border, and background color were specified for all P tags. P’s are considered block-level elements, meaning each P starts on a new line. additionally, it has default margins that put white space above and below the block.
the first-letter pseudo-class was specified in this paragraph. this is VERY buggy and does very strange things when combined with box styles applied to P.
Letter and word spacing
this text was written in all lowercase letters but should display capitalized. 40 pts of padding were added to the bottom.
This is a normal H1 tag. It also is a block-level element.
Followed by normal text on the next line.This H1 tag will display inline (on the same line as the rest).
See, same line.This is paragraph text. The display for this span is set to ‘block’. No P or BR tags. Because it displays block, it also can have padding added to the bottom. This is still in the same paragraph as the first part.
This paragraph has margin set to 0, so it butts up against the next P down, which also has margin set to 0.
This paragraph has margin set to 0, so it butts up against the next P up, which also has margin set to 0.
This paragraph has 5em of margin specified. It will be 5 em units from anything else on the page. ems change based on the specified font-size.
This paragraph has 10em of padding added to it. it will insert space inside the box and push this content in from the edges.
