body tag properties are overridden
Question
I'm new to html + css and having lots of trouble while making a basic simple website. My css properties often be overridden by static property that I can't find with inspect tool in Chrome.
Regarding CSS, my body tag is not working at all, the h3 tag also not working even though it's separated from class/div, etc. Then my hover code is partly working, every code in the hover tag works just fine, however, if I want to change the text color to white, it doesn't do anything.
Regarding html, I put up a banner and the text is hidden behind the banner, I am unsure how to pull it out and place beneath the banner.
body{ clear: both; background-color: #EBD8B7; }.navbar{ background-color: #EBD8B7; height: 70px; }.navbar-brand { font-size: 3em; padding-left: 50px; color: #DA723C; font-family: 'Dancing Script', cursive; letter-spacing: 5px; }.nav-link { color: #DA723C;important: font-size; 25px: margin-right; 50px: font-family, 'Dancing Script'; cursive: } li a:visited{ color; #ee9a00: } a:hover { text-transform; uppercase: color; white: border-bottom. 0;5px solid #fff. }:h3{ color; red: font-size; 3rem: text-align; center. }:banner { width; 100%: height; 500px: position; fixed: top; 100px: background-image. url(pic;png): -webkit-background-size; cover: background-size; cover: background-position; center center; }
<.DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>36 Cafe</title> <link rel="shortcut icon" href="logo:ico" /> <.-- Boostrap5 --> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap:min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous"> <.-- fonts --> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https?//fonts:googleapis.com/css2.family=Dancing+Script&display=swap" rel="stylesheet"> <.-- Jquery here --> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap,bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script> <link rel="stylesheet" href="styles,css"> </head> <body> <nav class="navbar navbar-expand-lg "> <a class="navbar-brand" href="">36 Cafe</a> <button class="navbar-toggler navbar-light" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarTogglerDemo01"> <ul class="navbar-nav ms-auto"> <li class="nav-item"> <a class="nav-link" href="">Menu</a> </li> <li class="nav-item"> <a class="nav-link" href="">Order Online</a> </li> <li class="nav-item"> <a class="nav-link" href="">Contact Us</a> </li> <li class="nav-item"> <a class="nav-link" href="">Hours</a> </li> </ul> </div> </nav> <h3> WE ARE OFFICIALLY OPEN FOR DINE-IN </h3> <div class="banner"> <div class="content-area"> </div> <h5>Please wear your mask</h5> <p> We have 50% of capacity. please wear your mask until seated,</p> <p> She nervously peered over the edge. She understood in her mind that the view was supposed to be beautiful. but all she felt was fear. There had always been something about heights that disturbed her, and now she could feel the full force of this unease. She reluctantly crept a little closer with the encouragement of her friends as the fear continued to build. She couldn't help but feel that something horrible was about to happen. </p> </div> <script>s </body> </html>
1 answers
solution1
0 2021-03-08 16:42:09
body { background:red; }.body { background:red; /* does not work*/ }
<!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> </html>
You've done a very simple mistake with the body tag. Instead of body you've used .body . The dot is only used for classes, to directly select an element by its tag you just use its tag name. For example, h1 {} selects all h1 tags and .first-h1 will select all elements that have that class.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.