So I'm creating a website and I've got my background set. I also have a title on the index page but for some reason there is a white box around the text. I don't know why it does that but it has to have the color of the background.
HTML
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<title></title>
</head>
<body>
<p class="texts">Under Construction</p>
</body>
</html>
CSS
#font-face {
font-family: 'Font';
src: url(BebasNeue_Light.otf);
}
.texts{
font-family: 'Font';
text-align: center;
font-size: 1000%;
}
html {
background-color: #1abc9c;
}
Here is a jsfiddle demo
It is two things you need to change.
The first is the order of the CSS files in the <head>. You need yours last so that your styles override Bootstrap's styles.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="style.css">
The second is to change the html {...} CSS rule and use body instead. While you can set styles for the <html> tag, it is better to use the <body> tag instead (see here a relevant discussion in SO).
body { background-color: #1abc9c; }
Here is the fiddle link -
https://jsfiddle.net/pravin7007/3szxo5su/
html, body {
background-color: #1abc9c !important;
}
1.) in your html, JQuery should be loaded before bootstrap.js
2.) bootstrap body css is overwritting your body background
Your body tag has background-color: #fff; on it. The body tag is overlaying the html tag which has the desired background colour on it. It looks like the body tag is inheriting the white background from the included bootstrap files and you are then not overriding that in your own styles.
CSS files are processed in order, with any style applied to a selector last in the set of files being added to that element last. So given you load your css file first anything you define here will be overridden by bootstrap if bootstrap defines the property on the same selector.
It's best to load css files based on specificity. As bootstrap is a shared library and your style file is specific to your site, then you should load your css file later that the bootstrap one. This way you can guarantee that what you want to happen will be what the browser does.
You can find out more about selector specificity and load order here. Be very careful with selector specificity, it's easy to get in a mess and you should only use it if absolutely necessary (this link is from an excellent css blog).
You also actually need to apply your new colour to the body tag in your css, which you aren't currently doing. Applying it to the html will make the desired colour appear behind the body colour as the html tag is further up the DOM tree structure.
The reason this appears like it's the element with .texts class, your title, that is misbehaving is because the body tag has automatically shrunk to fit it's content (see this fiddle for simplicity). By adding some extra <br /> tags to extend things down, as I have done here you can see the white area expand to accommodate them. Also, as you can see here, by applying a new colour to the .texts class you can see that it's colour can be changed as it is further down the DOM tree than the body tag.
Related
I'm having an issue setting my text color. I want to set the h1 element to #513271 but it doesn't seem to want to work. Below is my current code and below that are several solutions I've tried that also did not work.
My CSS is saved as stylesheet.css & it is in the same folder as my HTML (which is tributePage.html).
jumbotron h1 {
color: #513271;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link href="\stylesheet.css" rel="stylesheet" />
<html>
<head>
<title>Lizzy McGuire, an Evolution</title>
</head>
<div class="container">
<div class="jumbotron">
<body>
<h1 style="jumbotron-h1" class="text-center">Hey now, hey now.</h1>
</body>
</div>
</div>
</html>
I have also tried the following solutions. I have literally tried all of these by themselves, in various combinations, etc.
Change the CSS file path
C:\Users\Ashle\Coding\Assignments\FCC -- Tribute Page\stylesheet.css
C:\Users\Ashle\Coding\Assignments\FCC -- Tribute Page\
\stylesheet.css (I've used \ through \\\)
stylesheet.css\
Change the external CSS link style (no spaces between side carets, just included them so this would print below)
< link href="stylesheet.css" rel="stylesheet" type="text/css"/ >
< link href="stylesheet.css" rel="stylesheet" >
Change the h1 element name in CSS
h1, #h1, .h1
jumbotron h1, #jumbotron h1, .jumbotron h1
jumbotron-h1, #jumbotron-h1, .jumbotron-h1
purple text, #purple text, .purple text
purple-text, #purple-text, .purple-text
Change the font color with an inline element
< h1 style="color:purple;" class="text-center" >Hey now, hey now.< /h1 > Now, oddly enough, THIS will turn the title purple.
Thanks so much for your help!
For your CSS what you want is
.jumbotron h1 {
color: #513271;
}
Note the period before jumbotron to indicate it's a class
I hope my answer help you:
This is your original code:
<html>
<head>
<title>Lizzy McGuire, an Evolution</title>
</head>
<div class="container">
<div class="jumbotron">
<body>
<h1 style="jumbotron-h1" class="text-center">Hey now, hey now.</h1>
</body>
</div>
</div>
</html>
You cannot have a div element outside the body tag.
You need to include the link to css file in the head tag. Fix your code like this:
<html>
<head>
<title>Lizzy McGuire, an Evolution</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Hey now, hey now.</h1>
</div>
</div>
</body>
</html>
You can see that in your css file you declare a 'jumbotron h1', but in your HTML code jumbotron appear to be a class, and to style a class in external css file you need to a dot (.) before the class name. Your css need to look like this:
.jumbotron h1 {
color: #513271;
}
Hope this help.
Your tag is not properly placed nor your external css tag is missing.
and
the class is not used for styling (except if you used bootstrap).
Here is the correct one:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Lizzy McGuire, an Evolution</title>
<link rel="stylesheet" href="dir/style.css" > <!-- put the external css link here -->
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Hey now, hey now</h1>
</div>
</div>
</body>
</html>
CSS:
jumbotron h1 {
color: #513271;
text-align: center;
}
I recommend you to practice doing external css files instead of inline/internal.
I had a similar problem where my stylesheet was not being reflected in my HTML doc. I finally figured out that my .css file was actually a .css.txt file. "mystyle.css.txt".
In any directory on your computer (I used the one the html/css files were in) click view at the top, then options. Select the view tab, then uncheck the option "Hide extensions for known file types". When this was unchecked i was able to delete the .txt extension from the .css file and it became a true .css file and reflected in my .html doc perfectly.
I'm very new to Bootstraps, trying to use their grid system. However I can't change the body background-color now. My stylesheet is working, cause I can change the background color of the container class. I assume something with Bootstraps is overriding my body background-color, and font as well.
Thanks.
HTML
<!DOCTYPE HTML>
<html lang="en">
<head>
<link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet" href="styles/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="clearfix">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
</body>
</html>
CSS
body{
font-family: Arial;
background-color: #455A64;
}
You should be including your stylesheet after Bootstrap's, like so:
<link rel="stylesheet" href="styles/bootstrap.min.css">
<link rel="stylesheet" href="styles/style.css">
Because bootstrap is included last in your code, its CSS is overriding your styles defined in style.css. You should typically include your stylesheets after all frameworks/libraries you use so you can properly override styles if necessary.
It is not good practice but you can also do
<body style="font-family:Arial; background-color:#455A64">
--------
</body>
you can also use scoped style tags in the body, but it's good practice to keep your CSS separate as it allows for easy editing as well as using the same CSS for multiple elements. Hope this helps!
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I'm trying to reference
/* background color */
body
{
background: FCFFD1;
}
/* h1 color */
h1
{
color: purple;
}
in my HTML document. This is in a seperate .css file as an external style sheet.
I want put it into this:
<body class="body">
<center><h1>ACME PRODUCTS</h1></center>
I'm not sure what I'm doing wrong.
You will first need to create a stylesheet for your CSS and then save it, for e.g. style.css. Once you've done that, add the following code inside the <head></head> tags in your HTML document:
<link rel="stylesheet" type="text/css" href="style.css">
Your final code inside the HTML document should look like this:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body class="body">
<center><h1>ACME PRODUCTS</h1></center>
</body>
</html>
Use this in your head tag: <link rel="stylesheet" type="text/css" href="name.css">
You should check CSS selectors.
In your example code you have class specified for body HTML tag but you never call it in CSS (notice that classes are referenced like ".body"). So class atribute on body tag is not needed here. Also you should use "background-color" and not only "background".
Check this examples.
And finally check this example to learn how to link CSS to your HTML.
I'd edit your code as following:
/* background color */
body
{
background-color: #FCFFD1;
}
/* h1 color */
h1
{
color: purple;
}
and
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
<body>
<center><h1>ACME PRODUCTS</h1></center>
pretty new to Bootstrap and just started to play around with it. But there's one thing (that should be extremely obvious) that I can't get to work. And thats changing the color of the h1 tags in the jumbotron.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Hello WWW</title>
<link rel="stylesheet" href="main.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="jumbotron">
<h1>Progression of Connected Computing</h1>
<p>Learn more about the internet</p>
</div>
</body>
</html>
main.css code:
.jumbotron h1{
color: #fff;
}
.jumbotron p{
color: #fff;
}
The problem is, the p tags are correctly changed and turn white, but for some reason the h1 tags don't? Probably something silly I'm doing but I can't seem to figure out what it is. Thanks!
You must include your custom main.css file after you are including the bootstrap.css one if you want to override your bootstrap styles with your custom main.css styles.
Your custom CSS file should be placed AFTER the bootstrap.min.css, so you are able to override it.
Like this -
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="main.css">
I found an easy way to do that: just wrap h1 blog inside for example span blog; then apply bootstrap for span blog. For example:
<span class="text-success"><h1>Hello World</h1></span>
If you're looking to apply white color specifically (as in your example), then using Bootstrap's color utility class .text-white is an option:
<h1 class="text-white">My Text</h1>
For more info on other color classes, see: https://getbootstrap.com/docs/4.0/utilities/colors/#color
My page is referencing an CSS style sheet with the definition:
html {background-color:#FFFFFF;background-image:url('../images/Background.png');background-repeat:repeat-x; }
How do I overwrite the background-image element at the page level? I need to overwrite the setting for just one page in my application.
Add a class to the html element and then use some inline styling to override the external stylesheet's styling. You could also place the inline style in an external style sheet which would be best practice.
<html class="myHtmlTag">
<head>
<link href="externalStyle.css" rel="stylesheet"/>
<style>
html.myHtmlTag{
background: none !important;
background-image:none !important;
}
</style>
</head>
<body></body>
</html>
If you are targeting only the html tag without any other selectors than you can simply include another html style AFTER the main css. Per CSS specificity - they will only have the value of 1 tag each (no ids, no classes) - so the latter one will style the element.
<html>
<head>
<link rel="stylesheet" href="main.css" />
<!-- anywhere from here down you can include a style to over ride html -->
Here's a quick demo:
html {background-color:#000;background-image:url('http://lxmpro.com/cms/wp-content/uploads/2012/01/site-background-pattern-07.jpeg');background-repeat:repeat-x; }
/* second reference to html tag overrides the first */
html {background-image:url('http://www.noupe.com/wp-content/uploads/2009/10/wallpaper-pattern.jpg');}
Working Demo - http://jsfiddle.net/K68D3/
Use the !important property on the background background-image style like so:
html{background-color:#000000 !important;background-image:url('your/image/path') !important;...}
Can you apply a class to the body tag? IE:
<body class="home">
<body class="articlepage">
Otherwise, you technically could use jQuery, assuming you have access to drop code on the page to do the function but are locked out
<script>$("body").addClass("home");</script>
----or------
<script>$("body").addClass("articlepage");</script>
These allow you to do classes:
body.home {background-image:url(homebg.jpg);}
body.articlepage {background-image:url(articlebg.jpg);}
Basic inline style override of class background color:
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: orange;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2 class="city" style="background-color: tomato;">London</h2>
<p>London is the capital of England.</p>
</body>
</html>