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

HTML and CSS 8th Edition

Chapter 11: Layout with Styles



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.



Layout with Styles



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.



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.



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.



Basic Page Structure

• Thanks to its solid semantics, it is perfectly usable and intelligible, if a bit spare.



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.



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!



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.



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.



Reset and Normalize Examples

Reset Normalize.css



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.



The Box Model in Context



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.



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.



Inline Versus Block-Level



Inline-Block Versus None



To Specify How Elements Should Display

• In style sheet rule, type display:

• Type block, inline, inline-block, or none.

Geneva Vander Poel

Should block be all boleded?



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.



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.



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).



Setting Height and Width

• The main area remains at 600 pixels wide no matter how wide you make the browser window.



Setting Height and Width

• The sidebar is half the width of the main content.



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.



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.



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.



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.



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;

Geneva Vander Poel

tips note to david



Adding Padding



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.



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.



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.



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.



Border Styles in Firefox



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.



Adjusting Space Between Heading and Image



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.



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.



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.




• See how the floated element is taken out of the document flow and doesn’t affect the parent element’s height at all.




• Clear property can stop the floating effect.

• When applied to an element, it and subsequent elements display after the floated element.



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.



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.



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.



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.



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.



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.



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.



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.



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.



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.



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.



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.



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.



Vertically Aligned

To the default text baseline To the bottom of the line box



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.



Changing the Cursor

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

Documents

easy way

visual quickstart guide

new elements

fixedlayout layout

fixed layout page

styling elements

visibility of elements

div elements