CMPT241 Web Programming

1. CMPT241 Web Programming More CSS: Page Layout

2. Style individual elements, groups of elements, sections of text or of the page Create complex page layouts Why do we need page sections?

3. Tag used to indicate a logical section or area of a page Has no appearance by default, but you can apply styles to it <div class="shout"> <h2>Coding Horror! Coding Horror!</h2> <p class="special">See our special deal on Droids!</p> <p>We'll beat any advertised price!</p> </div>HTML Sections of a page <div> Coding Horror! Coding Horror! We’ll beat any advertised price! output See our special deal on Droids!

4. has no onscreen appearance, but you can apply a style or ID to it, which will be applied to the text inside the span <h2>Coding Horror! Coding Horror!</h2> <p>See our <span class="special“>spectacular</span> deal on Droids!</p> <p>We'll beat <span class="shout“> any advertised price</span>!</p> HTML Inline Sections <span> Coding Horror! Coding Horror! See our spectacular deal on Droids! We’ll beat any advertised price! output

5. applies the given properties to selector2 only if it is inside a selector1 on the page selector1 selector2 { properties } CSS CSS context selectors selector1 > selector2 { properties } CSS • applies the given properties to selector2 only if it is directlyinside a selector1 on the page

6. Context selector example <p>Eat at <strong>Greasy's Burger</strong>...</p> <ul> <li>The <strong>greasiest</strong> burgers in town!</li> <li>Yummy and greasy at the same time!</li> </ul> HTML li strong { text-decoration: underline; } CSS • Eat at Greasy’s Burger… • The greasiest burgers in town! • Yummy and greasy at the same time! output

7. Every element composed of: • content • a border around the element • padding between the content and the border • a margin between the border and other content The CSS Box Model

8. width = content width + L/R padding + L/R border + L/R margin height = content height + T/B padding + T/B border + T/B margin The CSS Box Model (cont.)

9. Document Flow – block elements

10. Document flow - inline elements

11. Document flow - a larger example

12. CSS properties for borders h2 { border: 5px solid red; } CSS output This is a heading.

13. More border properties

