Import css without overlapping other css containers - html

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.

Related

I have tried linking my CSS to my HTML but it doesn't seem to be working

I am trying to learn HTML and CSS. I have tried using my CSS but it doesn't seem to be working properly.
HTML:
<head>
<link rel="stylesheet" type="text/css" src="styling.css">
<script src="../(public)/js/js.js"></script>
<meta charset="utf-8" />
<title>MyPortfolio</title>
</head>
CSS:
body
{
background : (red);
}
<link rel="stylesheet" href="./styling.css">
The folder directory of your CSS file determines how you link it.
Its best practice to link your script at the end of your web page, before the end of the body tag.
Its not "src", its "href".
<link rel="stylesheet" href="style.css">
I suggest you put that script tag on the bottom of your page.
Oh and one last thing, that css is incorrect. Here's what you should use:
body{
background:red; /* Or #ff0000 */
}

Somehow i am unable to override normalize.css?

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 wanted to link the html and css files. but does not work

<html>
<head>
<title> HELLO </title>
<link rel="stylesheet" type="text/css" href="back.css"/>
</head>
<body>
<h1> WELCOME TO THE NEW WORLD </h1>
<p> This is the world of Oppurtunities </p>
</body>
</html>
the css file is below.
body{
background-color: darkslategrey;
color: azure;
}
h1{
color: coral;
}
You question is pretty vague but your path to the CSS is probably off.
Without more info on your dev environment this is my best suggestion.
Change your CSS link to...
<link rel="stylesheet" type="text/css" href="../back.css"/> Notice the ./back.css
This may not be the correct path to the file but your issue lies in your relative path. It all depends on your file structure.
Basic Examples
<link rel="stylesheet" type="text/css" href="/back.css"/>
<link rel="stylesheet" type="text/css" href="../back.css"/>
<link rel="stylesheet" type="text/css" href="/someFolder/back.css"/>
Perhaps putting the css file into a folder might work out.
<link rel="stylesheet" type="text/css" href="styles/back.css"/>
That usually does the trick, let us know ;)!

My HTML isn't linking to my CSS in

I have some simple html and css code. Each file is in the same folder, so it is not a path error. I can't figure out what's going wrong when trying to link the css. When I run the code, the html runs fine, just without any formatting.
Here's my html:
<html>
<head>
<title>Libby Taylor</title>
<link rel="stylesheets" type="text/css" href="libby_css.css">
</head>
<body>
<h1>Libby Taylor</h1>
<div>
<ul class = 'tabs'>
<li>Research</li>
<lI>Writing</li>
<li>Home</li>
</ul>
</div>
</body>
</html>
And here's my css:
body{
color: blue;
text-align: center;
font-size: 40px;
}
You have rel="stylesheets", but it should be rel="stylesheet".
<link rel="stylesheet" type="text/css" href="libby_css.css">
The correct rel value is 'stylesheet', not 'stylesheets', try this, please.
<link rel="stylesheet" type="text/css" href="libby_css.css">
<link rel="stylesheet" type="text/css" href="libby_css.css" />
Not stylesheets, stylesheet. Also make sure that you are using correct HTML syntax, because class = ' tabs ' is pretty weird. It might not cause errors now, but using conventionally correct notation is always a good idea.
You have an error in rel="stylesheets" it should be stylesheet (without s)
The full link would be <link rel="stylesheet" type="text/css" href="libby_css.css">
Just a small typo. Should be rel="stylesheet" not rel="stylesheets":
<link rel="stylesheet" type="text/css" href="libby_css.css">

Bootstrap 3 Ignores custom.css on load

I have this very strange problem.
I'm trying to code with Bootstrap 3. in the <head> I declare links for CSS to be used. Although the HTML completely ignores my third link.
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-theme.css" rel="stylesheet">
<link href="css/custom.css" rel"stylesheet">
</head>
As you can see, the third link refering to css/custom.css is there correctly. But on the website it's being completely ignored.
I have tried coding a simple button using
<button type="button" class="btn btn-primary">Default</button>
And in custom.css I have the .btn class
.btn{
border-radius: 0px;
}
So the button's border should be straight not rounded like it is in bootstrap3. Problem is that my custom.css doesn't want to work and it's just completely ignored.
Can anyone please help me with this?
Thank you.
Patryk.
Add '=' after 'REL'.
Your code:
<link href="css/custom.css" rel"stylesheet">
Should be:
<link href="css/custom.css" rel="stylesheet">
If custom.css is correctly loaded than bootstrap code has a higher precedence, so you might want to use button.btn.btn-primary{border-radius: 0px;} or .btn.btn-primary{border-radius: 0px!important;}
As #Damian says it, the custom.css file is not loaded at all.