Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

Css group

•
•
Leslie Steele
Leslie Steele

This document summarizes a CSS project created by Sonia Leng and Leslie Steele. They modeled their layout after a sample from CSS Zen Garden and outlined the key CSS rules used, including div IDs to define sections and classes to style navigation buttons. Benefits of CSS layouts are that they allow formatting pages consistently using one external style sheet, improve accessibility, and reduce file sizes. Key considerations for CSS use include site uniformity, element positioning, and formatting links and spacing.

1 of 15
CSS GROUP Sonia Leng & Leslie Steele
Here is a screenshot of our design!
 
Our CSS Project We modeled our CSS layout over the Sakura layout from: http://www.csszengarden.com/?cssfile=/208/208.css&page=0 . So this project consisted of many CSS rules. I’ll outline the most important ones since the rest are redundant. This project used an external cascading style sheet.
Our Div Ids: #container; #pageHeader, #firstblock (secondblock, etc.) the above gave the content areas for the header and area where the entire website would be. So, for example, Our CSS Zen Garden , would be the #pageheader background image. i.e. #pageHeader { width: 700px; height: 200px; background-image: url( pageheader.jpg ); background-position: center; margin-top: 10px;
More Div Ids #firstblock h3 (#secondblock h3, etc.) helped to position the graphic contain in #firstblock. i.e.: #firstblock h3 {height: 100px; width: 500px; margin: -3px 0px 0px 0px; background-image: url(leslieenlightenment.jpg); background-position: top; background-repeat: no repeat; The margin tool helped to position the side graphic (i.e. The Road to Enlightenment) exactly on the page.
DIV ID for navigation #navigation; #videonavigation were used to position the nav bar area on the left of the page. I used #navigation {float: left;} to allow the nav. bars to STAY on the left side.
Div Classes used: .button a; .button a:hover for the link buttons on the page under the div id for navigation. The CSS helped to make rollover images. i.e. when your cursor goes over the link button, an image shows up.
Generic CSS rules used: P, body, a, and a:hover were used for general page characteristics. i.e. a:hover {font-family: Georgia, “Times New Roman”, Times, serif; font-size: 16px; text-decoration: overline; color: #f32b11; background-color: #f7c041 The color scheme for the website design was derived from the page header.
What Are Benefits to a CSS Layout? Saves time by formatting the layout + multiple web pages by only using one file. Different style sheets can be specified to use depending on the technology. This can include PDAs or other mobile devices. Pages are read more accurately and helps screen readers; best for disabled persons. Reduces amount of HTML code needed for a page, thus decreasing overall bandwidth usage.
More benefits to CSS Layouts! Fasting loading for pages in comparison to a table-oriented layout. Replaces lengthy HTML in the .html file. Web site development is much easier and shortened. Easily replaces JavaScript navigation (which takes up a large amount of code); some users may not enable JavaScript so the user may not see the navigation area.
What are Key Considerations for use of CSS? Does the user: want a uniform-looking site without clutter? require specific position of webpage elements? require specific spacing between text? Desire to remove the nasty underline on hyperlinks? Increase attractiveness and ease of coding and updating the website design?
Examples of how to use CSS effectively: Format text Use uniform fonts Format links Adjust margins (so you can position the information) Adjust borders Add customized CSS rules for tables so there is less clutter
In Conclusion: We showed a screenshot of our own layout. Defined the many CSS rules for the website layout. Mentioned the benefits of CSS Offered key considerations and examples for use of a CSS layout.
We hoped you liked our layout and that it inspires you to make one for your own website! Thanks for watching! - Sonia & Leslie

More Related Content

Css group

  • 1. CSS GROUP Sonia Leng & Leslie Steele
  • 2. Here is a screenshot of our design!
  • 3.  
  • 4. Our CSS Project We modeled our CSS layout over the Sakura layout from: http://www.csszengarden.com/?cssfile=/208/208.css&page=0 . So this project consisted of many CSS rules. I’ll outline the most important ones since the rest are redundant. This project used an external cascading style sheet.
  • 5. Our Div Ids: #container; #pageHeader, #firstblock (secondblock, etc.) the above gave the content areas for the header and area where the entire website would be. So, for example, Our CSS Zen Garden , would be the #pageheader background image. i.e. #pageHeader { width: 700px; height: 200px; background-image: url( pageheader.jpg ); background-position: center; margin-top: 10px;
  • 6. More Div Ids #firstblock h3 (#secondblock h3, etc.) helped to position the graphic contain in #firstblock. i.e.: #firstblock h3 {height: 100px; width: 500px; margin: -3px 0px 0px 0px; background-image: url(leslieenlightenment.jpg); background-position: top; background-repeat: no repeat; The margin tool helped to position the side graphic (i.e. The Road to Enlightenment) exactly on the page.
  • 7. DIV ID for navigation #navigation; #videonavigation were used to position the nav bar area on the left of the page. I used #navigation {float: left;} to allow the nav. bars to STAY on the left side.
  • 8. Div Classes used: .button a; .button a:hover for the link buttons on the page under the div id for navigation. The CSS helped to make rollover images. i.e. when your cursor goes over the link button, an image shows up.
  • 9. Generic CSS rules used: P, body, a, and a:hover were used for general page characteristics. i.e. a:hover {font-family: Georgia, “Times New Roman”, Times, serif; font-size: 16px; text-decoration: overline; color: #f32b11; background-color: #f7c041 The color scheme for the website design was derived from the page header.
  • 10. What Are Benefits to a CSS Layout? Saves time by formatting the layout + multiple web pages by only using one file. Different style sheets can be specified to use depending on the technology. This can include PDAs or other mobile devices. Pages are read more accurately and helps screen readers; best for disabled persons. Reduces amount of HTML code needed for a page, thus decreasing overall bandwidth usage.
  • 11. More benefits to CSS Layouts! Fasting loading for pages in comparison to a table-oriented layout. Replaces lengthy HTML in the .html file. Web site development is much easier and shortened. Easily replaces JavaScript navigation (which takes up a large amount of code); some users may not enable JavaScript so the user may not see the navigation area.
  • 12. What are Key Considerations for use of CSS? Does the user: want a uniform-looking site without clutter? require specific position of webpage elements? require specific spacing between text? Desire to remove the nasty underline on hyperlinks? Increase attractiveness and ease of coding and updating the website design?
  • 13. Examples of how to use CSS effectively: Format text Use uniform fonts Format links Adjust margins (so you can position the information) Adjust borders Add customized CSS rules for tables so there is less clutter
  • 14. In Conclusion: We showed a screenshot of our own layout. Defined the many CSS rules for the website layout. Mentioned the benefits of CSS Offered key considerations and examples for use of a CSS layout.
  • 15. We hoped you liked our layout and that it inspires you to make one for your own website! Thanks for watching! - Sonia & Leslie