PERSPECTIVES: TUTORIAL 4 CREATING PAGE LAYOUTS WITH CSS

RESET STYLE SHEET Used to define default styles Allows designers to start from a knows baseline Important for IE since it does not define structural elements as block elements so formatting in IE would be limited

ASTERISK SELECTOR Using an asterisk * applies the styles to every element nested within the particular element, such as the body. Body * { Font-family: Verdana, Geneva, sans-serif; Font-size: 100%; Font-weight: inherit; List-style: none; }

HIDE SECTIONS Hiding sections allows you to see your design and layout take shape without commenting out portions. Nav.horizontalNAV, #president, nav.verticalNAV, header, aside, footer { display: none; }

ADDING BACKGROUND IMAGE Add image to the body: body{ background-image: url(cyclist.png); } Repeat Background: background-repeat: repeat (horizontal & vertical) background-repeat: repeat-x (tiled horizontally) background-repeat: repeat-y (tiled vertically) Background-repeat: no-repeat background-repeat: round (tiled & resized to fit the container) background-repeat: space (tiled & spaces added to fit container

BACKGROUND POSITION By default background images are placed in upper-left corner background-position: horizontal vertical; The keywords are the positions background-position: 10% 20%; 10% of width to the right and 20% of length down from upper-left background-position: right bottom; Image in lower-right corner of element background-position: 30px Image 30 pixels to the right of the left border and centered vertically

BACKGROUND ATTACHMENT By default a background image moves along with the element content as a user scrolls. To change, use the following: background-attachment: type; Type = scroll, fixed, or local Scroll = default, background scrolls with document Fixed = similar to a watermark, stays in one place Local = similar to scroll used for elements such as a scroll boxes to allow the element background to scroll with the element content

BACKGROUND SIZE Used to change the size of a background – usually single graphic you don’t want to repeat. background-size: width height; : 300px 200px; : auto 200px; : cover; Scale the image until it covers the entire element; usually cropped :contain; Image is scaled so that the entire image is contained within the element but might not cover the whole thing.

BACKGROUND CLIP PROPERTY In the box model, every element contains a content box, padding, and border. Define the extent of a background image or color using the following: background-clip: box; : content-box; (clipped at edge of content) : padding-box ; (clipped at edge of the padding) : border-box ; (clipped at edge of the border) default

BACKGROUND ORIGIN Used with the background-position property Specifies where the image will begin within the position setting background-origin: box; :content-box; :padding-box; :border-box;

BACKGROUND SHORTHAND background: color url(url) attachment position repeat; Ex: background: yellow url(logo.jpg) fixed center no-repeat; Multiple images: header{ background-color: yellow; background-image: url(logo.png), url(logo2.png); background-position: top left, bottom right; background-repeat: no-repeat; }

MULTIPLE IMAGE BACKGROUNDS background-property: value1, value2, … Example: Header { background-color: yellow; background-image: url(logo.png), url(logo2.png); background-position: top left, bottom right; background-repeat: no-repeat; }

BROWSER EXTENSIONS Vender PrefixRendering EngineBrowsers -khtml-KHTMLKonqueror -moz-MozillaFirefox, Camino -ms-TridentInternet Explorer -o-PrestoOpera, Nintendo Wii browser -webkit-WebKitAndroid browser, chrome, Safari Vendor Prefix: indicates the browser vender that created and supports the property Used incase older browsers don’t support current CSS specifications but do support one of the browser extensions.

BROWSER EXTENSIONS When using, start with the most widely supported property first, usually CSS2 property Selector { css2_property: value; -khtml-property: value; -o-property: value; -moz-property: value; -webkit-property: value; -ms-property: value; css3_property: value; }

EXTENSION EXAMPLE Start with the oldest and finish with most current: -o-background-origin: padding-box; -moz-background-origin: padding; -webkit-background-origin: padding-box; background-origin: padding-box;

PAGE LAYOUTS Fixed, Fluid, & Elastic Fixed : the size of the page and the size of the elements within are set without regard to the screen resolution. Fluid : the size of the page and elements are a percentage of the screen width. Elastic : measurements are expressed relative to the default font size using the em unit. Images & text are always in proportion but if default font size is too large, the page could extend beyond the browser window.

FIXED VS. FLUID

OPEN CP_RESETTXT.CSS NOTEPAD++

Add your name and date Below the comment section, add the following comment and style rule: /* Display HTML5 structural elements as blocks*/ article, aside, figure, figcaption, footer, hgroup, header, section, nav { display: block; }

OPEN CYCLETXT.HTML Link CP_Resettxt.css to this html page by inserting the following line above the tag:

DEFINING DEFAULT STYLES Enter the following code to set the defaults for the body. /*Set the default page element styles */ body *{ font-family: Verdana, Geneva, sans-serif; font-size: 100%; font-weight: inherit; line-height: 1.2em; list-style: none; vertical-align: baseline; }

HIDE THE MAIN SECTIONS Below the default styles add the following code: /* Temporarily hide the page sections*/ nav.horizontalNAV, #president, nav.verticalNAV, #story, header, aside, footer { display: none; }

INSERT CODE FROM HANDOUT ABOVE

Return to cp_styles.css In the #president selector add the following properties so it looks like the following: -o-background-size: 40% -moz-background-size: 40% -webkit-background-size: 40% background-size: 40% -moz-border-radius: 30px; -webkit-border-radius: 30%; border-radius: 30px; Save & reload cycletxt.html CREATE ROUNDED CORNER

PRESIDENT’S MESSAGE

Return to cp_styles.css At the bottom of the file insert the following: * { outline: 1px solid red; } Save and reload cycletxt.html everything should have a thin red border around it Return to the cp_styles.css file and remove the outline style Save VIEW LAYOUT STRUCTURE

Go to cp_resettxt.css and then find the style rule at the bottom that hides the elements. Remove the #story and the comma that follows Save and return to cp_styles.css At the bottom add the following: #story { background-color: gray; background-color: rgba(255, 255, 255, 0.8); clear: left; float: left; margin: 20px 0px 0px 33%; width: 66%; } DISPLAY STORY SECTION

Also add: /* Article style */ #story article { border-right: 1px solid black; float: left; width: 50%; } /*Figure box styles */ #story figure { float: left; width: 49%; } Save and reload cycletxt.html

Go to cp_styles.css Below the style for the story article add the following to format the heading: #story article hgroup { background: rgb(97, 30, 2) url(rawlings.png) bottom right no-repeat; o-background-size: contain; -moz-background-size: contain; -webkit-background-size: contain; background-size: contain; color: rgb(145, 98, 78); color:rgba(255, 255, 255, 0.3); height: 90px; text-indent: 10px; } FORMAT ARTICLE HEADING

#story article hgroup h1{ font-size: 158%; letter-spacing: 3px; } #story article hgroup h2 { font-size: 105%; } Save and reload cycletxt.html ARTICLE HEADING CONT…

Return to cp_styles.css Below what you just created add the following rules: #story article p { font-size: 80%; margin: 10px; } #story article ul li { font-size: 80%; margin: 15px 25px; } #story article ul li strong { font-weight: bold; } PARAGRAPH & LIST ITEMS

Return to cp_styles.css At the bottom of the file insert the following: # story figure img { border: 5px inset rgb(277, 168, 145); display: block; margin: 30px auto 10px; width: 80%; } #story figure figcaption { font-size: 75%; font-style: italic; text-align: center; } FORMAT FIGURE BOX

Save and reload cycletxt.html ARTICLE UPDATED

Go to cp_resettxt.css and remove the header and the comma that follows from the hidden style Return to cp_styles.css, add the following below the body selector near the top: /* Styles for the Page Header*/ header { position: absolute; top: 20px; left: 20px; } Save & reload cycletxt.html PLACE PAGE HEADER

Return to cp_resettxt.css Remove the selector aside and the comma that follows from the hidden style. Return to cp_styles.css At the bottom add the following: /* Sidebar styles */ aside { color: rgb(145, 98, 78); position: absolute; top: 400px; left: 10px; width: 30% } PLACE THE SIDEBAR

Return to cp_styles.css At the bottom of the file insert the following: aside h1 { font-size: 105%; font-weight: bold; margin-bottom: 25px; text-align: center; } aside h2 { font-size: 85%; font-weight: bold; } FORMAT SIDEBAR aside p { font-size: 75%; margin: 15px; } Save & reload cycletxt.html

FORMATTED SIDEBAR

POSITIONING PAGE & OVERFLOW TEXT Go to cp_styles.css, locate the body styles section and add the following line after the background style: position: relative; Find the style rule for the aside and add the following 2 styles at the bottom of the block: height: 450px; overflow: auto; SAVE

FOOTER & ADDRESS Go to cp_resettxt.css and delete the entire style rule that hides the page elements. Return to cp_styles.css. At the bottom of the file add the following: /* Page footer styles */ footer { clear: left; margin-left: 33%; width: 66%; } footer address { color: rgb(182, 182, 92); font-size: 80%; font-style: normal; padding-top: 10px; text-align: center; }

COMPLETE PAGE