Hi I have provided with a project which has many CSS files included. with following structure
<link href="./Premium Nutritional Supplements_files/jquery.owl.carousel.css" rel="stylesheet" type="text/css" media="all">
<link href="./Premium Nutritional Supplements_files/jquery.fancybox.css" rel="stylesheet" type="text/css" media="all">
<link href="./Premium Nutritional Supplements_files/jquery.fancybox-buttons.css" rel="stylesheet" type="text/css" media="all">
<link href="./Premium Nutritional Supplements_files/bootstrap.min.css" rel="stylesheet" type="text/css" media="all">
<link href="./Premium Nutritional Supplements_files/bootstrap-modal.css" rel="stylesheet" type="text/css" media="all">
<link href="./Premium Nutritional Supplements_files/bootstrap-switch.css" rel="stylesheet" type="text/css" media="all">
<link href="./Premium Nutritional Supplements_files/kumi.global.css" rel="stylesheet" type="text/css" media="all">
<link href="./Premium Nutritional Supplements_files/kumi.style.scss.css" rel="stylesheet" type="text/css" media="all">
<link href="./Premium Nutritional Supplements_files/kumi.media.css" rel="stylesheet" type="text/css" media="all">
<link href="./Premium Nutritional Supplements_files/custom.css" rel="stylesheet" type="text/css" media="all">
I have included custom.css at the end to override a property
.post-author-image{
border-radius: 50%;
}
in kumi.global.css which is above custom.css and contains
div, input, select, textarea, span, img, table, td, th, p, a, button, ul, li {
-webkit-border-radius: 0 !important;
-moz-border-radius: 0 !important;
border-radius: 0!important;
}
But I m unable to override border-radius in custom.css. How can I override border-radius from 0 to 50%?
using !important should do it since custom.css loads at last.
.post-author-image{
border-radius: 50% !important;
}
!important gives css a higher priority and since "kumi" css has !important, no matter where you put your custom css, "kumi" css will take effect.
It is generally a bad idea to use !important especially when you are selecting a generic dom element which is in your case with "kumi css" where !important is used for almost everything.
If possible, a better solution will be to remove !important from "Kumi" css
Woah. I hope that you can change kumi.global.css, because that !important tag is put to horrific use. It almost seems like a hard-artillery approach to banning use of border-radius.
Here's the direct solution:
.post-author-image{
border-radius: 50% !important;
}
But I hope you're able to remove that tag from the global file.
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">
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?
Solution:
I asked this question way back with little knowledge in HTML and Javascript. I am sorry for that, anyway the solution here is to not use the same container name to prevent it overlapping other css containers.
Question asked way back ago with little knowledge in JS
How can I import an bootstrap.css file without overwriting other css files?? Is there any way to prevent this? I wish to safe time.
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<link rel="stylesheet" type="text/css" href="style/bootstrap.css" />
<link href="style/shoppingcartstyle.css" rel="stylesheet" type="text/css">
</head>
Thanks in advance!
Change
<link rel="stylesheet" type="text/css" href="style/style.css" />
<link rel="stylesheet" type="text/css" href="style/bootstrap.css" />
to
<link rel="stylesheet" type="text/css" href="style/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="style/style.css" />
Your issue after this lies with any !important declared tags in the bootstrap CSS, however anything you write into style.css will not be over-written by bootstrap otherwise, to ensure - if there's something that's important as you declare it in your style.css, add the !important tag, that overrules any previous declarations made by the bootstrap.css - it's a tag there to be used, great when working with UI frameworks.
Make sure to link to the bootstrap style sheet before every other one.
Should be
<link rel="stylesheet" type="text/css" href="style/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="style/style.css" />
<link href="style/shoppingcartstyle.css" rel="stylesheet" type="text/css">
The rules for CSS rule cascading are complex -rather than trying to paraphrase them badly, I'll simply refer you to the specification:
Using the !important tag is a sign of a not very well put together website, however you can use this to over ride all other style rules.
Example
p{
color:#FFF !important;
}
What I mean, for instance if I have .btn-primary both inside style.css and bootstrap.css, it will overwrite eachother.