Unit 20 - Client Side Customisation of Web Pages. Week 2 Lesson 4 The Box Model

Size: px

Start display at page:

Download "Unit 20 - Client Side Customisation of Web Pages. Week 2 Lesson 4 The Box Model"

Arabella Preston
6 years ago
Views:

1 Unit 20 - Client Side Customisation of Web Pages Week 2 Lesson 4 The Box Model

2 Last Time Looked at what CSS is Looked at why we will use it Used CSS In-line Embedded (internal style-sheet) External <link rel= stylesheet href= mystyle.css > <style title= currrentstyle media= screen mystyle.css </style>

3 Some definitions Selector Property Value elements

4 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 Element each area of the page; may be a wide variety from <body> to <p>

5 Types of Selector

6 Web-page structure Different elements that can be nested within one another. Style commands: body{ background-color: aqua; font-size: 100%; } div{ Width: 30%; }.feedback{ color: #00ff00; } #footnote{ font-size: 0.2em; } HTML <body> <div> </body> <div class= feedback ></div> <div class= feedback ></div> </div> <div id= footnote ></div>

7 Box Model CSS creates layout of web-pages View in any browser, At any resolution design integrity should remain. Layout recalculated on each opening Pages can be designed very accurately pixel perfect

8 Content area Place the text, images etc here Usually have more than one on each page CSS.item{ width: 20%; background-color: aqua; color: red; } HTML <div class= item >some text <img src= images/#.jpg alt= my image description in words /> </div>

9 Page of examples Create a web-page BoxEG.html with the following elements: <body> custom background-color or background-image <div id= wrapper > custom backgroundcolor, width ~80% 2 <div> containing an image 2 <p> custom color, 2 paragraphs of lorem ipsum in each

10 BoxEG Should look something like image1 #wrapper image2 Text in paragraphs Body

11 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).

12 Padding examples Add padding to the divs with images in them. div { padding: 5px; } Record the code, screen-shot the corresponding webpage element Change the padding e.g. to 50 px, record the code, screen-shot the corresponding web-page element. Write a brief description of how padding has affected the appearance of the element.

13 Border Designed area at the edge around the content (outside the padding). Is optional, if not defined is set to zero (invisible). Can define: Width Color Style (limited list use W3C to find out what these are

14 Border examples Add a border to the div id= wrapper. #wrapper{ Border: 5px solid red; } record the code, screen-shot the corresponding webpage element. Add other borders change width, colour and style. Possible styles are: dotted, dashed, solid, double, groove, ridge, inset, outset. Record as above. Write a brief description of how the border has affected the appearance of the element.

15 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). Can be negative.

16 Margin example Add a margin to both of the <p> elements. p { Margin: 10px; } record the code, screen-shot the corresponding webpage elements. Change the margin e.g. to 50 px, or -10px (margins can take a negative value), record the code, screen-shot the corresponding web-page elements. Write a brief description of how margin has affected the relative positions of the element.

17 CSS Box Model Structures pages like a table Defines: Margins Borders Padding Content

18 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

19 Box Model <html> <head> <style type="text/css"> div { width:220px; padding:0px; border:5px solid gray; margin:0px; } </style> </head> <body> Copy this code then vary Padding Border Margin Use big variations <img src= #.gif" width="250" height="1" /><br /><br /> <div >This div is 220px wide</div> </body> </html> Observe the effect, take screen shots of your code and the effect!

20 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 style.css ; </style>

21 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;

22 CSS task continued Note how your examples affected the formatting Alter the values and note how that changes the formatting

23 Background colour <html> 2. <head> 3. <style> 4. body {background-color: yellow} 5. </style> 6. </head> 7. <body> 8. </body> 9. </html>

24 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>

25 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>

26 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>

27 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>

28 Heading styles <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>

29 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>

30 Positioning elements Static 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

31 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.

32 Creating columns <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>

33 Columns (Newspaper) <head> <style type="text/css">.newspaper { -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>

34 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.

35 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

36 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??????

37 Image Replacement Well, actually we replace the text... eplace-text.html

38 Summary Looked at what CSS is Looked at why we will use it Actually used our first CSS

Unit 20 - Client Side Customisation of Web Pages. Week 2 Lesson 4 The Box Model

Unit 20 - Client Side Customisation of Web Pages Week 2 Lesson 4 The Box Model So far Looked at what CSS is Looked at why we will use it Used CSS In-line Embedded (internal style-sheet) External