I have looked at lots of different answers to similar questions and cant seem to find the answer anywhere. The question is simple, why are my #body styles not being applied. Basically I just want a background color to be applied. Interestingly, none of the styles are actually being passed to from the CSS to the body. The code is simple but not working.
When i use "inspect element" i can see that all my other styles are working fin but nothing is being passed to the body element and I cant figure it out!
I'm sure its something really simple but would appreciate your help on this one. The code is as follows:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<div id="contact_bar">
CSS is:
#body{
background-color:red;
}
#header{
background-color: #3862C6;
height:500px;
}
#contact_bar{
background-color: #020731;
height:150px;
}
It's not #body{... , but body{... (without the "#")
What an idiot.... as soon as I poseted i notice the "#" infront of body....
You should know that in CSS # is used to style id elements, but body is HTML tag and it should be styled as per the CSS given in this answer.
Your HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<div id="contact_bar">
CSS should be:
body{
background-color:red;
}
#header{
background-color: #3862C6;
height:500px;
}
#contact_bar{
background-color: #020731;
height:150px;
}
Related
This question already has answers here:
Background-image in <div> doesn't display
(2 answers)
Background color not showing for a DIV
(4 answers)
Why background color is not applying to DIV container? [duplicate]
(4 answers)
Closed 1 year ago.
I'm having problems with coding this, because I really can't find what the problem is, the background color wouldn't appear.
I used an external css file.
I hope someone answers this, the code is below:
This is the html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="designs.css">
</head>
<body>
<div class="header">
</div>
</body>
</html>
This is the css:
.header {
background-color: #111111;
}
Your code is ok. The problem is that you did not specify width and height of the div.
Try to add this to your css and you will see that it will work.
.header {
background-color:#111111;
width: 100%;
height: 100px;
}
I actually had this problem (before I knew about StackOverflow).
Your code is (mostly) fine.
The problem is the computer doesn't know what to do.
A div is simply a divider. (Pretty sure that div is a abbreviated version of divider).
A divider without anything inside it is empty. Useless.
You need to put something in it to apply color, size, ect.
See the following Stack Snippets®.
As you can see, adding text is a simple way to solve your problem.
.header {
background-color: #111111;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="designs.css">
</head>
<body>
<div class="header">
And look at that. Problem solved.
</div>
</body>
</html>
If you don't want text, add a <br>.
.header {
background-color: #111111;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="designs.css">
</head>
<body>
<div class="header">
<br>
</div>
</body>
</html>
You can even set the size of the div, too!
.header {
height: 200px;
width: 50 px;
background-color: #111111;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="designs.css">
</head>
<body>
<div class="header">
Some text here whose div has been set to 200 by 50 px
</div>
</body>
</html>
I'm trying to add color in the body property of my CSS in Codepen. Have not added anything but the title to the webpage, but it does not changes color regardless of where I put the tag. Tried to place the <body> html tag before <head>, erased <main>, still no change.
<!DOCTYPE html>
<html>
<head>
<title>Project Survey Form</title>
</head>
<body id="body">
<main>
<h1 id="title">Survey Form</h1>
</main>
</body>
</html>
<style>
body {
background-color: blue;
}
</style>
It keeps displaying the white background. Do you know of any workaround for this?
Codepen at CSS section, you don't need style tag
<style>
body {
background-color: blue;
}
</style>
to
body {
background-color: blue;
}
I am using the CSS reset as shown below but however, it is not working.
HTML
<!--Document type declaration-->
<!DOCTYPE html>
<head>
<!--Linking to our CSS file-->
<link rel="stylesheet" href="main.css">
<!--Character encoding of the page-->
<meta charset="utf-8">
<title>Learning</title>
</head>
<body>
<div class="introduction">
<h1>H1 Text</h1>
<h2>H2 Text</h2>
</div>
</body>
</html>
CSS
<style>
/* CSS Reset */
* {
margin: 0;
padding: 0;
}
body {
color: white;
}
.introduction {
background-color: black;
}
</style>
Updated Image
I am starting to doubt it's my machine because the CSS reset works on CodePen.
Thanks for looking into this silly question. If you need more information please don't hesitate to ask me.
Edit:
I have uploaded my code to Codepen and it is working fine. Added new screenshot.
https://codepen.io/anon/pen/xPBVLV
Added my HTML and CSS code.
I found the problem.
in CSS files I do not need to add <style>. I can just write my CSS code into the CSS file.
I am sorry everyone and especially #Quentin for looking into this silly mistake.
I have an img inside the a tag. When hovering on a, I want to change the image url. Is it possible with CSS?
<img src="img/takipet.png" alt="">
To directly answer your question, here’s one CSS-only approach:
HTML:
<div id="the-image-wrapper">
<img id="image-main" src="some/src">
<img id="image-alternate" src="some/other/src">
</div>
CSS:
#image-alternate {display: none;}
#the-image-wrapper:hover #image-main {display: none;}
#the-image-wrapper:hover #image-alternate {display: inline;}
You’re probably better off trying an alternate approach however, such as using a background image instead. Of course, it really depends on the application.
If you’re going the background-image route, you should take a look at using sprites.
You have few ways to do this.
If you prefer to use css you should replace with background-image property
a.some_class{
background-image:url(your_image_url);
background-repeat: no-repeat;
display: block;
height:image_height;
width:image_width;
}
a.some_class:hover{
background-image:url(your_image_url2);
}
Also you can use two images wrapped with Div. And show/hide needed on div hover.
With jQuery
$('a img.your_img_class').mouseover(function () {
$(this).attr("src", "hover_1_src");
})
.mouseout(function () {
$(this).attr("src", "old_src");
});
If it's a background image, you can do this:
.element:hover{
background-image:url(bg.jpg);
}
or even
.element:hover a{
background-image:url(bg.jpg);
}
If the a tag is within something else.
Change src="" attribute is can't change by Using CSS . Just Change with Javascript Or Jquery.
you can Just Control Styles By css .
Create Div Element And set background-image for it.
HTML Css:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#MyDiv{
width:100%;
height:100%;
background-image: url('Image.jpg');
}
#MyDiv:hover{
background-image: url('NewImage.jpg');
}
</style>
</head>
<body>
<div id="MyDiv" > </div>
</body>
</html>
Html Javascript:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="http://codeorigin.jquery.com/jquery-wp-content/themes/jquery/images/logo-jquery.png" onmouseover="this.src='http://www.google.com/images/srpr/logo11w.png';" >
</body>
</html>
I have been doing web design for a little over a year now, but still have strange things happen on the front end sometimes. I am creating a simple template for personal use using the following code:
<!DOCTYPE html>
<html>
<head>
<title>Matt's Template</title>
<!-- Stylesheets -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css" type="text/css" />
<link rel="stylesheet" href="CSS/general.css" type="text/css" />
</head>
<body>
<section class="container">
<h1>Matt's Template</h1>
</section>
<!-- Javascript Libraries -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js" ></script>
<!-- My Javscript -->
</body>
</html>
If I view this code in my Chrome browser, it appears that the body is shifted about 15px down from the html tag. However, my css explicitly tells the html and body tags to have no padding or margin. So why is there this space?? This has happened before and I am not really sure how I solved it. There must be some obvious answer. Here is my css too.
html, body {
height:100%;
width:100%;
padding:0;
margin:0;
}
.container {
height:100%;
width:960px;
position:relative;
margin:0 auto;
padding:0;
background:#E0E0E0;
}
The problem is that your <h1> still has its default margin, you have only taken off the default <body> margin of 8px, but not the other elements which have default UA styles. You should look into using a reset so you can 'start from scratch' for each element.
http://jsfiddle.net/qfSZ5/3/
Try adding
h1 {margin:0}
or
h1 {display:inline-block}
if you want to keep its margins inside the parent.
jsfiddle
That's because h1 has a default margin assigned by the browser; that could be kinda messy.
Some people just do this in order to prevent default margins and padding:
* {
margin: 0;
padding: 0;
}
And that literally means:
"Hi browser, please nullify all the defaults margins and padding on all the existing elements. Thanks!"