Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "Today’s objectives  Site performance  Padding, Margins, Borders  Practice layout."— Presentation transcript:

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

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

3 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

4 PADDING, MARGINS, AND BORDERS CSS

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

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

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

8 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!

9 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!

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

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

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

13 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. margin-top : 5px; margin-right : 5px; margin-bottom : 5px; margin-left : 5px; padding-top : 5px; padding-right : 5px; padding-bottom : 5px; padding-left : 5px; padding: 10px 5px 5px 10px; margin: 0 10px 10px 20px;

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

15 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;

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

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

18 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 Paragraph – margin top 20 px 30px not 50px

19 Collapsing margins - two margins actually become one.  Add box 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 inside SPECIALS and put 20px to top and bottom margins of.  Does this add 20 pixels of space between the and ? NO!  Margin appears above the div.

20 Topic A Topic B Students learn precepts of Web design that… Students will be… Collapsing margins All margins = 0

21 Collapsing margins Topic A Topic B Students learn precepts of Web design that… Students will be… Add 20px top & bottom margin to SPECIALS DIV – makes sense!

22 Collapsing margins Topic A Topic B Students learn precepts of Web design that… Students will be… 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.

23 Collapsing margins Topic A Topic B Students learn precepts of Web design that… Students will be… Border added to SPECIALS DIV Top margin IS now added about “Topic B” and NOT added above the DIV.

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

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

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

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

28 Block boxes and inline boxes  A block-level tag creates a break before and after it.,, etc.  Inline tags don’t create a break before or after them.,,

29 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; }

30 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

31 CSS – CLARK VIDEO


Download ppt "Today’s objectives  Site performance  Padding, Margins, Borders  Practice layout."

Similar presentations


Ads by Google