HomeAssignments Web Design - Technical Design - HTML and CSS Task 1 byIDEAL-TECH May 04, 2021 0 Comments HTML and CSS Task 1 HTML TASK 1 <!DOCTYPE html> <html> <head> <title> Lecture_13_How Combinators Selectors Work in HTML CSS </title> <link rel="stylesheet" type="text/css" href="lec13-taskii.css"> </head> <body> <!--HTML Comment--> <h2> Lecture_13_How_Combinator Works </h2> <h2>Combinator Selector Applying on Table</h2> <table> <tr> <th class="h1">Table Heading 1</th> <th class="h2">Table Heading 2</th> <th class="h3">Table Heading 3</th> </tr> <tr> <td class="d1">Table Data 1</td> <td class="d2">Table Data 2</td> <td class="d3">Table Data 3</td> </tr> <tr class="row3"> <td class="row3c1">Table Data 1</td> <td class="row3c2">Table Data 2</td> <td class="row3c3">Table Data 3</td> </tr> </table> </body> </body> </html> CSS TASK /*Types Of Selectors*/ h2{font-family: arial black; color:red;background-color:skyblue; border:3px solid red;} table, th, td{color:white; border-radius: 15px; font-size: 26px; text-align: center; border:3px solid brown; padding: 20px; } th:first-child {background-color:tomato; color:white; border:3px solid orange; text-align: center;} th:nth-child(2) {background-color:red; color:white; border:3px solid orange; text-align: center;} th:last-child{background-color:black; color:white; border:3px solid orange; text-align: center;} td:nth-child(1) {background-color:blue; color:yellow; border:3px solid orange; text-align: center;} td:nth-child(2) {background-color:navy; color:red; border:3px solid orange; text-align: center;} td:nth-child(3) {background-color:green; color:white; border:3px solid orange; text-align: center;} .row3 td:first-child{background-color:yellow; color:black;} .row3 td:nth-child(2){background-color:brown; color:yellow;} .row3 td:last-child{background-color:purple; color:skyblue;} JavaScript Tags Assignments CSS Html Tasks Share
Post a Comment