What to Style?• Styles for elements establish consistency

– Styles for HTML or body become the default– Only create styles for pre-defined elements*

• Styles for classes are repeatable– Use it to set backgrounds and borders for

various elements– Use it to set text styles for different types of

emphasis• Styles for IDs are specific to that one

instance– An ID refers to 1 (and only 1) instance of an

element of a page.

Tiled Backgrounds• Create an image to be repeated in

Photoshop– Be sure it works as a background!– Use Filter -> Other -> Offset to ensure

random patterns blend at the edges• Make this the background

of the body element– Set background-image*– Default is tiled; can also set

different repeats and offsets

Gradient Backgrounds• Create a gradient background in Illustrator

– Dimensions should be that of the smallest device you are supporting

• Make it scale, without preserving aspect ratio– In a text editor, remove height & width

specifications– Add the following attribute:

preserveAspectRatio="none"• Make this the background

of the body element– Set background-image*– Make background-attachment

= fixed

Scaling ImagesAfter inserting an img into a div …•Remove explicit height & width values•Set new height and width values

– Use "100%" to fill the container– Use "auto" to maintain

aspect ratio– Use max-width and/or

max-height to limit scaling of the image

•Set as an img style if all images are to scale

Using Your Own FontsIf you used font-generating software …•Link to the .css file<link rel="stylesheet" href="CODEread_icon_font/style.css">

•Include as spans– Icon is shown as the class of a span<span class="icon-trash" />

– Text can appear after the icon<span class="icon-plus">icon-plus</span>

– A non-breaking space separates the icon from the textspan class="icon-star">&nbsp;icon-star</span>

CSS Image SpritesAn image sprite is a collection of images saved as a single image•Create the image sprite

– Use a fixed width and height for each– Place different icons in a row; place alternate

states below them•Use as background images

– height & width represent size of each icon– background x & y offsets select the image– a:hover indicates change when hovering over

the icon