Advanced Web Design: Cascading Style Sheets (CSS)


Rational: why is it important for me to learn CSS?

Style sheets allow you to more effeciently control the layout and formatting of your web site. Wholesale changes to your site are simplified and can be done more quickly. Redundant code can be eliminated which reduces file size and loading time. A web designer worth his salt ought to know CSS. However, CSS isn't necessarily the right fit for all clients because there are inconsistencies between browsers and older browsers do not recognize them. There are two basic types of style sheets: internal and external. The internal style sheets control the formatting and layout of a single page (the page on which they are residing between the Head tags). An external stlye sheet is a separate document and it is referenced from other web pages. There is actually a third type of Styles, In line Styles, that can be used to control formatting of a particular portion of a web document. You are expected to learn and demonstrate mastery of only the internal and external stlyes.

Challenges:
  1. Research and develop an internal stlye sheet to control the formatting and layout of a single page in your in your client's site or your personal web site.
  2. Research and develop an external or separate stlye sheet document that controls the formatting and layout of an entire web site.

Style elements to control using CSS:
  1. Demonstrate the ability to create a class.
  2. Hide the sheet from older browsers.
  3. Use two text colors.
  4. Change text alignment
  5. Bold or Italicize
  6. Font. Show three font option in case viewers/browsers don't have one of the fonts you specify.
  7. Font size (at least two).
  8. Two text colors.
  9. Add a background.
  10. Another tricky application of CSS that will impress your peers, win friends, and earn an A grade for this unit is using CSS for positioning elements on a page. You may find this article on Webmonkey very helpful, "Introduction to CSS Positioning". For an A grade on this unit, successfully include elements (either text or images) positioned using these techniques:

Resources: