My css stylesheet not applying styles in bootstrap project
Question
I am doing a project and have noticed that whenever I add new styles to my css file it doesn't apply any of them. It's very odd.
This is my html section
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Book Landing Page</title>
<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="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="../css/style.css">
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
</head>
As you can see, my stylesheet is below the bootstrap link, so it should normally overwrite it from my understanding.
Here is the CSS I have so far added to my stylesheet
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
* {
box-sizing: border-box;
}
header, section {
overflow-x: hidden;
}
:root {
--Poppins:"Poppins", sans-serif;
--light-black: #2e2c2c;
--bggradient: linear-gradient
(
to bottom,
#dd2476, #ff512f
);
--light-gray: rgba(255,255,255,0.7);
}
header {
background-color: var(--bggradient);
This is my folder structure too
And so far this is what my site looks like: The background colour should have changed in the header section
As well as having the fonts changing too. Can anyone notice anything that I have missed? Just can't figure this out:(
Thank you!
2 answers
solution1
0 2019-11-21 12:16:56
you need to enter your css folder./css/style.css
solution2
0 2019-11-22 07:14:05
As you are using the same class name as it is in the bootstrap framework. In order to make your style override, you need to add !important like this after styles
like this.
header, section {
overflow-x: hidden !important;
}
This will make it override the default bootstrap styles.
Note:Make sure you are referencing your css files correctly
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.