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 Sections of a page <div> <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 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 Inline Sections <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 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 CSS context selectors selector1 selector2 { properties } CSS selector1 > selector2 { properties } CSS • applies the given properties to selector2 only if it is directly inside 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) • single value • a pair of values representing the horizontal and vertical roundness • Older browsers don’t support this feature. h2 { border-radius: 20px; border-bottom-right-radius: 80px 40px; } CSS

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 • Web page body usually has a margin of its own. • body { • margin: 0px; • } CSS

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. CSS properties for dimensions p { width: 350px; background-color: yellow; } h2 { width: 250px; background-color: aqua; } CSS 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 doloremagna 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 floatproperty 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 againstthe 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. often floating block elements must have a width property value Let’s try “floating” Common float bug: missing width

33. CS380 The clear property p { background-color: fuchsia; } h2 { clear: right; background-color: yellow; } 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 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!

34. The clearproperty (cont.)

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

36. Common error: container too short <p><imgsrc="images/mario.png" alt=“super mario" /> Mario is a fictional character in his video game series.....</p> HTML 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

37. 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 p { border: 2px dashed black; overflow: hidden; } 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

39. The overflowproperty (cont.)

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

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

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

43. New in HTML5 • 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

44. New in HTML5 • 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

45. Sizing and Positioning

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

47. vertical-align example <p style="background-color: yellow;"> <span style="vertical-align: top; border: 1px solid red;"> Don't be sad! Turn that frown <imgsrc="images/sad.jpg" alt="sad" /> upside down! <img style="vertical-align: bottom“ src="images/smiley.jpg" alt="smile" /> Smiling burns calories, you know. <img style="vertical-align: middle" src="images/puppy.jpg" alt="puppy" /> Anyway, look at this cute puppy; isn't he adorable! So cheer up, and have a nice day. The End. </span> </p> HTML

48. vertical-align example (cont.)

49. Common bug: space under image <p style="background-color: red; padding: 0px; margin: 0px"> <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

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