Download presentation
Presentation is loading. Please wait.
1
Unit 20 - Client Side Customisation of Web Pages
Week 4 – Lesson 5 CSS Assignment
2
So far… What is CSS? Why is it used? Advantages
Three methods of writing CSS The box model Lots of examples
3
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.
4
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
5
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.
6
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
7
CSS Box Model Structures pages like a table • Defines: – Margins – Borders – Padding – Content
8
Content area •Place the text, images etc here •Can have more than one on each page
9
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).
10
Border Designed area at the edge around the
content (outside the padding). Is optional, if not defined is set to zero (invisible).
11
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).
12
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
13
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>
14
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
15
Types of Selector
16
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>
17
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;
18
CSS task continued Note how your examples affected the formatting
Alter the values and note how that changes the formatting
19
Background colour <html> 2. <head> 3. <style>
4. body {background-color: yellow} 5. </style> 6. </head> 7. <body> 8. </body> 9. </html>
20
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>
21
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>
22
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>
23
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>
24
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>
25
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>
26
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
27
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.
28
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>
29
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>
30
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.
31
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
32
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??????
33
Image Replacement Well, actually we replace the text....
eplace-text.html
34
Summary Looked at what CSS is Looked at why we will use it
Actually used our first CSS
Similar presentations
