1. CMPT241 Web Programming
More CSS: Page Layout

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

3. 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!
Tag used to indicate a logical section or area of a page
Has no appearance by default, but you can apply styles to it

4. 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
has no onscreen appearance, but you can apply a style or ID to it, which will be applied to the text inside the span

5. CSS context selectors
selector1 selector2 {
properties
} CSS
applies the given properties to selector2 only if it is inside a selector1 on the page
selector1 > selector2 {
properties
} CSS
applies the given properties to selector2 only if it is directly inside a selector1 on the page
(selector1 tag is immediately inside selector2 with no tags in between)

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. The CSS Box Model 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

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

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.
property
description
border
thickness/style/size of border on all 4 sides

13. More border properties
property
description
border-color, border-width, border-style
specific properties of border on all 4 sides
border-bottom, border-left, border-right, border-top
all properties of border on a particular side
border-bottom-color, border-bottom-style, border-bottom-width, border-left-color, border-left-style, border-left-width, border-right-color, border-right-style, border-right-width, border-top-color, border-top-style, border-top-width
properties of border on a particular side
Complete list of border properties

14. Another border example
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)
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
property
description
padding
padding on all 4 sides
padding-bottom
padding on bottom side only
padding-left
padding on left side only
padding-right
padding on right side only
padding-top
padding on top side only
Complete list of padding properties

18. Padding example 1 This is a heading This is a first paragraph.
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 each side's padding can be set individually
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
property
description
margin
margin on all 4 sides
margin-bottom
margin on bottom side only
margin-left
margin on left side only
margin-right
margin on right side only
margin-top
margin on top side only
Complete list of margin properties

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 each side's margin can be set individually
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 <img src="smiley.png" alt="smiley face" />
<img src="pixel.gif" width="200" height="1" alt="spacer" />
<img src="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
property
description
width, height
how wide or tall to make this element (block elements only)

28. Centering a block element: auto margins
p {
margin-left: auto;
margin-right: auto;
width: 750px;
} CSS
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 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. 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
property
description
float
side to hover on; can be left, right, or none (default)
removed from normal document flow; underlying text wraps around as necessary

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 What elements do we float?
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. The clear property Super Mario Fan Site!
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!
CS380

33. The clear property (cont.)
description
clear
disallows floating elements from overlapping this element; can be left, right, both, or none (default)

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

35. Common error: container too short
<p><img src="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
We want the p containing the image to extend downward so that its border encloses the entire image

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
We want the p containing the image to extend downward so that its border encloses the entire image

37. 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
We want the p containing the image to extend downward so that its border encloses the entire image

38. The overflow property (cont.)
description
overflow
specifies what to do if an element's content is too large; can be visible (default), auto, hidden (better, most compatible with various browsers)
We want the p containing the image to extend downward so that its border encloses the entire image

39. Float before/after other elements
<div id = “main”>
<p>This is some text</p>
<img src = “smiley.png” alt = “smiley”/>
</div>
CSS
<div id = “main”>
<img src = “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 Some other text that is important third paragraph
<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
We want the p containing the image to extend downward so that its border encloses the entire image
third paragraph
second paragraph
first paragraph

42. New in CSS3 column-count column-gap column-rule column-span
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
-moz for Mozilla Firefox
-webkit for Chrome and Safari
-webkit-column-count
-webkit-border-radius

44. CSS Positioning

45. The vertical-align property
description
vertical-align
specifies where an inline element should be aligned vertically, with respect to other content on the same line within its block element's box
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
<img src="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. The position property (examples)
#ad {
position: fixed;
right: 10%;
top: 45%;
} CSS
property
value
description
position
static
default position
relative
offset from its normal static position
absolute
a fixed position within its containing element
fixed
a fixed position within the browser window
top, bottom, left, right
positions of box's corners

49. Relative positioning
#lifted { position: relative; } CSS
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
How will the html code look?

50. Absolute positioning positioned relative to the block
#menubar {
position: absolute;
left: 400px;
top: 50px;
} CSS
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

51. Fixed positioning removed from normal flow
#area2 { position: fixed; } CSS
removed from normal flow
positioned relative to the browser window even when the user scrolls the window, element will remain in the same place
Values can be negative
“hanging” effect
How will the html code look?

52. The display property property description display
h2 { display: inline; background-color: yellow; } CSS
output
property
description
display
sets the type of CSS box model an element is displayed with
values: none, inline, block, ...
use sparingly, because it can radically alter the page layout

53. The display property
<ul id="topmenu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul> HTML
#topmenu li {
display: inline;
border: 2px solid gray;
margin-right: 1em;
} CSS
output
lists and other block elements can be displayed inline
flow left-to-right on same line
width is determined by content

54. The display property (cont.)
display: none;
} CSS

55. The visibility property
p.secret {
visibility: hidden;
} CSS
output

56. visibility vs. display display: none visibility: hidden
does not occupy space on the page
It’s not there!
visibility: hidden
still occupies space on the page, but invisible to the user
It’s there, but I can’t see it!
can be used to show/hide dynamic HTML content on the page in response to events

57. The opacity property Certain degree of visibility
1.0: completely visible
0.0: invisible
still occupies space on the page

58. Homework 2 A presentable (nice looking) page that uses CSS layout
float
position
Upload to Turing by Monday, the 25th at 11:59PM
Create a link on your homepage
Summary of what we learned