Presentation is loading. Please wait.

Presentation is loading. Please wait.

Slide 1 of 62 CSS Pseudo-classes The syntax of pseudo- classes: selector:pseudo-class { property:value; } A pseudo-class is used to define a special state.

Similar presentations


Presentation on theme: "Slide 1 of 62 CSS Pseudo-classes The syntax of pseudo- classes: selector:pseudo-class { property:value; } A pseudo-class is used to define a special state."— Presentation transcript:

1 Slide 1 of 62 CSS Pseudo-classes The syntax of pseudo- classes: selector:pseudo-class { property:value; } A pseudo-class is used to define a special state of an element. For example, it can be used to: Style an element when a user mouses over it Style visited and unvisited links differently CENG 449 Lecture 6

2 Slide 2 of 62 /* When mouse is over the paragraph */ p:hover { color: green; } /* When mouse is clicked */ p:active { color: red; } Hello World CENG 449 Lecture 6

3 Slide 3 of 62 Hello World tag is used to display the text as it is written CENG 449 Lecture 6

4 Slide 4 of 62 /* When mouse is over the paragraph */ pre:hover { color: green; font-variant: small caps; } /* When mouse is clicked */ pre:active { color: red; } Hello World CENG 449 Lecture 6

5 Slide 5 of 62 Styling Links Links can be styled with any CSS property (e.g. color, font- family, background, etc.). In addition, links can be styled differently depending on what state they are in. The four links states are: a:link - a normal, unvisited link a:visited - a link the user has visited a:hover - a link when the user mouses over it a:active - a link the moment it is clicked CENG 449 Lecture 6

