In my HYML page I have the following CSS Link
myPage.html
<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i"
rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
crossorigin="anonymous">
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.0.10/css/all.css"
integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg"
crossorigin="anonymous">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto"
rel="stylesheet">
Is there a way to regroup this link in one and call it instead of using all this code line?
For marking it as answer.
Look at this page and you'll find anything you need.
Content summary of the link attached
<style type="text/css">
#import url("main.css");
</style>
Where main.css contains:
#import "file1.css";
#import "file2.css";
#import "file3.css";
#import "file4.css";
#import "file5.css";
these are the name of the files.
You can use the #import statement in your main css file.
Not sure if this will work with FontAwesome though.
You also import the font family 'Roboto' multiple times and FontAwesome as well. Is that intended?
Related
My static website has broken css and possibly js over https only. http works fine.
I know the issues of loading mixed content, however most of my style sheets are relative.
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/owl.carousel.min.css">
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<link rel="stylesheet" href="assets/font-awesome/css/fontawesome-all.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:400,500,600">
What could be the issue?
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 have a local /swagger-ui.html that is served from a different package/library. I want modify the style, thus I thought about embedding it into my own index.html and adding some css style overrides to it:
index.html:
<head>
<link rel="stylesheet" href="styles.css">
<link rel="import" href="/swagger-ui.html">
</head>
styles.css (same folder):
.swagger-ui .scheme-container,
.swagger-ui .topbar {
background-color: red !important;
display: none !important;
}
Result: I'm not seeing any changes on the styles. Why?
Try to switch the following lines
<link rel="stylesheet" href="styles.css">
<link rel="import" href="/swagger-ui.html">
to:
<link rel="import" href="/swagger-ui.html">
<link rel="stylesheet" href="styles.css">
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
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