1 / 33

Little Boxes

Little Boxes. Controlling size of boxes Box model for borders, margin and padding Displaying and hiding boxes. 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

huey
Download Presentation

Little Boxes

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Little Boxes Controlling size of boxes Box model for borders, margin and padding Displaying and hiding boxes

  2. CSS treats each HTMLelement as if it lives in its own box • Control the dimensions of your boxes • Create borders around boxes • Set margins and padding for 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. Border, Margin& Padding

  7. White space & Vertical Margin • The padding and margin properties are very helpful in adding space between various items on the page

  8. Border Width • border-width • chapter-13/border-width.html • thin mediumthick • border-top-width • border-right-width • border-bottom-width • border-left-width

  9. Border STYLE BORDER COLOR • chapter-13/border-style.html • border-style • Solid dotteddashed double groove • chapter-13/border-color.html • border-top-color • border-right-color • border-bottom-color • border-left-color

  10. Shorthand PADDING • border • chapter-13/border-shorthand.html • padding • chapter-13/padding.html • padding-top • padding-right • padding-bottom • padding-left

  11. Centering contentChange inline/block • chapter-13/centering-content.html • Display • chapter-13/display.html • inline • block • inline-block • none

  12. Hiding BOXES • Visibility • chapter-13/visibility.html • Hidden • visible

  13. CSS3 Border images ~ box shadows • border-image • chapter-13/border-image.html • box-shadow • chapter-13/box-shadow.html

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

  15. CSS 3: Elliptical shapes • border-radius • chapter-13/elliptical-shapes.html

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

  17. Lists, Tables Band Forms • Specifying bullet point styles • Adding borders and backgrounds to tables • Changing the appearance of form elements

  18. BULLET POINT SYTLES • list-style-type • chapter-14/list-style-type.html • Unordered Lists none disccirclesquare • Ordered Lists

  19. Images for BULLETS • list-style-image • chapter-14/list-style-image.html

  20. Positioning the marker • list-style-position • chapter-14/list-style-position.html • Outside • inside

  21. List shorthandTable Properties • list-style • chapter-14/list-style.html • width • padding • text-transform etal • chapter-14/table-properties.html

  22. Border on empty cells • Show • Hide • Inherit • chapter-14/empty-cells.html

  23. Gaps between cells • border-spacing, border-collapse • chapter-14/gaps-between-cells.html • collapse • separate

  24. Styling forms

  25. Styling text inputs • font-size • Color, background-color, border, border-radius • :focus • :hover • chapter-14/styling-text-inputs.html

  26. Styling submit button • Color, text-shadow, border botto, backroundc-color • :hover • chapter-14/styling-submit-buttons.html

  27. Styling Fieldsets & legends • Width, color, background color, border, border-radius, padding • chapter-14/styling-fieldsets-and-legends.html

  28. Aligning form controls: problem • chapter-14/aligning-form-controls-problem.html • chapter-14/aligning-form-controls-solution.html

  29. Cursor styles • Cursor chapter-14/cursor.html • auto • crosshair • default • pointer • move • text • wait • help • url("cursor.gif");

  30. Web DeveloperToolbar • 1: Outlines • 2: Structure • 3: CSS styles

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

  32. Styling forms

More Related