6 Slide 6 of 62 /* unvisited link */ a:link { color: #FF0000; } /* visited link */ a:visited { color: black; } /* mouse over link */ a:hover { color: #FF00FF; } /* selected link */ a:active { color: #0000FF; } This is a link Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective. Note: a:active MUST come after a:hover in the CSS definition in order to be effective. CENG 449 Lecture 6

7 Slide 7 of 62 CSS Border Properties The CSS border properties allow you to specify the style, size, and color of an element's border. CENG 449 Lecture 6

8 Slide 8 of 62 p.none {border-style: none;} p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.hidden {border-style: hidden;} No border. A dotted border. A dashed border. A solid border. A double border. A groove border. A ridge border. An inset border. An outset border. A hidden border. CENG 449 Lecture 6

9 Slide 9 of 62 a.none {border-style: none;} a.dotted {border-style: dotted;} a.dashed {border-style: dashed;} a.solid {border-style: solid;} a.double {border-style: double;} a.groove {border-style: groove;} a.ridge {border-style: ridge;} a.inset {border-style: inset;} a.outset {border-style: outset;} a.hidden {border-style: hidden;} A link with No border. A link with A dotted border. A link with A dashed border. A link with A solid border. A link with A double border. A link with A groove border. A link with A ridge border. A link with An inset border. A link with An outset border. A link with A hidden border. CENG 449 Lecture 6

10 Slide 10 of 62 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 CENG 449 Lecture 6

11 Slide 11 of 62 Border - Shorthand property As you can see from the examples above, there are many properties to consider when dealing with borders. To shorten the code, it is also possible to specify all the individual border properties in one property. This is called a shorthand property. The border property is a shorthand for the following individual border properties: -border-width -border-style (required) -border-color CENG 449 Lecture 6

12 Slide 12 of 62 p { border: 5px solid red; } This is some text in a paragraph. CENG 449 Lecture 6

13 Slide 13 of 62 All CSS Border Properties PropertyDescription borderSets all the border properties in one declaration border-bottomSets all the bottom border properties in one declaration border-bottom-colorSets the color of the bottom border border-bottom-styleSets the style of the bottom border border-bottom-widthSets the width of the bottom border border-colorSets the color of the four borders border-leftSets all the left border properties in one declaration border-left-colorSets the color of the left border border-left-styleSets the style of the left border border-left-widthSets the width of the left border border-rightSets all the right border properties in one declaration border-right-colorSets the color of the right border border-right-styleSets the style of the right border border-right-widthSets the width of the right border border-styleSets the style of the four borders border-topSets all the top border properties in one declaration border-top-colorSets the color of the top border border-top-styleSets the style of the top border border-top-widthSets the width of the top border border-widthSets the width of the four borders CENG 449 Lecture 6

14 Slide 14 of 62 p { border-style: solid; border-top: thick double #ff0000; } This is some text in a paragraph. CENG 449 Lecture 6

15 Slide 15 of 62 p { border-style: solid; border-left-width: 15px; } Note: The "border- width" property does not work if it is used alone. Use the "border-style" property to set the borders first. CENG 449 Lecture 6

16 Slide 16 of 62 p { border-style: solid; border-left-width: 15px; border-top-style:ridge; border-top-width: 15px; } Note: The "border-width" property does not work if it is used alone. Use the "border-style" property to set the borders first. CENG 449 Lecture 6

17 Slide 17 of 62 p.one { border-style: solid; border-color: blue; } p.two { border-style: solid; border-color: red blue; } p.three { border-style: solid; border-color: red blue green; } p.four { border-style: solid; border-color: red blue green rgb(250,0,255); } One-colored border! Two-colored border! Three-colored border! Four-colored border! Note: The "border-color" property does not work if it is used alone. Use the "border- style" property to set the borders first. CENG 449 Lecture 6

18 Slide 18 of 62 p { border-style: solid; border-right-color: #ff0000; } This is some text in a paragraph. CENG 449 Lecture 6

19 Slide 19 of 62 p { border-bottom: thick dotted #ff0000; } This is some text in a paragraph. CENG 449 Lecture 6

20 Slide 20 of 62 p { border-style: solid; border-bottom: thick dotted #ff0000; } This is some text in a paragraph. CENG 449 Lecture 6

21 Slide 21 of 62 p { border-style: solid; border-left: thick double #ff0000; } This is some text in a paragraph. CENG 449 Lecture 6

22 Slide 22 of 62 p {border-style: solid;} p.none {border-left-style: none;} p.dotted {border-left-style: dotted;} p.dashed {border-left-style: dashed;} p.solid {border-left-style: solid;} p.double {border-left-style: double;} p.groove {border-left-style: groove;} p.ridge {border-left-style: ridge;} p.inset {border-left-style: inset;} p.outset {border-left-style: outset;} No left border. A dotted left border. A dashed left border. A solid left border. A double left border. A groove left border. A ridge left border. An inset left border. An outset left border. CENG 449 Lecture 6

23 Slide 23 of 62 div { border: 2px solid; border-bottom-left-radius: 2em; } The border-bottom-right-radius property allows you to add a rounded border to the bottom-right corner. CENG 449 Lecture 6

24 Slide 24 of 62 div { border: 2px solid; padding: 1px; background: #dddddd; border-bottom-left-radius: 2em; } The border-bottom-right-radius property allows you to add a rounded border to the bottom-right corner. CENG 449 Lecture 6

25 Slide 25 of 62 div { border: 2px solid; padding: 10px; background: #dddddd; border-bottom-left-radius: 2em; } The border-bottom-left-radius property allows you to add a rounded border to the bottom-left corner. CENG 449 Lecture 6

26 Slide 26 of 62 CENG 449 Lecture 6

27 Slide 27 of 62 div { border: 15px solid transparent; width: 250px; padding: 10px 20px; border-image: url(border1.jpg) round; } The border-image property specifies an image to be used as a border. Here is the image used: Note: Internet Explorer 10 and earlier versions do not support the border-image property. CENG 449 Lecture 6

28 Slide 28 of 62 div { border: 15px solid transparent; width: 250px; padding: 10px 20px; border-image: url(border2.png) round; } The border-image property specifies an image to be used as a border. Here is the image used: Note: Internet Explorer 10 and earlier versions do not support the border-image property. CENG 449 Lecture 6

29 Slide 29 of 62 CENG 449 Lecture 6

30 Slide 30 of 62 See For border-image tag handling CENG 449 Lecture 6

31 Slide 31 of 62 List In HTML, there are two types of lists: unordered lists - the list items are marked with bullets ordered lists - the list items are marked with numbers or letters With CSS, lists can be styled further, and images can be used as the list item marker. CENG 449 Lecture 6

32 Slide 32 of 62 ul.a { list-style-type: circle; } ul.b { list-style-type: square; } ol.c { list-style-type: upper-roman; } ol.d { list-style-type: lower-alpha; } Example of unordered lists: Coffee Tea Coca Cola Coffee Tea Coca Cola Example of ordered lists: Coffee Tea Coca Cola Coffee Tea Coca Cola CENG 449 Lecture 6

33 Slide 33 of 62 CENG 449 Lecture 6

34 Slide 34 of 62 ul { list-style-image: url('sqpurple.jpg'); } Coffee Tea Coca Cola CENG 449 Lecture 6

35 Slide 35 of 62 ul { list-style-type: none; padding: 0px; margin: 0px; } ul li { background-image: url(sqpurple.jpg); background-position: 0px 5px; padding-left: 14px; } Coffee Tea Coca Cola CENG 449 Lecture 6

36 Slide 36 of 62 !DOCTYPE html> ul { list-style-type: none; padding: 0px; margin: 0px; } ul li { background-image: url(sqpurple.jpg); background-repeat: no-repeat; background-position: 0px 5px; /* background-position xpos ypos */ padding-left: 14px; } Coffee Tea Coca Cola CENG 449 Lecture 6

37 Slide 37 of 62 ul { list-style-type: none; padding: 0px; margin: 0px; } ul li { background-image: url(sqpurple.jpg); background-repeat: no-repeat; background-position: 0px 4px; /* background-position xpos ypos */ padding-left: 14px; }   Coffee   Tea   Coca Cola CENG 449 Lecture 6

38 Slide 38 of 62 ul { list-style-type: none; padding: 0px; margin: 0px; } ul li { background-image: url(sqpurple.jpg); background-repeat: no-repeat; background-position: 0px 0px; /* background-position xpos ypos */ padding: 0px; border:dashed; } Coffee   Tea   Coca Cola CENG 449 Lecture 6

39 Slide 39 of 62 ul { list-style-type: none; padding: 0px; margin: 0px; border-style:dotted; border-color:red; } ul li { background-image: url(sqpurple.jpg); background-repeat: no-repeat; background-position: 0px 0px; /* background-position xpos ypos */ padding: 0px; margin: 0px; border:dashed; } Coffee   Tea   Coca Cola CENG 449 Lecture 6

40 Slide 40 of 62 body{ padding: 0px; margin: 0px; } ul { list-style-type: none; padding: 0px; margin: 0px; border-style:dotted; border-color:red; } ul li { background-image: url(sqpurple.jpg); background-repeat: no-repeat; background-position: 0px 0px; /* background-position xpos ypos */ padding: 0px; margin: 0px; border:dashed; } Coffee   Tea   Coca Cola CENG 449 Lecture 6

41 Slide 41 of 62 body{ padding: 0px; margin: 10px; } ul { list-style-type: none; padding: 0px; margin: 0px; border-style:dotted; border-color:red; } ul li { background-image: url(sqpurple.jpg); background-repeat: no-repeat; background-position: 0px 0px; /* background-position xpos ypos */ padding: 0px; margin: 0px; border:dashed; } Coffee   Tea   Coca Cola CENG 449 Lecture 6

42 Slide 42 of 62 body{ padding: 30px; margin: 10px; } ul { list-style-type: none; padding: 0px; margin: 0px; border-style:dotted; border-color:red; } ul li { background-image: url(sqpurple.jpg); background-repeat: no-repeat; background-position: 0px 0px; /* background-position xpos ypos */ padding: 0px; margin: 0px; border:dashed; } Coffee   Tea   Coca Cola CENG 449 Lecture 6

43 Slide 43 of 62 body{ padding: 30px; margin: 10px; } ul { list-style-type: none; padding: 10px; margin: 0px; border-style:dotted; border-color:red; } ul li { background-image: url(sqpurple.jpg); background-repeat: no-repeat; background-position: 0px 0px; /* background-position xpos ypos */ padding: 0px; margin: 0px; border:dashed; } Coffee   Tea   Coca Cola CENG 449 Lecture 6

44 Slide 44 of 62 CENG 449 Lecture 6 body{ padding: 30px; margin: 10px; } ul { list-style-type: none; padding: 10px; margin: 0px; border-style:dotted; border-color:red; } ul li { background-image: url(sqpurple.jpg); background-repeat: no-repeat; background-position: 0px 0px; /* background-position xpos ypos */ padding: 10px; margin: 0px; border:dashed; } Coffee   Tea   Coca Cola

45 Slide 45 of 62 Table Borders To specify table borders in CSS, use the border property. The example below specifies a black border for table, th, and td elements: CENG 449 Lecture 6

46 Slide 46 of 62 table{ border: 6px solid black; } th, td { border: 2px solid red; } Firstname Lastname Peter Griffin Lois Griffin CENG 449 Lecture 6

47 Slide 47 of 62 Collapse Borders The border-collapse property sets whether the table borders are collapsed into a single border or separated: CENG 449 Lecture 6

48 Slide 48 of 62 th, td { border: 2px solid red; } Firstname Lastname Peter Griffin Lois Griffin CENG 449 Lecture 6

49 Slide 49 of 62 table { border-collapse: collapse; } th, td { border: 2px solid red; } Firstname Lastname Peter Griffin Lois Griffin CENG 449 Lecture 6

50 Slide 50 of 62 Table Width and Height Width and height of a table is defined by the width and height properties. table { width: percent | pixel; } pixels:Sets the width in pixels (example: width="50") percent: Sets the width in percent of the surrounding element (example: width="50%") CENG 449 Lecture 6

51 Slide 51 of 62 table, td, th { border: 1px solid black;} table { width: 100%;} th { height: 50px;} Firstname Lastname Savings Peter Griffin $100 Lois Griffin $150 CENG 449 Lecture 6

52 Slide 52 of 62 CENG 449 Lecture 6 table, td, th { border: 1px solid black;} table { width: 50%; } th { height: 50px;} Firstname Lastname Savings Peter Griffin $100 Lois Griffin $150

53 Slide 53 of 62.borderStyle{ border: 1px solid black; } table{ width:50%; } Month Savings January $100 February $80 CENG 449 Lecture 6

54 Slide 54 of 62.borderStyle { border: 1px solid black; } table{ width:50; } th, td { border: 1px solid black; } Month Savings January $100 February $80 CENG 449 Lecture 6

55 Slide 55 of 62.borderStyle { border: 1px solid black; } table{ width:50%; } th, td { border: 1px solid black; } Month Savings January $100 February $80 CENG 449 Lecture 6

56 Slide 56 of 62 Table Text Alignment The text in a table is aligned with the text-align and vertical-align properties. The text-align property sets the horizontal alignment, like left, right, or center: CENG 449 Lecture 6

57 Slide 57 of 62 table, td, th { border: 1px solid black; } td { text-align: right; } Firstname Lastname Savings Peter Griffin $100 Lois Griffin $150 CENG 449 Lecture 6

58 Slide 58 of 62 table, td, th { border: 1px solid black;} table{width:100%; }.leftAlign{ text-align: left;}.rightAlign{ text-align: right;}.topAlign{vertical-align: top; }.bottomAlign{vertical-align: bottom; }.centerAlign{vertical-align: center; } td, th {height: 50px;} Firstname Lastname Savings Peter Griffin $100 Lois Griffin $150 CENG 449 Lecture 6

59 Slide 59 of 62 Table Padding To control the space between the border and content in a table, use the padding property on td and th elements: CENG 449 Lecture 6

60 Slide 60 of 62 table, td, th { border: 1px solid black;} td { padding: 15px;} Firstname Lastname Savings Peter Griffin $100 Lois Griffin $150 CENG 449 Lecture 6

61 Slide 61 of 62 Table Color The example below specifies the color of the borders, and the text and background color of th elements: CENG 449 Lecture 6

62 Slide 62 of 62 table, td, th { border: 1px solid green; } th { background-color: green; color: white;} Firstname Lastname Savings Peter Griffin $100 Lois Griffin $150 CENG 449 Lecture 6


Download ppt "Slide 1 of 62 CSS Pseudo-classes The syntax of pseudo- classes: selector:pseudo-class { property:value; } A pseudo-class is used to define a special state."

Similar presentations


Ads by Google