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>
Related
This question already has answers here:
CSS not working in stylesheet
(8 answers)
Closed 6 years ago.
So, I am REALLY noob in CSS, as in I have only used it only 1 or 2 times. When I try to change the body's background color it doesn't change at all.
Here is my HTML code:
<DOCTYPE! html>
<html>
<head>
<link rel = "stylesheet" src = "CSS/main.css">
<title>
TESTTITLE
</title>
</head>
<body>
<h1>TEST</h1>
</body>
</html>
And here is the CSS:
body {
background-color : aliceblue;
}
I know this is pretty simple, but I am really a beginner in the whole front end thing.
You mis-used src.
CSS
<link rel="stylesheet" type="text/css" href="css/main.css">
<style>
.body {
background-color: aliceblue;
}
</style>
This is one way to fix your problem if you include a style tag such as this one just before your head tag.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
So I've tried linking in the head of the html page and using the #import in my css file, but the font I'm trying to use still will not load. I also checked to make sure I'm not running any plugin that could be causing the problem, so I'm really not sure what to do. If anyone could help me solve this that would be wonderful.
<!Doctype html>
<html>
<head>
<link type="text/css" rel="stylsheet" href="anagram.css">
</head>
<body>
<p>Look here!</p>
</body>
</html>
#import url(http://fonts.googleapis.com/css?family=Tangerine);
p {
font-family:'Tangerine';
font-size:48px;
}
You can't place CSS randomly in your HTML file like that. It needs to be in a <style> tag, or an external stylesheet. Move your styling into a <style> tag, which needs to be inside the <head> as well.
<html>
<head>
<title>My website... whatever</title>
<style>
#import url(http://fonts.googleapis.com/css?family=Tangerine);
p { font-family: 'Tangerine'; }
</style>
</head>
<body>
<p>My font is called Tangerine</p>
</body>
</html>
...or, what I find easier when using Google Fonts is to link the font's stylesheet, and then just reference it in my stylesheet. When using Google Fonts, this is the default option.
<html>
<head>
<title>My website... whatever</title>
<link href='http://fonts.googleapis.com/css?family=Tangerine:400,700' rel='stylesheet' type='text/css'>
<style>
p {
font-family: 'Tangerine';
font-size: 100%;
font-weight: 400;
}
h1 {
font-family: 'Tangerine';
font-weight: 700;
font-size: 150%;
}
</style>
</head>
<body>
<h1>I'm thick and large.</h1>
<p>I'm small and thin.</p>
</body>
</html>
If you use this method, make sure to include it before your CSS, like above. Both still need to be inside the <head> section.
The above also shows you how Google can import multiple weights of a font, and how to use them in your stylesheet. In this example, paragraphd use the thinner version of the font, while the <h1> headings use a thicker version of the font, also at a larger size.
You can't just choose whatever weight you want though. Tangerine for example only has 400 and 700, so I've imported both of them. Only import those you are going to use though, as importing too many will slow down the website unnecessarily.
Hope this helps.
This works. Your HTML is just badly formed.
<!Doctype html>
<html>
<head>
<style>
#import url(http://fonts.googleapis.com/css?family=Tangerine);
p {
font-family:'Tangerine';
font-size:48px;
}
</style>
</head>
<body>
<p>Look here!</p>
</body>
</html>
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.
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
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
So I am not entirely sure what exactly is happening here. I am fairly certain that all of my coding is correct, but for some reason it is not displaying properly on the web page. Here is a list of my code, and even a screen shot of what is happening. Google Chrome even shows that it received the code, but it is clearly not displaying.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Add Artec Racer</title>
<link rel="stylesheet" type="text/css" href="./css/main.css">
</head>
<body>
<div class="main">
<h1>Some Information</h1>
</div>
</body>
</html>
CSS:
body
{
color: #000000;
}
body div.main
{
color: #202020;
width: 1000px;
margin: auto;
}
Any help would be fantastic, but here is the picture for what I am seeing. I am running Linux Mint, Apache 2, MySQL, and PHP5. I restarted Apache with no change in result. Here is what I am seeing:
http://i169.photobucket.com/albums/u209/eowdaemon/ChromeIssue.png
The screenshot you posted looks exactly like what your CSS should be producing.
If you're intending to have centered text, try adding text-align: center; to your body rule.
If that's not your intent, it's possible you're confusing color with background-color.
color changes text, while background-color changes the color of the background.
When you go to access your css file, it should be ../ not ./
<link rel="stylesheet" type="text/css" href="./css/main.css">
/*in the href, it should be:*/
<link rel="stylesheet" type="text/css" href="../css/main.css">