Cannot override bootstrap with css
Question
When I add bootstrap to my html document it changes the font-size of my h1 tag to 2.5rem. For some reason I can't override this with my css file. even with the !important attribute.
I made sure my custom stylesheet is loaded after the bootstrap in order on the html page
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="./styles/style.css">
</head>
<body>
<h1 class="logo">TIGERS</h1>
</body>
This style section is in the styles.css file linked above
.logo {
font-size: 3.5em !important;
}
Also: something weird is that when I put the css inline, eg.
<h1 class="logo" style="font-size: 3em">TIGERS</h1>
it works.
any help is appreciated
1 answers
solution1
1 2019-08-10 08:10:49
You would only use the <style> tags when CSS is set inline, not if in an external CSS file.
The style should look like this in style.css :
.logo {
font-size: 3.5em !important;
}
ie no style tags.
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.