CMPT241 Web Programming More CSS: Page Layout

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

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

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

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)

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

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

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

Document Flow – block elements

Document flow - inline elements

Document flow - a larger example

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

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 https://www.w3schools.com/css/css_border.asp

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

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.

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

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 http://www.w3schools.com/css/css_padding.asp

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

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

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 https://www.w3schools.com/css/css_margin.asp

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.

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

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

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

“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

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

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)

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;

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

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?

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS Positioning

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

vertical-align example (cont.)

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

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

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?

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

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?

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

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

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

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

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

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

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