+ 3

I need a bit of help here because I can't figure out where I made a mistake. Whatever the mistake is is preventing CSS grids fr

Here is the code: <!DOCTYPE HTML> <html> <head> <!--Use CSS Grids to style this page--> <title>Home Page</title> <div align="center" class="header"><h1>Website Portal</h1></div> <style> .header { background-color: #FF0000; border: 3px solid black; margin: 2px; padding: 2px; /*Remember you can put CSS styling in another file*/ /*This styles the head of the page*/ } .menu_area { height: 300px; width: 250px; background-color: #FF0000; border: 3px solid black; margin: 2px; padding: 2px; grid-area: -webkit-menu; /*This styles all content within the menu grid area, which is left*/ } .topic { text-decoration: underline; font-weight: bold; /*This styles the text at the top of each box*/ } .main_area { height: 300px; width: 250px; background-color: #FF0000; border: 3px solid black; margin: 2px; padding: 2px; grid-area: -webkit-main; } </style> <body class="body"> <article class="menu_area"> <h2 align="center" class="topic">Social Media</h2><br /> <ul align="left" class="ulist"> <li><a href="https://www.facebook.com/" class="link" target="_blank">Facebook</a></li><br /> <li><a href="https://www.instagram.com/" class="link" target="_blank">Instagram</a></li><br /> <li><a href="https://www.pinterest.com/" class="link" target="_blank">Pinterest</a></li><br /> </ul> </article> <article class="main_area"> <h2 align="center" class="topic">Banking</h2><br /> <ul align="left" class="ulist"> <li><a href="https://www.onlinebanking.pnc.com/alservlet/PNCOnlineBankingServletLogin" class="link" target="_blank">PNC</a></li><br /> </ul> </article> </body> <footer class="footer"> </footer> </html>

16th Nov 2019, 3:39 AM
Michael
Michael - avatar
2 Antworten
+ 3
You put your <div> and <h1> tag in <head> which should be placed inside <body> tag. Also you have used some classes which are not present in your <style> tag, if they are not in use then why to create them? Also you wrote in your comment that "you can put CSS in another file". If the rest of your CSS is in another file then you haven't linked your CSS file here. Without linking, how is it supposed to be executed?
16th Nov 2019, 4:07 AM
Chetali Shah
Chetali Shah - avatar
+ 2
Chetali Shah thanks, I cant believe I didnt catch my closing head tag being missing. And the css comment is just a reminder to myself to use external a css file if I get really detailed.
16th Nov 2019, 4:58 AM
Michael
Michael - avatar