html - ID not applying styles to table -
i trying apply css styles tables using section tag styles not being applied.
here code below.
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="stylesheet.css"> <link href="https://fonts.googleapis.com/css?family=open+sans|oswald" rel="stylesheet"> </head> <body> <div id="nav"> <a href="assignment1.html">home</a> <a href="table.html">table</a> <a href="http://rrc.ca">red river</a> <a href="http://google.ca">google</a> </div <section id="table1"> <table> <thead> <tr> <th>syntax</th> <th>description</th> <th>example</th> </tr> </thead> <tbody> <tr> <td> p tag</td> <td> p tag stuff</td> <td><p>this paragraph.</p></td> </tr> <tr> <td>h1 tag</td> <td>allows add header webpage</td> <td><h1>this header</h1></td> </tr> <tr> <td>img tag</td> <td>allows add image webpage.</td> <td><img src="images/dogpicture.jpg alt="picture of dog"></td> </tr> <tr> <td>a tag</td> <td>allows add links onto webpage.</td> <td><a href="http://youtube.com">youtube.com</a></td> </tr> <tr> <td>div tag</td> <td>defines section in html code.</td> <td><div>this text inside div</div></td> </tr> <tr> <td>!doctype</td> <td>sets type of document.</td> <td><!doctype html></td> </tr> </tbody> </table> </section> <ul> <li>milk</li> <li>eggs</li> <li>sugar</li> </ul> <ol> <li>milk</li> <li>eggs</li> <li>sugar</li> </ol> </body> </html> and here css
#nav { background-color: black; overflow: hidden; } #nav { float: left; display: block; color: white; text-align: center; padding: 18px 20px; text-decoration: none; font-size: 22px; } #nav a:hover { background-color: white; color: black; } #nav a:visited{ color:green ; } img{ float:left; margin:0px auto; overflow: none; } #table1 table{ border: 2px dotted black; } #table1 table thead tr{ background-color: green; padding: 9px 24px; text-align: center; } #table1 table tbody tr{ background-color: skyblue; text-align: center; } #table1 table tbody tr:nth-child(even){ background-color: darkgreen; } #table1 table tbody tr:hover { background-color: red; } body { margin:0px auto; padding:0px; background:#e6e6e6; float: center; width: 800px; border: 2px solid black; } h1{ text-align: left; float:left; text-shadow: 10px red; font-family: oswald; } #textshadow{ text-shadow: 2px 2px #ff0000; } p{ font-family: open sans; background-color: white; } i sure there missing new html , have not been able find. if helps had styles working before added id , section.
you didn't close nav div properly. closing tag missing.
it should be:
<div id="nav"> <a href="assignment1.html">home</a> <a href="table.html">table</a> <a href="http://rrc.ca">red river</a> <a href="http://google.ca">google</a> </div> <!-- add closing bracket --> here fixed version:
#nav { background-color: black; overflow: hidden; } #nav { float: left; display: block; color: white; text-align: center; padding: 18px 20px; text-decoration: none; font-size: 22px; } #nav a:hover { background-color: white; color: black; } #nav a:visited{ color:green ; } img{ float:left; margin:0px auto; overflow: none; } #table1 table{ border: 2px dotted black; } #table1 table thead tr{ background-color: green; padding: 9px 24px; text-align: center; } #table1 table tbody tr{ background-color: skyblue; text-align: center; }<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="stylesheet.css"> <link href="https://fonts.googleapis.com/css?family=open+sans|oswald" rel="stylesheet"> </head> <body> <div id="nav"> <a href="assignment1.html">home</a> <a href="table.html">table</a> <a href="http://rrc.ca">red river</a> <a href="http://google.ca">google</a> </div> <section id="table1"> <table> <thead> <tr> <th>syntax</th> <th>description</th> <th>example</th> </tr> </thead> <tbody> <tr> <td> p tag</td> <td> p tag stuff</td> <td><p>this paragraph.</p></td> </tr> <tr> <td>h1 tag</td> <td>allows add header webpage</td> <td><h1>this header</h1></td> </tr> <tr> <td>img tag</td> <td>allows add image webpage.</td> <td><img src="images/dogpicture.jpg alt="picture of dog"></td> </tr> <tr> <td>a tag</td> <td>allows add links onto webpage.</td> <td><a href="http://youtube.com">youtube.com</a></td> </tr> <tr> <td>div tag</td> <td>defines section in html code.</td> <td><div>this text inside div</div></td> </tr> <tr> <td>!doctype</td> <td>sets type of document.</td> <td><!doctype html></td> </tr> </tbody> </table> </section> <ul> <li>milk</li> <li>eggs</li> <li>sugar</li> </ul> <ol> <li>milk</li> <li>eggs</li> <li>sugar</li> </ol> </body> </html>
Comments
Post a Comment