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

Little Boxes

Little BoxesControlling size of boxesBox model for borders, margin and paddingDisplaying and hiding boxesCSS treats each HTMLelement as if it lives in its own boxControl the dimensions of your boxesCreate borders around boxesSet margins and padding for boxesSet margins and padding for boxesBox Dimensionswidth, heightchapter-13/width-height.htmlLimiting WIDTH LIMITING HEIGHTmin-width, max-widthchapter-13/min-width-max-width.html

min-height, max-heightchapter-13/min-height-max-height.htmlOverflowing ContentOverflowchapter-13/overflow.htmlHiddenscrollBorder, Margin & Padding

White space & Vertical MarginThe padding and margin properties are very helpful in adding space between various items on the page

Border Widthborder-widthchapter-13/border-width.htmlthin medium thickborder-top-widthborder-right-widthborder-bottom-widthborder-left-widthBorder STYLE BORDER COLORchapter-13/border-style.htmlborder-styleSolid dotted dashed double groove

chapter-13/border-color.htmlborder-top-colorborder-right-colorborder-bottom-colorborder-left-colorShorthand PADDINGborderchapter-13/border-shorthand.html

paddingchapter-13/padding.htmlpadding-toppadding-rightpadding-bottompadding-left

Centering contentChange inline/blockchapter-13/centering-content.html

Displaychapter-13/display.htmlinlineblockinline-blocknone

Hiding BOXESVisibilitychapter-13/visibility.htmlHiddenvisibleCSS3 Border images ~ box shadowsborder-imagechapter-13/border-image.html

box-shadowchapter-13/box-shadow.htmlCSS3: Rounder Cornersborder-radiuschapter-13/border-radius.htmlborder-top-right-radiusborder-bottom-right-radiusborder-bottom-left-radiusborder-top-left-radiusCSS 3: Elliptical shapesborder-radiuschapter-13/elliptical-shapes.htmlSummaryCSS treats each HTML element as if it has its own box.You can use CSS to control the dimensions of a boxYou can also control the borders, margin and padding for each box with CSS.It is possible to hide elements using the display and visibility propertiesBlock-level boxes can be made into inline boxes, and inline boxes made into block-level boxesLegibility can be improved by controlling the width of boxes containing text and the leadingCSS3 has introduced the ability to create image borders and rounded bordersLists, Tables Band FormsSpecifying bullet point stylesAdding borders and backgrounds to tablesChanging the appearance of form elementsBULLET POINT SYTLESlist-style-typechapter-14/list-style-type.htmlUnordered Lists none disc circle squareOrdered ListsImages for BULLETSlist-style-imagechapter-14/list-style-image.htmlPositioning the markerlist-style-positionchapter-14/list-style-position.htmlOutsideinsideList shorthandTable Propertieslist-stylechapter-14/list-style.html

widthpaddingtext-transform etalchapter-14/table-properties.htmlBorder on empty cellsShowHideInheritchapter-14/empty-cells.htmlGaps between cellsborder-spacing, border-collapsechapter-14/gaps-between-cells.htmlcollapseseparateStyling forms

Styling text inputsfont-sizeColor, background-color, border, border-radius:focus:hoverchapter-14/styling-text-inputs.htmlStyling submit buttonColor, text-shadow, border botto, backroundc-color:hoverchapter-14/styling-submit-buttons.htmlStyling Fieldsets & legends Width, color, background color, border, border-radius, paddingchapter-14/styling-fieldsets-and-legends.htmlAligning form controls: problemchapter-14/aligning-form-controls-problem.html

chapter-14/aligning-form-controls-solution.htmlCursor stylesCursor chapter-14/cursor.htmlautocrosshairdefaultpointermovetextwaithelpurl("cursor.gif");Web DeveloperToolbar1: Outlines2: Structure3: CSS stylesSUmmaryCSS properties specifically used to control the appearance of lists, tables, and formsList 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 consistentForms are easier to use if the form controls are vertically aligned using CSS.Forms benefit from styles that make them feel more interactiveStyling forms