14. Another border example h2 { border-left: thick dotted #CC0088; border-bottom-color: rgb(0, 128, 128); border-bottom-style: double; } CSS output This is a heading. • each side's border properties can be set individually • if you omit some properties, they receive default

15. border-radius (new in HTML5) h2 { border-radius: 20px; border-bottom-right-radius: 80px 40px; } CSS • single value • a pair of values representing the horizontal and vertical roundness • Older browsers don’t support this feature.

16. box-shadow • drop shadow under an element • two sizes (px, pt, em, %) for horizontal and vertical offset • Offsets can be negative • blur size • color (optional) • inset for internal shadow (optional) h2 { box-shadow: 10px 10px 5px grey; } CSS

17. CSS properties for padding

18. Padding example 1 p { padding: 20px; border: 3px solid black; } h2 { padding: 10px; background-color: yellow; } CSS This is a first paragraph. This is a second paragraph. output This is a heading

19. Padding example 2 p { padding-left: 200px; padding-top: 30px; background-color: fuchsia; } CSS This is a first paragraph. output This is a first paragraph This is a second paragraph • each side's padding can be set individually • notice that padding shares the background color of the element

20. CSS properties for margins

21. Margin example 1 p { margin: 50px; background-color: fuchsia; } CSS output This is a first paragraph This is a second paragraph • A margin gives a separation between neighboring elements. • notice that margins are always transparent • They don’t contain the element’s background color.

22. Top/bottom margin collapse • When two block elements appear on top of each other, their margins are collapsed • Their shared margin is the larger of the two individual margins

23. Margin example 2 p { margin-left: 8em; background-color: fuchsia; } CSS output This is a first paragraph This is a second paragraph • each side's margin can be set individually

24. Note on margins • body { • margin: 0px; • } CSS • Web page body usually has a margin of its own.

25. “spacer” image <imgsrc="smiley.png" alt="smiley face" /> <imgsrc="pixel.gif" width="200" height="1" alt="spacer" /> <imgsrc="puppy.jpg" alt="cute puppy" /> CSS #puppy{ margin-left: 200px; } CSS

26. Chrome’s build-in tool • Right-click on the element -> Inspect element

27. p { width: 350px; background-color: yellow; } h2 { width: 250px; background-color: aqua; } CSS CSS properties for dimensions output This paragraph uses the first style above An h2 heading

28. Centering a block element: auto margins p { margin-left: auto; margin-right: auto; width: 750px; } CSS Loremipsum dolor sit amet, consecteturadipisicingelit, sed do eiusmodtemporincididuntutlabore et dolore magna aliqua. output • works best if width is set (otherwise, may occupy entire width of page) • center inline elements within a block element? • use text-align: center;

29. removed from normal document flow; underlying text wraps around as necessary The CSS float property img.headericon { float: right; width: 130px; } CSS Ghostbusters is a 1984 American science fiction comedy film written by co-stars Dan Aykroyd and Harold Ramis about three eccentric New York City parapsychologists-turned-ghost capturers. output

30. Floating elements diagram • Vertical position remains the same • Horizontal position is flush against the left or right edge of the document. • Float distance away from the other wrapped elements?

31. Note on floating • Floating vs. alignment • If you simply want something on the left or right side of the page, align it. • If you want to hover on that side of the page with other content wrapping around it, float it. • What elements do we float? • block elements, eg., div • inline elements, eg., img • treated as a block box • width, margins

32. CS380 p { background-color: fuchsia; } h2 { clear: right; background-color: yellow; } CSS The clear property Mario is a fictional character in his video game series. Serving as Nintendo's mascot and the main protagonist of the series, Mario has appeared in over 200 video games since his creation. output Mario is a fictional character in his video game series. Serving as Nintendo's mascot and the main protagonist of the series, Mario has appeared in over 200 video games since his creation Super Mario Fan Site!

33. The clear property (cont.)

34. div #sidebar { float: right; } p { clear: right; } CSS Clear diagram appear below the floating element

35. <p><imgsrc="images/mario.png" alt=“super mario" /> Mario is a fictional character in his video game series.....</p> HTML Common error: container too short p { border: 2px dashed black; } img { float: right; } CSS Mario is a fictional character in his video game series. Serving as Nintendo's mascot and the main protagonist of the series, Mario has appeared in over 200 video games since his creation. output

36. Mario is a fictional character in his video game series. Serving as Nintendo's mascot and the main protagonist of the series, Mario has appeared in over 200 video games since his creation. output

37. p { border: 2px dashed black; overflow: hidden; } CSS The overflow property Mario is a fictional character in his video game series. Serving as Nintendo's mascot and the main protagonist of the series, Mario has appeared in over 200 video games since his creation. output

38. The overflow property (cont.)

39. Float before/after other elements • <div id = “main”> • <p>This is some text</p> • <imgsrc = “smiley.png” alt = “smiley”/> • </div> • CSS • <div id = “main”> • <imgsrc = “smiley.png” alt = “smiley”/> • <p>This is some text</p> • </div> • CSS

40. Multi-column layouts • When more than one element floats in the same direction, they stack horizontally. • The first one is the furthest towards the float direction. • Multi-column layouts • create multiple divs • each with float and width attribute

41. Multi-column layouts <div> <p>first paragraph</p> <p>second paragraph</p> <p>third paragraph</p> Some other text that is important </div> HTML p { float: right; width: 25%; margin: 0.5em; border: 2px solid black; } div { border: 3px dotted green; overflow: hidden; } CSS Some other text that is important output third paragraph second paragraph first paragraph

42. New in CSS3 • column-count • number of columns to use • column-gap • space between columns • column-rule • vertical line between columns • column-span • lets elements span many columns • column-width • width of each column

43. New in CSS3 • Not supported in all browsers • Temporary support for experimental new CSS features • -mozfor Mozilla Firefox • -webkitfor Chrome and Safari • -webkit-column-count • -webkit-border-radius

44. CSS Positioning

45. The vertical-align property • can be top, middle, bottom, baseline (default), sub, super, text-top, text-bottom, or a length value or % • baseline means aligned with bottom of non-hanging letters

46. vertical-align example (cont.)

47. Common bug: space under image <p> <imgsrc="images/smiley.png" alt="smile" /> </p> HTML • red space under the image, despite padding and margin of 0 • this is because the image is vertically aligned to the baseline of the paragraph (not the same as the bottom) • setting vertical-align to bottom fixes the problem

48. #ad { position: fixed; right: 10%; top: 45%; } CSS The position property (examples)

49. Static positioning: place the element within the normal document flow Relative positioning: Shift an element’s position slightly relative to the normal static position actual position determined by top, bottom, left, right Relative positioning #lifted { position: relative; } CSS

50. positioned relative to the block element containing them (normally from the corner of the overall web page) should often specify a width property as well #menubar { position: absolute; left: 400px; top: 50px; } CSS Absolute positioning