I have the following HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Project Web</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
<link href="index_style.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
</html>
and the following CSS (in the index_style.css file):
body {
background-color: black !important;
color: white !important;
}
As you can tell, the "background-color" and "color" properties take place only when they are followed by the !important keyword. Why is this happening?
You have to include your index_style.css link after your bootstrap code.
This is because your styles are amended by whatever bootstrap styles are.
You want to set defaults by first including bootstrap, than update these attributes with your own code.
This is called Precedence in CSS and it's super useful once you understand how it works.
Precedence in CSS
I can see another issue in order of your scripts, your correct order should be:
<!-- put these inside a <head></head> -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="index_style.css" rel="stylesheet">
<!-- put this just before closing </body> tag -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
This is happening because you're loading bootsrap's CSS after your own CSS. When you do, Bootstrap's CSS overrides all your body declerations and only !important causes them to be applied over bootstrap's declerations.
To fix this, load the CSS files in this order:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="index_style.css" rel="stylesheet">
Right order of calling css files is issue here, please use your custom styles after bootstrap styles to fix this and to overwrite styles for other components too, so right order will be as below:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="index_style.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
As others said, your CSS is getting overridden. When including external CSS files add your own CSS file after the external files.
The rule of overriding also applies inside the CSS file.
body {
background-color: black;
color: white !important;
background-color: red;
}
The background color of the following is gonna be red because background-color is declared last.
Whatever is declared last will override whats declared before it. Keep this in mind, as it will save you time in the future and it makes using !important unnecessary
Related
I can't get my css to over ride Bootstrap, or i'm not linking it properly? My .css is in the same file as my .html, I've placed my stylesheet below Bootstrap, still no avail. I've tried creating id's to over ride, still nothing. If I link in a stylesheet from W3Schools though it'll override Bootstrap. Is it just my css file? I know it's not best practice but I also tried using !important in my .css but still nothing. Here's my code:
#charset "UTF-8";
#import url('https://fonts.googleapis.com/css2?family=Bungee+Shade&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap');
.h1 {
font-family: 'Roboto', sans-serif;
color:blue;
}
<!DOCTYPE html>
<html lang="en">
<HTML>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- jQuery library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="photographywebsite.css">
<title>
Photography Website
</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</HTML>
The problem isn't with the linking of your Stylesheet.
Instead you are not referencing the element "h1" but an element with the class of "h1".
Try to change your code to:
h1 {
font-family: 'Roboto', sans-serif;
color:blue;
}
or add the class "h1" to your heading.
For reference on css selectors check out https://www.w3schools.com/cssref/css_selectors.asp
Remove this line from stylesheet reference and try
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"
I have this html code:
<!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="/static/index.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js" crossorigin="anonymous"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<script src="/static/index.js"></script>
</head>
<body>
<div class="container-fluid" id="content">
<div id="suggestion_modal_content" class="modal">
<div>
</div>
Close
</div>
</body>
</html>
now, this is how the modal looks like (after I am adding text):
when I use google dev tools, this is the modal element css values:
when I remove the line max-width:500px, the page looks like I need (full screen).
I tried to add:
.modal{
max-width: none;
}
but it does not work.
What am I doing wrong?
The jQuery Modal CSS is being included after your custom CSS. Because both stylesheets use the same selector (.modal) with the same specificity, the one that comes last in the cascade (in this case, the jQuery Modal CSS) overwrites the other's style.
You should change the order of the stylesheets in the <head> element, and ensure your custom styles always come after any vendor styles. This will allow you to overwrite vendor CSS while using selectors of the same specificity without having to use !important.
<!-- jquery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<!-- bootstrap -->
<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">
<!-- custom -->
<link rel="stylesheet" href="/static/index.css"/>
<script src="/static/index.js"></script>
Screenshot
CSS code
I am beginner , somehow i am unable to remove the margins from h1 element. I Don't know what the problem is.
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="Resources/css/style.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400&display=swap" rel="stylesheet">
<title>Omnifood</title>
</head>
<body>
<header>
<div class="hero-text-box">
<h1>Goodbye junk food. Hello super healthy meals.</h1>
I’m hungry
Show me more
</div>
</header>
</body>
</html>
re-order your link tags as below
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css"> <!-- reset default styling -->
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css"> <!-- add grid support -->
<link rel="stylesheet" type="text/css" href="Resources/css/style.css"> <!-- apply custom styles to your code -->
You can re-order the style.css to be after normalize.css, or you can use !important to force the CSS:
h1 {
margin: 0 !important;
}
Three possible solutions here:
1- In your HTML, include normalize.css first, and then the other CSS files that will override it:
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="Resources/css/style.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
2- You can override style properties from normalize.css by using more precise selectors in your style.css file. For example, assume that your h1 is in a div with class container, you can do:
.container h1 {
margin: 0;
}
As .container h1 is more precise than the h1 selector in normalize.css, the property will be overridden automatically.
3- If neither of these work for you, you can use !important to force the margin property to be overridden, like so:
h1 {
margin: 0 !important;
}
First reorder your resource files and simply use below in your css. Make note of the px part.
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="Resources/css/style.css">
CSS Code
h1 {
margin: 0px;
}
I'd like to use external CSS file but it doesn't work.
I want to change text color of menu to red. (Look at home.html. I want to change color of the text 'intro', 'picture', 'support')
I tried this by write external css file. But it didn't work.
I think class 'item' is also used in semantic-ui, so the 'item' code in external css file doesn't apply because of overlapping.
And then, How can I change text color with using semantic-ui tag simultaneously?
My home.html file and common.css file below.
home.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>title1111</title>
<link rel="stylesheet" href="../css/common.css" type="text/css" >
<link rel="stylesheet" href="../css/home.css" type="text/css" >
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.css">
</head>
<body>
<div class="ui secondary menu">
<a class="item">intro</a>
<a class="item">picture</a>
<a class="item">support</a>
</div>
</div>
<div id="body">
</div>
<div id="footer">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
</body>
common.css
.item{
color: red;
}
p.s answer without using '!important' would be welcomed!
Step 1
Change the order of your imports. When you import the Semantic-Ui stylesheet after your other stylesheets it overrides your rules.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.css">
<link rel="stylesheet" href="../css/home.css" type="text/css" >
<link rel="stylesheet" href="../css/common.css" type="text/css" >
Step 2
Be more specific in your rules, include the hierarchy.
.ui.menu .item {
color: red;
}
I am learning CSS and HTML, and I was creating a template locally, first time I had a separate local CSS file, in this file the body will not be styled but a div was, the second time I tried to include the CSS in the HTML body and not in a separate CSS file and everything worked fine.
First time, the div was styled but the body was not.when a separate CSS file was created:
<!DOCTYPE html>
<html>
<head>
<title>Quote Machine</title>
<script src="scripting.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<div>hello</div>
<style>
</style>
</body>
</html>
<!-- separate CSS file-->
body {
background-color:black;
}
div {
background-color:yellow;
}
Second time, everything was styled as required when the CSS was inside the HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Quote Machine</title>
<script src="scripting.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<div>hello</div>
<style>
body {
background-color:black;
}
div {
background-color:yellow;
}
</style>
</body>
</html>
You need to include your stylesheet after the bootstrap one for it to override the default bootstrap styling.
What's happening in your first example is it's loading your stylesheet, then loading the bootstrap stylesheet.
In the second example, it's loading your stylesheet, then the bootstrap stylesheet, then overriding the bootstrap stylesheet with the styling you've declared in the html.
In addition to M P's answer, in your second example, using elements as child tags of tags is not proper html. They elements belong in the section.
Your style.css is comimg before your bootstrap file . This needs to be the other way around . The reason your style is working internally is because the dom is compiled last and will override any external styles that do not include !important .
Example
4rd Priority
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
3rd Priority
<link href="style.css" rel="stylesheet" type="text/css">
2nd Priority
<head>
<style></style>
</head>
1st Priority
<div style="color:red;"></div>
All work in this order .
Hope this helps