Presentation is loading. Please wait.

Presentation is loading. Please wait.

LITTLE BOXES Controlling size of boxes Box model for borders, margin and padding Displaying and hiding boxes.

Similar presentations


Presentation on theme: "LITTLE BOXES Controlling size of boxes Box model for borders, margin and padding Displaying and hiding boxes."— Presentation transcript:

1 LITTLE BOXES Controlling size of boxes Box model for borders, margin and padding Displaying and hiding boxes

2 CSS TREATS EACH HTML ELEMENT AS IF IT LIVES IN ITS OWN BOX  Control the dimensions of your boxes  Create borders around boxes  Set margins and padding for boxes

3 BOX DIMENSIONS  width, height  chapter-13/width-height.html

4 LIMITING WIDTH LIMITING HEIGHT  min-width, max-width  chapter-13/min-width-max-width.html  min-height, max-height  chapter-13/min-height-max-height.html

5 OVERFLOWING CONTENT  Overflow  chapter-13/overflow.html  Hidden  scroll

6

7 BORDER, MARGIN & PADDING

8 WHITE SPACE & VERTICAL MARGIN  The padding and margin properties are very helpful in adding space between various items on the page

9 BORDER WIDTH  border-width  chapter-13/border-width.html  thin medium thick  border-top-width  border-right-width  border-bottom-width  border-left-width

10 BORDER STYLE BORDER COLOR  chapter-13/border-style.html  border-style  Solid dotted dashed double groove  chapter-13/border-color.html  border-top-color  border-right-color  border-bottom-color  border-left-color

11 SHORTHAND PADDING  border  chapter-13/border-shorthand.html  padding  chapter-13/padding.html  padding-top  padding-right  padding-bottom  padding-left

12 CENTERING CONTENT CHANGE INLINE/BLOCK  chapter-13/centering-content.html  Display  chapter-13/display.html  inline  block  inline-block  none

13 HIDING BOXES  Visibility  chapter-13/visibility.html  Hidden  visible

14 CSS3 BORDER IMAGES ~ BOX SHADOWS  border-image  chapter-13/border-image.html  box-shadow  chapter-13/box-shadow.html

15 CSS3: ROUNDER CORNERS  border-radius  chapter-13/border-radius.html  border-top-right-radius  border-bottom-right-radius  border-bottom-left-radius  border-top-left-radius

16 CSS 3: ELLIPTICAL SHAPES  border-radius  chapter-13/elliptical-shapes.html

17 SUMMARY  CSS treats each HTML element as if it has its own box.  You can use CSS to control the dimensions of a box  You can also control the borders, margin and padding for each box with CSS.  It is possible to hide elements using the display and visibility properties  Block-level boxes can be made into inline boxes, and inline boxes made into block-level boxes  Legibility can be improved by controlling the width of boxes containing text and the leading  CSS3 has introduced the ability to create image borders and rounded borders

18 LISTS, TABLES BAND FORMS  Specifying bullet point styles  Adding borders and backgrounds to tables  Changing the appearance of form elements

19 BULLET POINT SYTLES  list-style-type  chapter-14/list-style-type.html  Unordered Lists none disc circle square  Ordered Lists

20 IMAGES FOR BULLETS  list-style-image  chapter-14/list-style-image.html

21 POSITIONING THE MARKER  list-style-position  chapter-14/list-style-position.html  Outside  inside

22 LIST SHORTHAND TABLE PROPERTIES  list-style  chapter-14/list-style.html  width  padding  text-transform etal  chapter-14/table-properties.html

23 BORDER ON EMPTY CELLS  Show  Hide  Inherit  chapter-14/empty-cells.html

24 GAPS BETWEEN CELLS  border-spacing, border-collapse  chapter-14/gaps-between-cells.html  collapse  separate

25 STYLING FORMS

26 STYLING TEXT INPUTS  font-size  Color, background-color, border, border-radius  :focus  :hover  chapter-14/styling-text-inputs.html

27 STYLING SUBMIT BUTTON  Color, text-shadow, border botto, backroundc-color  :hover  chapter-14/styling-submit-buttons.html

28 STYLING FIELDSETS & LEGENDS  Width, color, background color, border, border-radius, padding  chapter-14/styling-fieldsets-and-legends.html

29 ALIGNING FORM CONTROLS: PROBLEM  chapter-14/aligning-form-controls-problem.html  chapter-14/aligning-form-controls-solution.html

30 CURSOR STYLES  Cursor chapter-14/cursor.html  auto  crosshair  default  pointer  move  text  wait  help  url("cursor.gif");

31 WEB DEVELOPER TOOLBAR  1: Outlines  2: Structure  3: CSS styles

32 SUMMARY  CSS properties specifically used to control the appearance of lists, tables, and forms  List markers can be given different appearances using the list-style- type and list-style image properties.  Table cells can have different borders and spacing in different browsers, but there are properties you can use to control them and make them more consistent  Forms are easier to use if the form controls are vertically aligned using CSS.  Forms benefit from styles that make them feel more interactive

33 STYLING FORMS


Download ppt "LITTLE BOXES Controlling size of boxes Box model for borders, margin and padding Displaying and hiding boxes."

Similar presentations


Ads by Google