I have this html code:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="/static/index.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js" crossorigin="anonymous"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<script src="/static/index.js"></script>
</head>
<body>
<div class="container-fluid" id="content">
<div id="suggestion_modal_content" class="modal">
<div>
</div>
Close
</div>
</body>
</html>
now, this is how the modal looks like (after I am adding text):
when I use google dev tools, this is the modal element css values:
when I remove the line max-width:500px, the page looks like I need (full screen).
I tried to add:
.modal{
max-width: none;
}
but it does not work.
What am I doing wrong?
The jQuery Modal CSS is being included after your custom CSS. Because both stylesheets use the same selector (.modal) with the same specificity, the one that comes last in the cascade (in this case, the jQuery Modal CSS) overwrites the other's style.
You should change the order of the stylesheets in the <head> element, and ensure your custom styles always come after any vendor styles. This will allow you to overwrite vendor CSS while using selectors of the same specificity without having to use !important.
<!-- jquery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<!-- bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- custom -->
<link rel="stylesheet" href="/static/index.css"/>
<script src="/static/index.js"></script>
Related
I am attempting to select header-logo I tried the following selector suggested by css selector
body > div > div.header-logo
{
background-image: url("logo.png");
}
For the html of the below
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="header">
<div class="header-text">100+ Years Of Combiend Industry Expierence</div>
<div class="header-logo"></div>
</div>
</body>
</html>
But when I view it in chrome it is showing unresolved
you don't need the > sign to track the element you just use space when its element and use . if its sub element
example : body div.header-logo
you can find useful tutorial for css here
div>div.header-logo
{
background-image: url("https://tproger.ru/wp-content/uploads/2015/03/stack-overflow-logo-2.png");
width: 720px;
height: 270px;
}
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="header">
<div class="header-text">100+ Years Of Combiend Industry Expierence</div>
<div class="header-logo"></div>
</div>
</body>
</html>
but, if you wont add a logo, correct do this:
<div class="header-logo">
<img src="logo.png" alt="It's a logo">
</div>
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Appraisal</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
<header>
<h1 class="animated bounceInUp">dummy text</h1>
<hr>
<h4>portfolio</h4>
</header>
<div class="slides">
</div>
<div class="skills">
</div>
<div class="certs">
</div>
<footer>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
I am trying to import Bootstrap from the cdn links provided on the site. I believe I have done everything correctly, however the animations tied to the h1 tag in the header will not animate. Can anyone see anything that is wrong?
The animation you're tying to achieve is with MDBootstrap (Material Design for Bootstrap), and it isn't included with the base Bootstrap files. To use the animation methods you want, include
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.2/css/mdb.min.css">
after your Bootstrap CSS files, and include
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.2/js/mdb.min.js"></script>
after your current scripts at the end of the body content. That should be all you need to achieve the animations!
Dynamically generate animations using jQuery
You can also dynamically generate your animations by using the addClass jQuery method:
<script>$(document).ready(function(){ $("h1").addClass("animated bounceInUp"); });</script>
You forgot to import the CDN for Animate.css. Add this into your <head>.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
Your browser is literally seeing animated bounceInUp as
Huh? What is this "animated" and "bounceInUp"? Oi! Developerrrr!? Hello! What are these? - Your browser.
put this code in script tag
wow = new WOW({
boxClass: 'wow', // default
animateClass: 'animated', // default
offset: 0, // default
mobile: true, // default
live: true // default
})
wow.init();
and add this class="wow" in your html component
The following HTML uses some given style sheets which I like, but in this case the text is pushed too much to the left when I use the class "container". I would just want to change the class "container" so that the text is not pushed so much, while retaining the HTML the same pretty much (including the CSS pointers). Is that possible?
<html>
<head>
I tried the solution below:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.6.js" type="text/javascript"></script>
<script src="jquery.urlshortener.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
</head>
<body>
<style>
.padding0
{
padding: 0px !important;
}
</style>
<div class="container padding0">
This appears too much to the right.
</div>
</body>
</html>
<script src="http://code.jquery.com/jquery-1.6.js" type="text/javascript"></script>
<script src="jquery.urlshortener.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
</head>
<body>
<div class="container">
This appears too much to the right.
</div>
</body>
</html>
still not aligned to the left (on Firefox).
Your container class have padding-left and padding-right 15 px.
You can add a class padding0 to avoid the paddings on this.
.padding0
{
padding: 0px !important;
}
<html>
<head>
<script src="http://code.jquery.com/jquery-1.6.js" type="text/javascript"></script>
<script src="jquery.urlshortener.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
</head>
<body>
<div class="container padding0">
This appears too much to the right. Not anymore :)
</div>
</body>
</html>
Bootstrap is responsive. As such based on various screen widths, it has width properties assigned to the container class.
For width below 970px, it is 750px, above it has 970px.
and since margin is auto for container it will make it center aligned.
If you are not using responsive design, then make following class:
.container{margin: 0 0; padding: 0 0;}
but it is advised not to do that, so you can create the following:
<style>.marPad0{margin: 0 0; padding: 0 0;</style>
<div class="container marPad0">
This appears too much to the right.
</div>
This will solve your issue.
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