I'm trying to link my external css file but it's not running when I'm linking bootstrap.
It gets linked when I comment out the bootstrap link.
body {
background-color: black;
font-size: 200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>document</title>
<link href="style.css" type="text/css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
it's not working.
</body>
</html>
you should link bootstrap above your own css files
css is cascading so the lower file is more important and can rewrite the upper ones
use !important if replacing your link tags didn't work
Some items require !important to be placed with them in order to over-ride Bootstrap commands.
I can't honestly remember you whether the background or font-size commands on your body element requires it or not but I've used it below as an example.
Add the same thing to any of your custom CSS commands that don't seem to be working.
body {
background-color: black !important;
font-size: 200px !important;
}
Related
This is the question about Google chrome dev tools and CSS. As following codes, though I input "#media (max-width:1000px)" on style sheet of VSCODE, the tools change to Responsive Web Design at 750px(75%). I don't zoom, and write "viewport" on html. Also the scale is 1.0. Please tell me the solution.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div></div>
</body>
</html>
div {
width: max(400px, 50%);
height: 400px;
background-color: coral;
}
#media (max-width: 1000px){
div {
background-color: blue;
}
}
As of my comment, the cause was the zoom of page. By putting back the zoom, I could solve the question.
I am trying to change the width of arrows in a bootstrap carousel. I have worked out that I need to change the width of the carousel.scss. However this is an external library and the css that I have tried (below) doesn't work. I have looked at many examples but I don't know how to incorporate it into my work. I would really appreciate someones help, or even a link to another question that looks like this problem. Thanks
CSS
.modal-body {
padding:15px, 8%;
}
HTML
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Trip Guider</title>
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800'
rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic'
rel='stylesheet' type='text/css'>
<!-- Plugin CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="./css/creative.css" rel="stylesheet">
<link href="./css/style.css" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
style.css is the custom css file
The easiest way to do this is to add a new stylesheet to your project called "CustomStyles.css". Add your override code to this stylesheet.
Provided you call your stylesheet as the last stylesheet on the page then the styles in "CustomStyles.css" should override the default bootstrap behaviour by default. If it still causes an issue it is possible to force your style to take precedence by marking it as !Important (shown below) but this shouldn't be necessary.
When loading your page after making this change be sure to reload the page emptying cache (ctrl f5) to make sure the original style isn't cached in your local browser.
.modal-body {
padding:15px, 8% !Important;
}
---- Result of chat conversation ------
In essence this solution works fine for overriding styles. In this instance though the wrong style was being overridden. The particular problem was resolved by inserting the following into the new stylesheet.
.carousel-control-prev {
left: -50px;
}
.carousel-control-next {
right: -50px;
}
I want to use the meta tag and set the css, the font-size is 30px, but when I typing more code in tag p, the font-size became 38.317px in Chrome browser; please tell me why?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
<title>Document</title>
<style>
p{
word-break: break-all;
font-size: 30px;
}
</style>
</head>
<body>
<p>ssssssss</p>
</body>
</html>
I tried your code and both Chrome and Firefox don't change the font-size.
I'm trying to understand bootstrap, I read document on Scaffolding section of http://getbootstrap.com/css/#less-variables.
Here is my simplified code, and it can NOT work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js" />
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js" />
<![endif]-->
<style type="text/css">
#body-bg: #fff;
#text-color: #black-50;
</style>
</head>
<body>
hi
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" />
</body>
</html>
If you use inline styles you should set body background color in css:
<style type="text/css">
body {
background-color: #fff;
color: #000;
}
</style>
Better solution is to use bootstrap customize on this page or preprocessors like Sass or Less.
The problem is simple, you're trying to redefine LESS variables, you need to do this in your styles.less for example, and from there you can do something like:
#import "bootstrap";
//redefine the bootstrap variables or define your own
#body-bg: #fff;
//#black-50; have to be previously defined since is
//not a bootstrap variable
#text-color: #black-50;
//Now you can do this
body{
background-color: #body-bg; //You can scape this since bootstrap
//will do it for you in _scaffolding.less
color: #black-50;
}
That variables will work in your LESSs files, but when you compile your LESS to CSS will generate just the hex colors.
You're trying to put less variables into css, which is impossible.
Bootstrap converts less files into css code, for example:
less:
#body-bg: #fff;
body{
background: #body-bg;
}
converts to css code:
body{
background: #fff;
}
So if you want to change your bg color You have to change #body-bg: #fff; in bootstrap less file, or overwrite css in your stylesheet.
http://foundation.zurb.com/docs/components/buttons.html
From the doc it is possible to get Custom Color using Mixin. I don't know much about SCSS and trying to get by without using it.
I want Black color buttons instead of the default Blue. It is possible to create some CSS class .black { ... } which will make the button black?
Yes. You can override the css by your own class if you do not know SCSS, though it is recommended to change the SCSS variable value in _variables.scss.
The way for css override is:
create a new css file for example. mystyle.css
And then call the css in the html head after
<!DOCTYPE html>
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Foundation 4</title>
<!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. -->
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/mystyle.css">
<script src="js/vendor/custom.modernizr.js"></script>
</head>
.small black colour button
<body>
Then your css will override the foundation.css class.
add your css class into the button element in html file.
Please see in the above code.
I think that your error might be that it is being overridden and one of the only ways of doing it even though it is frowned upon is to use !important so you would need to use:
.black {
background-color: #000 !important;
}
Also as you have used !important just for the regular one you also need to add it to your hover method so like this:
.black:hover {
background-color: #ccc !important;
}
Edit
Just found out that you don't even need important though if it starts to misbehave then that is what to do
Here is a fiddle:
http://jsfiddle.net/Hive7/p868s/