Unit 20 - Client Side Customisation of Web Pages Week 4 – Lesson 5 CSS Assignment
So far… What is CSS? Why is it used? Advantages Three methods of writing CSS The box model Lots of examples
L3U20A1Features of CSS You have a new post at a local website company as a junior web developer. You have been assigned a client – one of four new clients. You have been asked to prepare some introductory information for them. You have the choice of how you present this information: a written report, a formal presentation present it in the form of a web-site.
Task 1 P1 (Today) What is CSS? Why should it be used, emphasise its key advantages. Describe three implementation styles of CSS, showing how they are called from HTML. Illustrate your description with code snippets and screen shots. Indicate where the code would be placed in the HTML page. Note: This is a straightforward description. Be sure to describe the terms: Inline Embedded External
Task 2 (M1 – longer deadline) Refer to your answer for P1, explain the advantages and limitations of the various implementations. Give situations where a particular style would be appropriate situations where you would advise against using them. Use examples to illustrate your answer.
Task 3 (P2) (Today) Describe the features of the box model for CSS; describe the selectors and how they are used. Provide screen-shots and coding for a selection of web-pages you have created to support your description. Note: This is a straightforward description. Be sure to describe the terms: selector content area margin property padding border value
CSS Box Model Structures pages like a table • Defines: – Margins – Borders – Padding – Content
Content area •Place the text, images etc here •Can have more than one on each page
Padding Blank space around the content so that it doesn't impinge on the border (or vice versa). Is optional, if not defined is set to zero (invisible).
Border Designed area at the edge around the content (outside the padding). Is optional, if not defined is set to zero (invisible).
Margin Blank space around the edge of everything to protect it from the edge of the screen or other nearby elements. Is optional, if not defined is set to zero (invisible).
Box model Can define height & width for each area Can be set separately Margins can have negative values Usually set as either pixels or percentages Percent of screen is best for layout consistency Can be in-line or blocked
Box Model Copy this code then vary Use big variations Padding Border Margin Use big variations Observe the effect, take screen shots of your code and the effect! <html> • <head> • <style type="text/css"> • div • { • width:220px; • padding:0px; • border:5px solid gray; • margin:250px; • } • </style> • </head> • <body> • <img src="250px.gif" width="250" height="1" /><br /><br /> • <div class="div">The line above is 250px wide.<br /> • The total width of this element is also 250px.</div> • </body> • </html>
Selectors Selector – title Property – the item being changed Value - How much it is being changed E.g. H1{color: red} specifies that h1 will always give a red colour
Types of Selector
Accessing CSS from HTML One of these needs to be in the head section of each web-page <link rel=“stylesheet” type=“text/css” href=“class.css”/> or <style type = “text/css” title=“currentStyle” media=“screen”> @import “style.css”; </style>
CSS task Create examples for each of the following: – Background colour – Background images – Formatting text – Applying borders – Applying padding – Heading styles – Positioning elements – Creating columns Take screen-shots of the code and the result. Border-radius: 5px;
CSS task continued Note how your examples affected the formatting Alter the values and note how that changes the formatting
Background colour <html> 2. <head> 3. <style> 4. body {background-color: yellow} 5. </style> 6. </head> 7. <body> 8. </body> 9. </html>
Background images <html> 2. <head> 3. <style> 4. body {background-image: url(“picture.jpg”)} 5. </style> image must be in the same folder 6. </head> as web-page or whole file-path. 7. <body> 8. </body> 9. </html>
Formatting text <html> 2. <head> 3. <style> 4. h1{font-family: serif; font-style: italic; font-weight: bold; font-size: 200px; color: green;} 5. </style> 6. </head> 7. <body> 8. <h1> Lorem ipsum </h1> 9. </body> 10. </html>
Applying borders <html> 2. <head> 3. <style> 4. .border1 {border-style: groove} 5. .border2 {border-style: double solid} 6. .border3 {border-style: double solid groove} 7. </style> 8. </head> 9. <body> 10. <p class=“border1”> Lorem ipsum </p> 11. <p class=“border2”>dolor sit amet</p> 12. <p class=“border3”>consectetur adipiscing elit</p> 13. </body> 14. </html>
Applying padding . <html> 2. <head> 3. <style> 4. .padding1 {padding: 1cm} 5. .padding2 {padding: 0.5cm 1.5cm} 6. </style> 7. </head> 8. <body> 9. <table border=“1”> 10. <tr> 11. <td class=“padding1”>dolor sit amet</td> 12. </tr> 13. </table> 14. <br> 15. <table border=“1”> 16. <tr> 17. <td class=“padding2”> consectetur adipiscing elit </td> 18. </tr> 19. </table> 20. </body> 21. </html>
Heading styles 16. </style> 17. </head> 18. <body> <html> 2. <head> 3. <style> 4. h1{ 5. background: red; 6. color: white; 7. font-family: times new roman; 8. font-style: italic; 9. } 10. h2{ 11. text-align: center; 12. text-decoration: underline; 13. font-size: xx-large; 14. Font-weight: bold; 15. } 16. </style> 17. </head> 18. <body> 19. <h1> Sed ac odio eu massa </h1> 20. <br> 21. <h2> mattis pellentesque a </h2> 22. </body> 23. </html>
Positioning elements <html> 2. <head> 3. <style> 4. .position_relative {position:relative;left;20px} 5. . position_absolute {position:absolute;left;200px;top:20px} 6. .border3 {border-style: double solid groove} 7. </style> 8. </head> 9. <body> 10. Suspendisse ac orci tortor 11. <p class=position_relative>dolor sit amet</p> 12. <p class=. position_absolute> consectetur adipiscing elit</p> 13. </body> 14. </html>
Positioning elements Static Relative Absolute fixed Default, next line (or floating) Relative lays out all elements as though the element were not positioned, and then adjust the element's position, without changing layout – leaves a gap for the element Absolute fixed
Positioning elements Static Relative Absolute Instead, position it at a specified position relative to its closest positioned ancestor if any, or otherwise relative to the initial containing block. No gap. Fixed position it at a specified position relative to the screen's viewport and don't move it when scrolled. No gap.
Creating columns 14. .footer { 15. Border-top: 1px solid #006; <html> 2. <head> 3. <style> 4. .nav { 5. width: 220px; 6. padding: 10px; 7. float: left; 8. } 9. .content { 10. padding: 10px; 11. margin-left: 230px; 12. border-left: 1px solid #006; 13. } 14. .footer { 15. Border-top: 1px solid #006; 16. Text-align: right; 17. } 18. </style> 18. </head> 19. <body> 20. Lorem ipsum 21. <div class=“nav”>Suspendisse aliquet</div> 22. <div class=“content”>porta sapien</div> 23. <div class=“footer”>eget dignissim</div> 24. </body> 25. </html>
Columns (Newspaper) <head> • <style type="text/css"> • { • -moz-column-count:3; /* Firefox */ • -webkit-column-count:3; /* Safari and Chrome */ • column-count:3; • } • </style> • </head> • <body> • <div class="newspaper"> • Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad.... • </div> • </body> • </html>
Advantages of CSS Controlling & editing layout is faster House style more consistent – all pages use same style sheet Smaller file sizes – formatting in one file not duplicated across all web-pages Accessibility for users with screen readers improved.
Assignment 1 P1 explain how HTML files access CSS P2 explain the features of the box model for CSS M1 assess different implementation styles of CSS
Effects and Treatments You have this way out font you would like to use e.g. Shelley Allegro You know it does not display very well in a browser..... What to do??????
Image Replacement Well, actually we replace the text.... http://stopdesign.com/archive/2003/03/07/r eplace-text.html
Summary Looked at what CSS is Looked at why we will use it Actually used our first CSS