Today’s objectives Site performance Padding, Margins, Borders Practice layout

The Need for Speed (Site Performance) Performance of your site- limiting file sizes and reducing the number of requests to the server. Optimizing images so they are the smallest file size possible without sacrificing Quality Minimize HTML and CSS documents by removing extra character spaces and line returns.

The Need for Speed (Site Performance) Keep JavaScript to a minimum. Add scripts in parallel with other page assets. Don’t load unnecessary assets (such as images, scripts, or JavaScript libraries). Reduce the number of times the browser makes requests of the server (known as HTTP requests). Every trip to the server in the form of an HTTP request takes a few milliseconds, and those milliseconds can really add up. All those little Twitter

Padding, Margins, and Borders CSS

Padding, Margins, and Borders Web browsers treat all html elements as boxes. A tag is a box with content inside (text, graphic or other html element). <div></div> <ul></ul <li></li>

Padding, Margins, and Borders Other Element TOP MARGIN TOP BORDER TOP PADDING HELLO WORLD! LEFT PADDING LEFT BORDER RIGHT PADDING RIGHT BORDER Other Element LEFT MARGIN RIGHT MARGIN Other Element BOTTOM PADDING BOTTOM BORDER BOTTOM MARGIN Other Element

Padding, Margins, and Borders Padding: space between the content and the content’s border. Separates content from its border. TOP BORDER PADDING PADDING HELLO WORLD! PADDING PADDING

Padding, Margins, and Borders Border: line drawn around each edge of the box. Can be four sides, on any single side, or any combination of sides. HELLO WORLD!

Padding, Margins, and Borders Border style values: none: Defines no border dotted: Defines a dotted border dashed: Defines a dashed border solid: Defines a solid border double: Defines two borders. groove: Defines a 3D grooved border. ridge: Defines a 3D ridged border. inset: Defines a 3D inset border. outset: Defines a 3D outset border. HELLO WORLD!

Padding, Margins, and Borders Background-color: fills space inside border, including padding area. Margin separates one element from another.

Margins Other Element TOP MARGIN LEFT MARGIN RIGHT MARGIN HELLO WORLD! Other Element LEFT MARGIN RIGHT MARGIN Other Element BOTTOM MARGIN Other Element

Padding, Margins, and Borders Padding adds space between the content, and the border and keeps the content from appearing cramped inside the box. Margins add white space (gutter) between elements giving the overall look of the page a lighter appearance.

Padding, Margins, and Borders Four properties control padding: padding-top, padding-right, padding-bottom, and padding-left. Four properties control margin edges: margin-top, margin-right, margin-bottom, and margin-left. padding-top : 5px; padding-right : 5px; padding-bottom : 5px; padding-left : 5px; margin-top : 5px; margin-right : 5px; margin-bottom : 5px; margin-left : 5px; padding: 10px 5px 5px 10px; margin: 0 10px 10px 20px;

Padding, Margins, and Borders The order of the four values is: top, right, bottom, and left. TRouBLe - Top, Right, Bottom, and Left. padding: 10px 5px 5px 10px; margin: 0 10px 10px 20px; Shortcut padding-top : 5px; padding-right : 5px; padding-bottom : 5px; padding-left : 5px; margin-top : 5px; margin-right : 5px; margin-bottom : 5px; margin-left : 5px;

Padding, Margins, and Borders When value is 0, don’t need measurement unit (e.g., em, px). Use margin: 0; instead of margin: 0px;. When same value for all four sides, use a single value margin: 5px;

Padding, Margins, and Borders When same value for both top and bottom and another value for left and right, use two values: margin : 0 2em; Sets top and bottom margins to 0; left and right margins to 2ems.

Collapsing margins - two margins actually become one. Bottom margin of unordered list = 30 pixels. Top margin of a following paragraph = 20 pixels. You think: 30px + 20px = 50px spacing BUT browser uses the largest margin (30px) You can use padding to get around this issue.

Collapsing margins - two margins actually become one. Browser does NOT add two vertical margins values but applies larger of the two margins. Item1 Item2 Items 3 – margin bottom 30px 30px not 50px Paragraph – margin top 20 px

Collapsing margins - two margins actually become one. Add box <div> titled SPECIALS and then add a 25px to top and bottom margins to separate box from the heading above and paragraph below. Add a heading <h1> inside SPECIALS and put 20px to top and bottom margins of <h1>. Does this add 20 pixels of space between the <div class=“SPECIALS> and <h1>? NO! Margin appears above the div.

Collapsing margins All margins = 0 <h1>Topic A</h1> <div class=“special"> <h1>Topic B</h1> <p>Students learn precepts of Web design that…</p> </div> <p>Students will be…</p> <DIV class=“SPECIALS”> All margins = 0

Collapsing margins Add 20px top & bottom margin to SPECIALS DIV – <h1>Topic A</h1> <div class=“special"> <h1>Topic B</h1> <p>Students learn precepts of Web design that…</p> </div> <p>Students will be…</p> Add 20px top & bottom margin to SPECIALS DIV – makes sense!

Collapsing margins <h1>Topic A</h1> <div class=“special"> <h1>Topic B</h1> <p>Students learn precepts of Web design that…</p> </div> <p>Students will be…</p> Add 40px top & bottom margin to Topic B heading. CONFUSING! Top margin NOT added above “Topic B” but added above the DIV below Topic A.

Collapsing margins Border added to SPECIALS DIV <h1>Topic A</h1> <div class=“special"> <h1>Topic B</h1> <p>Students learn precepts of Web design that…</p> </div> <p>Students will be…</p> Border added to SPECIALS DIV Top margin IS now added about “Topic B” and NOT added above the DIV.

Collapsing margins All margins = 0; No border SPECIALS DIV: 20px Top|bottom; No Border Special DIV Topic B: 40px Top|bottom; No border Border added to Special DIV H1 Topic B

Collapsing margins Getting around this problem: Add padding <div> SPECIALS or Add border Padding and border sit between the two margins, the margins no longer touch, and the <h1> margin appears within the <div>

Collapsing margins Horizontal (left and right) margins and margins between floating elements don’t collapse in this way. Absolutely and relatively positioned elements don’t collapse either.

Block boxes and inline boxes Although web browsers treat every tag as a kind of box, not all boxes are alike. Block boxes and inline boxes—that correspond to the two types of tags—block-level and inline tags.

Block boxes and inline boxes A block-level tag creates a break before and after it. <p> <h1>,<div>, etc. Inline tags don’t create a break before or after them. <span>, <em>, <strong>

Block and inline elements Top or bottom margins and padding do NOT increased or decrease height of inline elements. Make a in-level element act like an Block element: Must use display : block; em { padding-top: 20px; padding-bottom: 20px; display: block; }

Block and inline elements Make a block-level element act like an inline element: display: inline; ul li { display: inline; } This is useful for setting navigation items

CSS – Clark video