Web Design with HTML&CSS:Lesson 5

IT Lecturer: Ngô Đình Cường

CSS3 Property: border

• The border shorthand property sets all the borderproperties in one declaration.

• The properties that can be set, are (in order):border-width, border-style, and border-color.

CSS3 Property: border

CSS3 Property: border-collapse

• The border-collapse property sets whether the tableborders are collapsed into a single border or detachedas in standard HTML.

CSS3 Property: border-spacing

• The border-spacing property sets the distancebetween the borders of adjacent cells (only for the"separated borders" model).

border-spacing & border-collapse

CSS3 Property: border-style

The border-style property sets the style of an element'sfour borders. This property can have from one to fourvalues.

border-style:dotted solid double dashed;-top border is dotted-right border is solid-bottom border is double-left border is dashed

border-style:dotted solid double;-top border is dotted-right and left borders are solid-bottom border is double

border-style:dotted solid double dashed;-top border is dotted-right border is solid-bottom border is double-left border is dashed

border-style:dotted solid double;-top border is dotted-right and left borders are solid-bottom border is double

border-style:dotted solid;-top and bottom borders are dotted-right and left borders are solid

border-style:dotted;-all four borders are dotted

CSS3 Property: border-style

CSS3 Property: border-style

CSS3 Property: border-radius

• The border-radius property is a shorthand property forsetting the four border-*-radius properties.– border-top-left-radius– border-top-right-radius– border-bottom-right-radius– border-bottom-left-radius

• The border-radius property is a shorthand property forsetting the four border-*-radius properties.– border-top-left-radius– border-top-right-radius– border-bottom-right-radius– border-bottom-left-radius

CSS3 Property: border-radius

CSS3 Property: box-shadow

• The box-shadow property attaches one or moredrop-shadows to the box.

CSS3 Box Model• Margin - Clears an area around the border. The margin does not have a background

color, it is completely transparent• Border - A border that goes around the padding and content. The border is affected

by the background color of the box• Padding - Clears an area around the content. The padding is affected by the

background color of the box• Content - The content of the box, where text and images appear

• Margin - Clears an area around the border. The margin does not have a backgroundcolor, it is completely transparent

• Border - A border that goes around the padding and content. The border is affectedby the background color of the box

• Padding - Clears an area around the content. The padding is affected by thebackground color of the box

• Content - The content of the box, where text and images appear

CSS3 Box Model

CSS3 Property: padding

The padding shorthand property sets all the paddingproperties in one declaration. This property can havefrom one to four values.

padding:10px 5px 15px 20px;-top padding is 10px-right padding is 5px-bottom padding is 15px-left padding is 20px

padding:10px 5px 15px;-top padding is 10px-right and left padding are 5px-bottom padding is 15px

padding:10px 5px 15px 20px;-top padding is 10px-right padding is 5px-bottom padding is 15px-left padding is 20px

padding:10px 5px 15px;-top padding is 10px-right and left padding are 5px-bottom padding is 15px

padding:10px 5px;-top and bottom padding are 10px-right and left padding are 5px

padding:10px;all four paddings are 10px

CSS3 Property: padding

CSS3 Property: display

• The display property defines how a certainHTML element should be displayed.

CSS3 Property: display

CSS3 Property: list-style

• The list-style shorthand property sets all the listproperties in one declaration.

• The properties that can be set, are (in order):list-style-type, list-style-position, list-style-image.

• The list-style shorthand property sets all the listproperties in one declaration.

• The properties that can be set, are (in order):list-style-type, list-style-position, list-style-image.

CSS3 Property: list-style

CSS3 Property: overflow

• The overflow property specifies what happens ifcontent overflows an element's box.

CSS3 Property: overflow

CSS3 Property: text-decoration

• The text-decoration property specifies thedecoration added to text.

CSS3 Property: text-decoration

CSS3 Property: text-shadow

• The text-shadow property is supported in allmajor browsers.

CSS3 Property: text-shadow

CSS3 Property: opacity

• The opacity property is supported in all majorbrowsers.

div{opacity:0.5}

CSS3 Property: opacity

Try It Yourself