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 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

of 62 CENG 449 Lecture 6

of 62 div { border: 15px solid transparent; width: 250px; padding: 10px 20px; border-image: url(border1.jpg) 25 25 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

of 62 div { border: 15px solid transparent; width: 250px; padding: 10px 20px; border-image: url(border2.png) 80 100 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

of 62 See http://border-image.com/ For border-image tag handling CENG 449 Lecture 6

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

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

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

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

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

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; } &nbsp Coffee &nbsp Tea &nbsp Coca Cola CENG 449 Lecture 6

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 &nbsp Tea &nbsp Coca Cola CENG 449 Lecture 6

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 &nbsp Tea &nbsp Coca Cola CENG 449 Lecture 6

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 &nbsp Tea &nbsp Coca Cola CENG 449 Lecture 6

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 &nbsp Tea &nbsp Coca Cola

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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:

Similar presentations

About project

Feedback

Log in

Auth with social network:

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:

Similar presentations

About project

Feedback