Designing with CSS
What is CSS?
- CSS stands for Cascading Style Sheets
- Styles define how HTML elements should look in the web browser
- Created to solve a problem with HTML
- Styles obey a cascading order, since an html document has a hierarchical strcuture. For example, HTML > HEAD > BODY > P - any styles applied to BODY will also be applied to P.
Why use CSS?
- Seperates content from its visual presentation
- Gives more stylistic flexibility than HTML can offer
- Makes site-wide changes very easy and fast
- Increases usability
- Smaller pages, faster download (stylesheet downloaded once)
- More accessible to the blind
- Examples
- CSS showcase: http://www.csszengarden.com
- Real world sites
Deconstructing a CSS site
Do-it-yourself CSS Examples
- Some hands-on css examples:
http://www.w3schools.com/css/css_examples.asp
CSS Templates
- http://www.inknoise.com/experimental/layoutomatic.php (template generator)
- http://glish.com/css/
Great CSS Tutorials
Validating your CSS
Many browsers are lenient to errors in CSS code. Code that may work in one browser may break in another browser.
Validate @ http://jigsaw.w3.org/css-validator/