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 Images After 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 Fonts If you used font-generating software … Link to the.css file Include as spans –Icon is shown as the class of a span –Text can appear after the icon icon-plus –A non-breaking space separates the icon from the text span class="icon-star"> icon-star

CSS Image Sprites An 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