CSS body author style doesn't apply, can't override user agent stylesheet
Question
I set the font-size in the HTML root element, to use rem units in the project. After that, I couldn't apply any styles on the body element. The inspector shows that it's using the user agent default stylesheet. The other styles do apply, but the body element is completely broken.
It's the same in Chrome, Firefox and Safari. Also the font-family, color, padding etc. are all broken.
If needed you can download the project via this link .
If I comment out the * and HTML selectors, the padding, font-family is back, but the rems are incorrect because of the default 16px font-size.
* { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 10px; } body { font-family: "Lato", sans-serif; font-weight: 400; line-height: 1.7; color: #777; padding: 30px; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet"> <link rel="stylesheet" href="./css/style.css"> <link rel="shortcut icon" type="image/png" href="img/favicon.png"> <title>Natours</title> </head> <body> <header class="header"> <div class="logo-container"> <img src="./img/logo-white.png" class="logo" alt="natours logo"> </div> <div class="heading-container"> <h1 class="heading-primary"> <span class="heading-primary-main">Outdoors</span> <span class="heading-primary-sub">is where life happens</span> </h1> <a href="#" class="btn btn-white btn-animated">Discover our tours</a> </div> </header> </body> </html>
How can i set correctly the root font-size to use rems? What causes this problem?
1 answers
solution1
0 ACCPTED 2019-05-13 19:35:06
This is very strange. I copied, opened, closed the file like ten times. Then deleted (not commented) out the html selector and just rewrote it again. This fixed the issue. I have never seen anything like this before.
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.