little boxes controlling size of boxes box model for borders, margin and padding displaying and...
TRANSCRIPT
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