Download presentation
Presentation is loading. Please wait.
Published byCornelius Bennett Gibbs Modified over 10 years ago
1
CSS Nael Alian www.w3schools.com
8
div.ex { width:220px; padding:10px; border:5px solid gray; margin:0px; } The line above is 250px wide. The total width of this element is also 250px. Important: This example will not display correctly in IE! However, we will solve that problem in the next example.
11
div.ex { width:220px; padding:10px; border:5px solid gray; margin:0px; } The line above is 250px wide. Now the total width of this element is also 250px. Note: In this example we have added a DOCTYPE declaration (above the html element), so it displays correctly in all browsers.
17
p.one { border-style:solid; border-width:5px; } p.two { border-style:solid; border-width:medium; } p.three { border-style:solid; border-width:1px; } Some text. Note: The "border-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.
22
p { border-style:dotted solid ; } 2 different border styles.
23
The border-style property can have from one to four values. 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
25
p { border:5px solid red; } This is some text in a paragraph.
26
p { border-style:solid; border-top:thick double #ff0000; } This is some text in a paragraph.
27
p {border-style:solid;} p.none {border-bottom-style:none;} p.dotted {border-bottom-style:dotted;} p.dashed {border-bottom-style:dashed;} p.solid {border-bottom-style:solid;} p.double {border-bottom-style:double;} p.groove {border-bottom-style:groove;} p.ridge {border-bottom-style:ridge;} p.inset {border-bottom-style:inset;} p.outset {border-bottom-style:outset;} No bottom border. A dotted bottom border. A dashed bottom border. A solid bottom border. A double bottom border. A groove bottom border. A ridge bottom border. An inset bottom border. An outset bottom border.
29
p { border-style:solid; border-left-width:30px; } Note: The "border-left-width" property does not work if it is used alone. Use the "border-style" property to set the borders first. border-left-width:30px; border-top-width:30px;
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.