How to Give less priority Bootstrap CSS - html

I have tried so many times to give less priority of Bootstrap CSS but I am not able to give it.
I have placed my custom.css below the CDN link of Bootstrap
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
Writing !important to all the CSS Properties would be a very hard task since I am working on a very big project which has many line of CSS Codes

Why dont use !important instead on your custom.css?
The !important rule in CSS is used to add more importance to a
property/value than normal.
In fact, if you use the !important rule, it will override ALL previous
styling rules for that specific property on that element!
https://www.w3schools.com/css/css_important.asp

Related

Does the link tag order make a difference in html? [duplicate]

This question already has answers here:
In which order do CSS stylesheets override?
(11 answers)
Does the order of css stylesheet definitions matter?
(7 answers)
Closed 12 months ago.
I'm trying to use Google Fonts, is there any difference between the 1st case and the 2nd case? For example, whether the font defined in the styles.css file is rendered in the browser late in the second case.
<!-- 1st case -->
<link rel="stylesheet" href="google font url">
<link rel="stylesheet" href="./styles.css">
<!-- 2nd case -->
<link rel="stylesheet" href="./styles.css">
<link rel="stylesheet" href="google font url">
If you wanna use the font you are getting from Google in styles.css you would wanna take the first approche, this one:
<!-- 1st case -->
<link rel="stylesheet" href="google font url">
<link rel="stylesheet" href="./styles.css">
Otherwise, you couldn't, cause CSS is getting interpreted top to bottom. If you wanna see a difference use for example this font in this order:
<link href="https://fonts.googleapis.com/css2?family=Shizuru&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./styles.css">
And in your styles.css, define the following:
*{
font:inherit;
}
html{
font-family: 'Shizuru', cursive;
}
Take a look at the page, and then change the order like so and see the difference:
<link rel="stylesheet" href="./styles.css">
<link href="https://fonts.googleapis.com/css2?family=Shizuru&display=swap" rel="stylesheet">
In general, CSS files are loaded in the order that they appear in the page.
Thus, if your second link somehow conflicts with the first one the later will apply.
Yes it make a difference.
There is a simple rule the later defined overwrite earlier defined styles.
In 1st case you have some control over the final page style because you can modify attributes defined from 3rd party styles.

Overriding bootstrap 4 with CDN link and SCSS

All of the answers I've seen on here with respect to overriding Bootstrap (v4) with SCSS assume Bootstrap (or Bootstrap's CSS file?) is downloaded to a site directory.
I'm importing bootstrap via the CDN link into my layout.html page and have links to all other CSS files after it. The one linked to SCSS is listed dead last. I'd link to override Bootstrap with SCSS this way.
As a quick example, I couldn't change the font used as the title for every page. The section in layout.html is like so:
<head>
<!-- Bootstrap 4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<!-- Fontawesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=IM+Fell+English+SC" rel="stylesheet">
<!-- Additional CSS use of static dir structure require w/ jinja-->
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
</head>
<body>
<div class="container siteTitle h-100">
<div class="row h-100 mx-auto">
<div class="col-md-12" >
<h1 id="siteName">Foo</h1>
<h3 id="siteSubTitle">Bar</h3>
<h6 id="siteTagLine">Baz</h6>
</div>
</div>
</div> <!-- end header container -->
</body>
And the SCSS looks like this at the moment:
$siteFont: 'IM Fell English SC', serif;
#siteName, #siteSubTitle, #siteTagLine {
$font-family-serif: $siteFont !default;
}
Other variations (e.g., ditching the $siteFont variable and placing the font name directly in the CSS rule) have been tried. How do I pull this off?
So the short answer to this is - you can't.
That is, you can't change any SASS variables and still use Bootstrap from the CDN. This is because that version of Bootstrap has already been compiled, so the variables (such as $font-family-base or $enable-responsive-font-sizes) have already been substituted in.
As in the discussion above, if you want to change any SASS variables, you need to compile your own version of Bootstrap.
For simple changes this does of course feel like overkill. So it's not wrong to continue using the CDN version and just override things at the CSS level instead. For more extensive changes, SASS is of course the way to go.

Background color not changing in HTML file

first post here.
I was wondering why the background color is not changing.
I have the bg color property that is not working, apparently.
<body bgcolor="#f0ffff">
This is what I put as the body, and in CSS that's no mention of body whatsoever.
<head>
<title>User Settings</title>
<link rel="stylesheet" type="text/css" href="MainStyles.css">
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- jQueryMobile -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="JS\changeProfile.js"></script>
</head>
This it the heading of the HTML file, I don't know if this could be what's causing it.
Any help? I'm sorry but I'm quite new to this and it's really frustrating... If you need more info I will post more code.
Just gonna mention that there's no mention of background OR color in the HTML.
Open the developer tools in your browser.
Inspect the body element.
Look at the styles that apply to it.
http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css is changing the background colour of the ui-overlay-a class (which is, presumably, added to the body by jQuery Mobile when you load its JS).
That is not working because jquery.mobile-1.4.5.min.css contains a class which overriding backhround-color property.
See below:

Using Bootstrap CSS along with Custom CSS

So I just finished the layout for a website, which uses bootstrap, however I have my own CSS as well. Im getting a couple of modal issues which through the help of another coder have deduced its from calling bootstrap.min.css and my custom .css file. How can I include them both with no issues with the index.html?
<title>Kameechi</title>
<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/css/Rae.css" rel="stylesheet">
<style type="text/css">
That is right. The order implies that your styles would override bootstrap sometimes.
<head>
<title>Kameechi</title>
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/css/Rae.css" rel="stylesheet">
</head>

Is it important to include bootstrap CDN link?

Ive been designing a custom bootstrap theme by making
My own styles main.css and menu.css
by over-riding some bootstrap default styles in the pre-made bootstrap.css
I have a link for the CDN
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
and was wondering if it was important to include this link and what exactly is it doing ?
When the page loads the link it overwrites my styles... Was just curious thanks.
Reviewed the comments and did away with CDN link, only kept local version
<link href="css/bootstrap.css" rel="stylesheet">
<!-- menu styles-->
<link href="css/menu.css" rel="stylesheet">
<!-- overall styles -->
<link href="css/main.css" rel="stylesheet">