CSS Formatting Elements Setting values with CSS

We can make tons of adjustments to look and feel with CSS alone

We can take this: And make it look like this:

Backgrounds

� Can customize the color � Or insert an image as the background

"   Color gradients background-image: -webkit-linear-gradient(top, #ff0000, #999999);!

background-image: -moz-linear-gradient(top, #ff0000, #999999);!

background-image: -ms-linear-gradient(top, #ff0000, #999999);!

background-image: -o-linear-gradient(top, #ff0000, #999999);!

background-image: linear-gradient(to bottom, #ff0000, #999999);!

Browser-specific CSS properties •  -moz-* •  Gecko engine •  Mozilla Firefox

•  -ms-* •  Trident engine •  Microsoft Internet Explorer

•  -webkit-* •  Webkit engine •  Google Chrome •  Apple Safari

•  -o-* •  Presto engine •  Opera Opera

Hands-on color gradients

Text effects

" text-shadow " text-overflow " word-wrap " word-break

Border effects

" dropshadow " rounded corners " border image

Hands-on CSS formatting

Conclusion

� CSS styles give the site its look and feel by setting colors, fonts, sizes, layouts, spacing and so much more

� The new CSS3 features have expanded that by adding gradients, shadows, rounded corners and many other features

�  Sometimes we have to specify the browser type with a prefix on the property being set

Further study

� List of engine-specific features and prefixes ◦  http://peter.sh/experiments/vendor-prefixed-css-

property-overview/

� Playground to learn CSS ◦  http://css3please.com/

� Color picker and gradient generator ◦  http://colorzilla.com