Download presentation
Presentation is loading. Please wait.
Published byAldous Lindsey Modified over 9 years ago
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
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
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.