For example I'm trying to set body background color in style.css, but code doesn't work.
My link to Bootstrap 5 and custom CSS:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
This code doesn't work:
body {
background-color: black !important;
}
Only Bootstrap class works for me:
<body class = "bg-black">
I was trying to add !important after background-color but it didn't helped. Similar questions haven't solved my problem yet.
It may be due to error:404 which means browser did not find the specified file.
Add the correct path to solve the issue.
For example if you have a folder 'webfiles' and CSS file in one level and html code is inside 'webfiles', you should use ../
The link will be
../style.css
Note that your link to CSS file should be below all Bootstrap style link.
I've been trying to connect html with the CSS.
I've checked that:
The stylesheet path of the css is correct, and it is: css2/css2.css
The <link rel="stylesheet" type="text/css" href="css2/css2.css" /> code is well written and I think it is.
I also tried to try several code editors in case it was a preview problem, I've already tried Atom and brackets and the two do not show that the CSS gets connected.
HTML code :
The html close tag is written too at the bottom.
CSS
here is where the html and CSS file is placed
As you have mentioned in your statement that css files is css/css2.css
so it means you should link css file by this code.
<link rel="stylesheet" type="text/css" href="css/css2.css" />
You added css2 instead of css as folder name
This code will 100% work, Just make sure your HTML file and CSS2 folder need to be on same level (in same folder).
otherwise this CSS file not link to your HTML.
I am VERY new to html and have very limited skills so please bear with me.
I am trying to put an infinite image carousel with links on the front page of my website. But Bootstrap overrides my web styles. I thought I knew where my styles where( I obviously do not) and tried to add them after the carousel but it did not work.
I need the carousel in a specific place on the page.
I tried putting the carousel in a table or adding etc.(pretty much anything I could think of) all in vain. Not sure what to do as I am far from being a master code writer......
any help with this would be greatly appreciated!!!
Thank you in advance!!!
In almost all cases for bootstrap that I am aware of, Bootstrap styles will not override custom styles if you load your own styles after the bootstrap styles.
correct way:
<head>
<link rel="stylesheet" type="text/css" href="link-to-boostrap.css">
<link rel="stylesheet" type="text/css" href="custom-styles.css">
</head>
incorrect way:
<head>
<link rel="stylesheet" type="text/css" href="custom-styles.css">
<link rel="stylesheet" type="text/css" href="link-to-boostrap.css">
</head>
Stylesheets should always be in the header except for very specific circumstances.
If you are putting styles directly on the page in a <style> tag you can move them to the external style sheet following these instuctions: https://www.w3schools.com/css/css_howto.asp
From Code Academy's Make a Website: CSS Styling:
<head>
<link href="font.css" rel="stylesheet">
<link href="main.css" rel="stylesheet">
</head>
"Inside the head element are two link elements. The order of these
link elements matters.
The browser first sees the link for the custom font font.css, and
makes the font available to use in the page.
Next the browser sees the link for main.css. Since the browser now
knows about the custom font, we can use it from main.css to style
elements."
I want to have an intuition/answer as to why does the order matter (link to fonts before the main CSS stylesheet)?
I tried to do it in the other order (link to main stylesheet before link to fonts) and it still worked.
Order matters when you're overriding CSS definitions. This is part of the "cascade" of cascading style sheets. If main.css does not contain any font definitions, then the order doesn't matter.
For example: you were given a default CSS file from a designer, but you need to tweak it a little. Instead of editing the default.css file, you create a custom.css file and change only the handful of definitions that you wanted to tweak. Now the order matters.
<head>
<link href="default.css" rel="stylesheet">
<link href="custom.css" rel="stylesheet">
</head>
If you were to put custom.css first, then your changes would never appear.
Here's an article that gets into various levels of further detail. Warning, it can make your head spin.
Where are all of the places you can put CSS style information on an HTML page?
I know you can place CSS style info in the head of an HTML page, where else is it valid to put CSS elements?
I would like to place my CSS someplace else on the page due to inheritance, e.g:
<style type="text/css">
...
</style>
You can use
<link rel="stylesheet" type="text/css" href="style.css" />
in the head to link to an external stylesheet.
You can also have inline style attributes, such as
Hello
And you can also set the styles in your scripts, e.g. using jQuery (which can go where ever your script is):
$('textBox').css("font-weight", "bold");
However, it is good practise to try to keep all the style information in one standard spot, i.e. the head of the document - it makes it easier for others to maintain your work for you.
Note that if you really want to override a particular attribute, the best way to do it is to use the !important option, such as
color: red !important;
You can use this with any of the methods listed above, and it will override any later settings that conflict.
You can link external stylesheets in the <head> block. You can use more than one stylesheet, and they are loaded in order (in this example, both screen.css and print.css override some elements of style.css.
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
<link rel="stylesheet" href="screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
You can import it from an external stylesheet in the <head> block:
<style>
#import url(style.css)
</style>
Or import it using another method:
<style type="text/css" media="all">
#import "style.css";
</style>
You can put the CSS in the <head> block:
<style type="text/css">
p {font-face:Arial;}
</style>
You can put the CSS inline into the html:
<ul> <li style="list-style:none">Item 1</li></ul>
You can add the CSS to the DOM via javascript:
function addCss(cssCode) {
var styleElement = document.createElement("style");
styleElement.type = "text/css";
if (styleElement.styleSheet) {
styleElement.styleSheet.cssText = cssCode;
} else {
styleElement.appendChild(document.createTextNode(cssCode));
}
document.getElementsByTagName("head")[0].appendChild(styleElement);
}
You can specify it "inline"
<div style="border: 1px solid red" />
Other than that I'm not used to place it anywhere else than separate files / <head>
Off hand:
In other documents. Include CSS files with the LINK element:
<link href="style.css" type="text/css" rel="stylesheet">
Inline with HTML elements:
<h1 style="color: red">Title</h1>
That is usually the only two other places you will put CSS. You can also apply CSS to documents via JavaScript.
As the others have said, non-inline CSS belongs in the head, if you want to write syntactically-correct code. Check the schema if you're not sure.
If you need to generate the CSS during dynamic page creation, you can easily inject it into the DOM, at the bottom of the head, using javascript:
document.getElementsByTags('head')[0].appendChild( -- css here --);
Be forewarned that this will cause your page rendering to slow down and "blink," as the browser must restyle the page when your new CSS is inserted. The same thing will happen if you ignore the schema and place your CSS in the body.
This leads to a poor user experience.
If you're concerned with inheritance in css then you need to remember this general rule.
Inline styles > everything else.
Tag > id
Id > class
Then you have combinations of these rules.
Tag + id (div#main) > id
Parent tag + tag+id > tag+id
Remember these are just general rules but they should take care of 99% of your situations. Placing styles in your scripts are generally a bad idea because it affects perfoance as others have noted and it adds another place for you to update when you need to change the styles.
So, you can specify it inline as an attribute on the element you want to style...
<p style=" font-weight:bold; ">
Or, you could add it in a style block in the page body or header
<style>
p {font-weight:bold;}
</style>
And lastly, you could include it from a linked CSS file by importing...
<style>
#import url(css/bold.css)
</style>
Or by linking it...
<link rel="stylesheet" href="css/bold.css" />
Honestly, linking is, 99.9999% of the time, is the best way to include stylesheets on a page as it neatly separates your CSS from your code, making updates to either much faster.