Presentation is loading. Please wait.

Presentation is loading. Please wait.

CSS Nael Alian www.w3schools.com. div.ex { width:220px; padding:10px; border:5px solid gray; margin:0px; } The line above is 250px wide. The.

Similar presentations


Presentation on theme: "CSS Nael Alian www.w3schools.com. div.ex { width:220px; padding:10px; border:5px solid gray; margin:0px; } The line above is 250px wide. The."— Presentation transcript:

1 CSS Nael Alian

2

3

4

5

6

7

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.

9

10

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.

12

13

14

15

16

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.

18

19

20

21

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

24

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.

28

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;


Download ppt "CSS Nael Alian www.w3schools.com. div.ex { width:220px; padding:10px; border:5px solid gray; margin:0px; } The line above is 250px wide. The."

Similar presentations


Ads by Google