LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 11: Layout with Styles

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Objectives Structure a fixed layout page. Reset or normalize default styles. Control the display type and visibility of elements Set height and width for an element. Add margins and padding around an element. Float elements on a page. Offset elements in the natural flow. Position elements absolutely and in a stack. Align elements vertically.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Layout with Styles

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Considerations When Beginning a Layout Separating content and presentation: Always separate content (HTML) and presentation (CSS) by linking to an external style sheet. Link all your pages, and they can all share the same layout and overall style. Also makes it easier to change the design of the whole site at a later date, simply by modifying the CSS file or files.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Layout Approaches Two main types of website designs: fixed-width and responsive. Fixed-layout layout has pixel-based widths for whole page and for each column of content. –Width doesn’t change on smaller devices or browsers. Responsive webpage layout, also called fluid or liquid, uses percentages instead of pixels for widths. –Page shrinks and expands depending on viewing conditions. –Allows tailoring to mobile, tablet, and desktop users with the same HTML, not three different sites. –Ethan Marcotte coined the term responsive web design.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Structuring Your Pages To structure your page: –Divide sections of your page into article, aside, main, nav, section, header, footer, and div elements, as appropriate. Also apply ARIA landmark roles as appropriate. –Put your content in an order that would be the most useful if CSS were not used. –Use heading elements (h1–h2) consistently to identify and prioritize information on page within sections. –Mark up the rest of your content with the appropriate semantics, such as paragraphs, figures, and lists. –Use comments as desired to identify different areas of your page and their contents.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Basic Page Structure Thanks to its solid semantics, it is perfectly usable and intelligible, if a bit spare.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Styling HTML5 Elements in Older Browsers HTML5 introduces several new semantic elements. Modern browsers support new elements natively, applying default styles. Older browsers allow styling elements they don't yet support natively. –Internet Explorer 8 is the exception, but there’s an easy workaround.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Style New HTML5 Elements in All Browsers Add code to your site’s main style sheet. Skip this step if you use a CSS reset or normalize.css. Two ways to work, both using the HTML5 shiv: –Easier way: Add the code into the head element (not the header element) of each of your pages that loads the file from another website (googlecode.com). –Better way: Host the JavaScript file on your website. It prevents your site from breaking in the older versions of IE. –Download the HTML5 shiv ZIP file and include the JavaScript file in your site. Now, style away with CSS as you please!

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE The HTML5 Shiv HTML5 shiv (or shim) is a bit of JavaScript that fixes older browsers so they recognize CSS on elements they don’t support natively. –Created by web community based on discovery made by Sjoerd Visscher. The HTML5 shiv has been bundled into some JavaScript libraries like Modernizr so you won’t need to load the HTML5 shiv separately.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Resetting or Normalizing Default Styles Two ways to level differences between default browser style sheets: –Begin main style sheet with a CSS reset that effectively sets all the default element styles to “zero.” –Begin main style sheet with normalize.css, which tweaks default styles to look very similar across browsers.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Reset and Normalize Examples ResetNormalize.css

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE The Box Model The box model: Invisible box encloses each element. Four properties that determine its size: –Content area. –Padding: Space surrounding that area. –Border: Outside edge of the padding. –Margin: Invisible space around the border that separates one element from the next. Each property, and even parts of properties, can be controlled individually.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE The Box Model in Context

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Width, Height, and the Box Model Default model: Display width determined by element width, left and right padding, and left and right border. Set box-sizing: border-box; on an element to match display width element to the value of the width property.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Controlling the Display Type and Visibility of Elements Element display types: –Block-level: Starts on a new line like a new paragraph. –In-line: Doesn’t generate a new line. –Inline-block: Hybrid display that allows an element to appear inline with other content, while otherwise behaving like a block-level element. –None: Element doesn’t display at all. Document flow: Elements are displayed in same order they appear in HTML code, from top to bottom and with line breaks at beginning and end of each element that isn’t inline.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Inline Versus Block-Level

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Inline-Block Versus None

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Specify How Elements Should Display In style sheet rule, type display: Type block, inline, inline-block, or none.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Control an Element’s Visibility In your style sheet rule, type visibility: Type hidden to make the element invisible without removing it from the document flow. Or type visible to reveal the element.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Setting the Height or Width for an Element Set height and width on sectioning content, paragraphs, list items, divs, images, video, and form elements. Set phrasing content elements (which display as inline by default) to display: block; or display: inline- block; and then apply a width or height to them too.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Set the Height or Width for an Element Type width: w –Where w is the width of the element’s content area and can be expressed either as a length (with units like px and em) or as a percentage of the parent element. –Or use auto to let the browser calculate the width (this is the default). Type height: h, –Where h is the height of the element and can be expressed only as a length (with units like px and em). –Or use auto to let the browser calculate the height (this is the default).

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Setting Height and Width The main area remains at 600 pixels wide no matter how wide you make the browser window.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Setting Height and Width The sidebar is half the width of the main content.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Width, Margins, and Auto Auto value is calculated from width of containing block minus element’s padding, borders, and margins. –Containing block is width that element gets from its parent. –Elements like images have an auto width equal to their intrinsic value, i.e. the actual dimensions of the external file. –Inline elements ignore width property altogether.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Manually Setting Width and Margins If you manually set width, margin-left, and margin- right values, but together with border and padding, they don’t equal the size of the containing block, then browser will override and set margin-right to auto. If you manually set the width, but set one of the margins to auto, that margin will stretch or shrink to make up the difference. If you manually set width but leave both margins set to auto, both margins will be set to the maximum value, resulting in your element being centered.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Paragraph Margins Top paragraph: Width is auto, so its value is derived from the width of the containing block minus its own margins, border, and padding. Bottom paragraph: Width is set manually, so the right margin is adjusted to pick up the slack.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Why Min-Height is Often Preferable to Height Avoid specifying an element’s height. Let content and browser dictate height instead of style sheet. Set height can break element’s box when content grows. Min-height: Sets element to always be at least a certain height. If content grows, element’s height will grow automatically. Reasons content might grow. –Content might come from database or feed. –Content may be user-generated. –Visitor may increase font size in browser, overriding style sheet.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Adding Padding Around an Element Padding is extra space around contents of an element, but inside the outer edge (border). Change padding’s thickness, but not its color or texture. To add padding around an element: –Type padding: x Where x is the amount of desired space to be added, expressed in units (typically in ems or pixels) or as a percentage of the width of the parent element. –Or apply padding to a single side by typing padding-top: x;, padding-right: x;, padding-bottom: x;, or padding-left: x;

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Adding Padding

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Shorthand Notation for Padding padding: 5px;—With one value, it applies to all sides. padding: 5px 9px;—With two values, the first value applies to the top and bottom and the second value applies to the right and left. padding: 5px 9px 11px;—With three values, the first applies to the top, the second to the right and left, and the third to the bottom. padding: 5px 9px 11px 0;—With four values, they are applied to the top, right, bottom, and left, in clockwise order.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Setting the Border Borders can be around an element or on individual sides of an element. –You can set its thickness, style, and color. –If you’ve specified any padding, the border encloses both the padding and the contents of the element.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Border Style, Width, and Color To define the border style: –Type border-style: type Where type is none, dotted, dashed, solid, double, groove, ridge, inset, or outset. To set the width of the border –Type border-width: n Where n is the desired width, including abbreviated units. To set the color of the border –Type border-color: color Where color is a color name, hex value, or RGB, HSL, RGBA, or HSLA color.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Set One or More Border Properties with a Shortcut Type border. –If desired, type -top, -right, -bottom, or -left to limit the effect to a single side. –If desired, type -property Where property is style, width, or color, to limit the effect to a single property. Type : (a colon). Type appropriate values. –If skipped above, specify any or all border properties. –If you specified a property type, use an accepted value for just that property.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Border Styles in Firefox

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Setting the Margins Around an Element Margin is the amount of transparent space between one element and the next. For padding and margins, em values are relative to the element’s font size, not to its parent’s font size. Formula to determine margin or padding em value is: desired size / element’s font size = value To set an element’s margins: –Type margin: x Where x is the amount of desired space to be added, expressed as a length, a percentage of the width of the parent element, or auto.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Adjusting Space Between Heading and Image

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Making Elements Float Float property makes elements float in a sea of text (or other elements). Use to make text wrap around images or other elements to create multi-column layouts.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Wrap Text Around Elements Type float:. –Type left if you want the element on the left and the rest of the content to flow to its right. –Or type right if you want the element on the right and the rest of the content to flow to its left. –Or type none if you don’t want the element to float at all. None is the default value. Use the width property to explicitly set width of the element.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Controlling Where Elements Float A floated element (like the image) forces subsequent content to wrap around it. The height of the section element (the yellow area) seems to be affected by the image, but looks can be deceiving.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Controlling Where Elements Float See how the floated element is taken out of the document flow and doesn’t affect the parent element’s height at all.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Controlling Where Elements Float Clear property can stop the floating effect. When applied to an element, it and subsequent elements display after the floated element.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Making a Parent of a Float “Self-Clearing” Clearfix is a method for making the container clear the floats itself. Include the.clearfix rules in your style sheet, and add the clearfix class to the parent of the floated element(s) you wish to clear.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Control Where Elements Float Type clear:. Type: –left to keep elements from floating to the left of the element. –right to keep elements from floating to the right of the element. –both to keep elements from floating to either side of the element. –none to let elements flow to either side of the element. Or, to make an ancestor of a float include the floated element in its height and stop floating behavior after it, use the clearfix or overflow methods instead.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Using Overflow for Self- Clearing Floats Use the overflow property on the parent of a float instead of the clearfix method. overflow: hidden; will cut off content. overflow: auto; also works and doesn’t cut off content, but you might see a scroll bar, which is undesirable in its own way.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Positioning Elements Relatively Each element has a natural location in a page’s flow. Relative positioning means moving the element with respect to this original location. The surrounding elements are not affected at all.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Offset Elements Within the Natural Flow Type position: relative;. Type top, right, bottom, or left. Then type :d, where d is the desired distance that you want to offset the element from its natural location. Repeat for additional offsets.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Positioning Elements Absolutely Elements in a webpage generally flow in the order in which they appear in the HTML source code. Absolute positioning takes elements out of the normal flow entirely by specifying their precise position with respect to the body or to their nearest positioned ancestor element. –No space is left where an absolutely positioned element would have appeared normally. –Other elements do not flow around an absolutely positioned element.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Position Elements Absolutely Type position: absolute; If desired, type top, right, bottom, or left. Then type : d, –Where d is expressed as desired distance you want to offset the element from its ancestor or as percentage of ancestor. If desired, repeat step for additional offsets. If desired, add position: relative to ancestor element. –Skip this step and the element will be offset with respect to the body.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Positioning Elements in a Stack When elements overlap, you can choose which element should display on top. To position elements in a stack: –Type z-index: n, where n is a number that indicates the element’s level in the stack of positioned objects.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Determining How to Treat Overflow Overflow property controls the area outside the element’s box. To determine how the browser treats overflow: –Type overflow:. –Type: visible to expand the element box so that its contents fit. This is the default option. hidden to hide any contents that don’t fit in the element box. scroll to always add scroll bars to the element so that the visitor can access the overflow if they so desire. auto to have scroll bars appear only when necessary.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Overflow Each green area with a border is a div that contains two paragraphs. If the content is too tall to fit, it spills outside (like the first div) unless you apply an overflow setting that overrides the default.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Aligning Elements Vertically Align elements vertically in many ways to make them look better than the default alignment. Use vertical-align to align content in table cells. The default setting is middle.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Position Elements Vertically Type vertical-align: Type: –baseline to align element baseline with parent baseline. –middle to align middle of element with middle of parent. –sub to position element as subscript of parent. –super to position element as superscript of parent. –text-top to align top of element with top of parent.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Position Elements Vertically Type: –text-bottom to align bottom of element with bottom of parent. –top to align top of element with top of tallest element on line. –bottom to align bottom of element to bottom of the line box. –Percentage of the element’s line height, positive or negative. –Positive or negative value to shift the element up or down.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Vertically Aligned To the default text baseline To the bottom of the line box

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Changing the Cursor To change the cursor: –Type cursor: –Type pointer for the cursor that usually appears over links, default for an arrow, crosshair, move, wait, help, text, or progress. –Or type auto to get the cursor that usually appears in that situation. –Or type x-resize to get double-sided arrow, where x is the cardinal direction one of the arrows should point—that is, n (north), nw (northwest), e (east), and so on.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Changing the Cursor