Chapter 7

 Change body and link styles  Create a drop-down menu  Change color and font styles in the menu  Create a pop-up effect using CSS  Utilize classes, pseudoclasses, & divisions  Printing using CSS

 Line Height – control vertical spacing between lines of text.  Expressed by: ▪ Number: font-sized specified ▪ Length : em, pt, px, etc. with the length value to set a fixed height ▪ Percentage: based on the font-sized specified.

 The em adapts automatically to the font size that the Web page visitor uses.  1em = to the current font size  2em is 2 times the size of the current font

 All HTML elements can be considered as boxes.  The CSS box model is a box that wraps around HTML elements consisting of: margins, borders, padding, and the actual content.

 Margin – the space between the element and other content on the page  Border – what surrounds the element (content)  Padding – space between the content and the border

 Shorthand property – allows a Web developer to shorten the code. PaddingResults padding: 25px 50px 75px 100px; top, right, bottom, left padding: 25px 50px 75px; top, right /left, bottom padding: 25px 50px; top/bottom, right/left padding: 25px; all sides * Margins will work in the same manner

 Position an element on the Web page  If not used, the elements will display on the page in the order in which they appear..menu ul {display: none; position: absolute; background-color: white; margin: 2px 5px 5px 0;} class Position property Margin shorthand

ValueDescription AbsolutePositioned relative to the first parent element that has a position other than static FixedRelative to the browser window RelativeRelative to its normal position. Ex. – “left: 10” adds 10 pixels to the left position StaticDefault; no position; normal flow InheritValue of the position property should be inherited from the parent element * Red values are absolutely positioned elements

 Used to give blocks of text and graphics rounded corners p.box{width: 400px; margin-left: 20px; margin-top: 50 px; border-radius: 5px; padding: 10px ; background-color: white; }

 Allows users to print the content of the page without the navigation bar.  Page Box - area that contains 2 areas: the page and margin.  Page area: the boxes (elements) laid out on the page  Margin area: surrounds the page area.

 contains followed by an optional page { {margin: 0.5in;}

Chapter 7 folder – jaredadam.html

Highlight: <!— body{font-family: Verdana, Arial; background-color: #303032;} a{text-decoration: none; color: #303032;} #menubar{background-color: #303032; color: white; height: 40px;}.menu{float:left; padding: 0.6em 3em 0.1em 0.5em; cursor: default;}

.menu ul{display: none; position: absolute; background-color: white;list-style: none; margin: 2px 5px 5px 0; padding: 0;}.menu ul li{display: block; font-size: small; padding: 0.2em} div.menu:hover ul{margin:0; padding: 0; display: block; background-color: white; color: #303032} div.menu ul li:hover{background-color: #cccccc;}

.whitepipe{color: white;} p.box{width: 400px; margin-left: 20px; margin-top: 50px; border-radius: 5px; background-color: white; padding: 10px; color: #303032;} img.posit{position: relative; left: 460px; top: -270px} -->

img.small{text-decoration: none;} /* displays text decoration around images on the left */ div#sizes a img.large {height: 0; width: 0; border-width: 0;} /* hide the large image by setting its height and width to zero */ div#sizes a:hover img.large{position: absolute; top: 68px; left: 170px; height: 389px; width: 500px;} /* make the larger image appear on the right when a user hovers over the smaller image on the left */

p{margin-bottom: 26px; margin-top: 26px; font-size: small; font-family: Verdana, Arial; color: #100375;} /* add bottom and top margins to p elements so they are aligned with the large image */ Save as stylesch7.css

 Add in code to link the new CSS document to waterfall.html AND whale.html.

@page{margin: 0.5in;} /* set printed page with half inch margins */ #menubar{display: none;} /* do not print the menubar that displays at the top of the Web page */.box{text-align: left; font-size: 12pt; font-family: Times New Roman;}.posit{border-width: 0px; width: 7.125in; height: 5.361in;} /* specific styles set for paragraph box and image posit classes */ Save as printpage.css

 Open back up jaredadam.html and add the code to link printpage.css to it.