The code is as below:
<html>
<head>
<title>test</title>
</head>
<body>
<div><span>shanghai</span><span class="margin"> </span><span>male</span></div>
</body>
</html>
.margin {
width:40px;
height:auto;
}
You can't give it a width because it is an inline element.
This property specifies the content
width of boxes generated by
block-level and replaced elements.
This property does not apply to
non-replaced inline-level elements.
-- CSS 2.1 Width property
You can fix this by making it a block or inline-block element instead:
display:inline-block
However, this may not be supported by some browsers. You can probably achieve the same result with this, however:
margin-left:40px
CSS should go into the head section and should also be wrapped in < style > tags...
Unless you are accessing this value from a stylesheet. You would need to reference this in the head section of your document:
<link rel="stylesheet" type="text/css" title="RSS" href="MyStyleSheet.css">
You should indicate that this is a CSS rule : Ways to include CSS in your page.
put
<style>
.margin {
width:40px;
height:auto;
}
</style>
I think the problem is that the tag is empty. Just put " " between the two tags.
Try changing you class name maybe?
margin is an attribute. I'm not sure if CSS has reserved keywords though.
Related
in the example below the output "hello" is green. How can I make it blue using an inline style on the outer div. I tried <div style="color:blue!important;"> with no joy. I have a use case where the inline style within the div specifically needs to change the color of the text(WYSIWYG) within the div. I don't want to apply the inline style to the p or h1 tags in this instance. Wondering can you reduce the specificity of the p tag even? Thanks
<!DOCTYPE html>
<html>
<head>
<style>
p{color: green;}
</style>
</head>
<body>
<div style="color:blue!important;">
<p>hello</p>
</div>
</body>
</html>
as far as I know, priority of styling exact element is higher that inheritance from it's parent, so you cannot change style of element by it's parent while it has style on it's own
you can style it in style tag like this :
<style>
p{color: green;}
div p{color:blue;}
</style>
in this case priority of blue is higher and you are telling browser that you want to style p tag that is inside of div
Question 1:
Is css possible to make the corner of a img or a div to this?
I don't concern browser support problem, are any css1 or css2 or css3 can make this in easy way?
Question 2:
Can I prevent the css for deepLevel1 which not affect to deepLevel2, without adding any css to deepLevel2
I mean the css will only affect to own level, not deeper level
I only want abc is red, and 123 is still black color.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#deepLevel1
{
color:red;
}
#deepLevel2
{
}
</style>
</head>
<body>
<div id="deepLevel1">
abc<div id="deepLevel2">123</div>
</div>
</body>
</html>
Hey now you can do easily as like this
check to this live demo http://jsfiddle.net/pkZ8G/1/
more info http://www.freshdesignweb.com/useful-example-css3-style.html
Question 2: You cannot prevent the color being applied without overriding it in your deepLevel2 id style.
I run into this, and I am not sure why it is happening...
Taking the html below as an example, as it is, it will display grey areas for the sections as instructed by the CSS. However, when I include <!Doctype html> in the first line it breaks down.. Furthermore, the code below does not work at all with IE9.. why?
Many thanks in advance.
<html>
<head>
<style type="text/css">
.sec_class{
width:50%;
height:15%;
border:1px black solid;
padding:0px;
position:relative;
background-color:grey;
}
</style>
</head>
<body>
<section class = 'sec_class'></section>
<section class = 'sec_class'></section>
<section class = 'sec_class'></section>
</body>
</html>
Your sections have basically no height, because height given in the percentage (height: 15%;) will always be relative to the parent's height. body has zero height in your case, and the 15% of that is still zero.
This should help:
html, body { height: 100%; }
jsFiddle Demo
Be sure to ALWAYS include the doctype.
In order to make IE styles HTML5 tags (section, nav...) you must use a polyfill, because it can't by default. You can use: http://code.google.com/p/html5shiv/
It's just a JS file that you must include on your HTML (using IE conditional comments):
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Also you should not use single quotes:
<section class="sec_class"></section>
Also, of course, if you are setting a porcentual height on your section elements, his parent must have also a defined height. On your case, a 15% height of nothing (body has no height) is… nothing.
I'm learning css and trying to change background-color of all html except one div tag using :not element.
When i put like body:not(.one) it is changing background-color of whole html but not excluding the div mentioned in :not condition. Same problem if i use *:not(.one) Am i doing correct?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
body:not(.one)
{
background-color:blue;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div class="one">
this is first div
</div>
<div >
this is second div
</div>
<p>
this is a paragraph
</p>
</body>
</html>
The background color of your div is transparent. It looks to me like you're setting the body color and then expecting the div to be white or such like.
Given the CSS rule you're using, it's only styling the body tag anyway. You don't need to tell it not to style the div because it wasn't going to anyway.
The not() selector comes in handy when you want to style all divs for example, except ones that have a given class, such as:
div:not(.items){ /* some styles */}
This makes sens because there may be many div that we want to style, except div with the class items.
Your example in the question doesn't make so much sense because you're styling the body of which there's only one.
Your statement actually says:
Style all body tags except any body tag that has the class name one.
The :not selector is a CCS3 feature which not many browser support. Which browser are you testing in?
If all browsers are to be supported you should probably look into a javascript/jquery solution.
Why do the bg and header not overlap?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>My First CSS Webpage</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
</head>
<body>
<img class="bg" src="bg.jpg"/>
<img class="header" src="header.png"/>
</body>
</html>
#bg{
position:absolute;
left:0px;
top:0px;
}
#header{
position:absolute;
top:0px;
left:0px;
}
Use a . instead of a # or change class= to id=
I recommend the latter because I'm assuming that bg and header are unique.
<img id="bg" src="bg.jpg"/>
<img id="header" src="header.png"/>
See here for more info.
The two images in the html have been given classes, while in your css you define styles for ids.
If the element has a class, target it in css using .classname, if it has an id target it using #idname. If the element only occurs once in the html, use id. If there are multiple occurences, use a class.
also, I would suggest for 2 elements which use the same basic properties
to define them as:
#element1, #element2
{
/* css properties */
}
This will save space on your css file, and can add up to quite alot.
In the CSS, a class selector is a name preceded by a full stop (“.”) and an ID selector is a name preceded by a hash character (“#”).
The HTML refers to the CSS by using the attributes id and class.
The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one.
you can not use class in your HTML file and use a hash character (“#”) in your CSS file to style a particular element.