I have two elements, I want to apply same background style, but different font style to them, how to write the style statement in the header part without having to write duplicate statement?
It doesn't get simpler than:
#element1, #element2 {
background: red
}
#element1 {
font: 20px sans-serif
}
#element2 {
font: 24px serif
}
You should read up on selector grouping.
You can apply more than one class to an element...
HTML:
<div class="common div1">My Stuff</div>
<div class="common div2">My Stuff 2</div>
CSS:
.common {
background-color:blue;
background-image:url("bill.jpg");
background-repeat:no-repeat;
}
.div1 {
font-family:Calibri;
}
.div2 {
font-family:Arial;
}
Give it a class + an ID
<style type="text/css">
div.common { background:blabla; }
div #type1 { font-style:blabla; }
div #type2 { font-style:otherblabla; }
</style>
<div class="common" id="type1">asd</div>
<div class="common" id="type2">asd</div>
Or use the method posted by the other guy, 2 classes
Related
I am trying to create a div, that is created by adding multiple classes.
For a particulair reason, the width, height and size will not set. Instead they are the auto-size. When I add everything to one class, the size and such work, but as stated earlier when seperated, they will not do anything.
How I created the multiclass div (tried shuffeling the classes aswell)
<div class="box pos1 1x1">
<p class="verdana"> ... </p>
</div>
Inside the CSS file:
.pos1{
display: inline; float:left;
}
.1x1 {
width:13.5vw;
height:13.5vw;
}
.1x2 {
width:13.5vw;
height:17.5vw;
}
.2x2 {
width:17.5vw;
height:17.5vw;
}
div.box{
background-color:#000000; color: white;
margin-left:0.25vw; margin-top:0px; margin-right:0.25vw; margin-bottom:0px;
border: white solid 2px;
}
Also creating one big class is not an option.
Thank you.
Class names starting with numbers are not valid! Your class name have to start with _, - or a letter (a-z)!
The pattern to validate a class name: -?[_a-zA-Z]+[_a-zA-Z0-9-]*
https://www.w3.org/TR/CSS21/grammar.html#scanner
See the following solution:
.pos1{
display:inline;
float:left;
}
.size1x1 {
width:13.5vw;
height:13.5vw;
}
.size1x2 {
width:13.5vw;
height:17.5vw;
}
.size2x2 {
width:17.5vw;
height:17.5vw;
}
div.box{
background-color:#000;
color:#fff;
margin:0 0.25vw;
border:2px solid #fff;
}
<div class="box pos1 size1x1">
<p class="verdana"> ... </p>
</div>
As other mentioned class name cannot start with numbers, and in pos1 you make the div to display as inline. Inline element does not have height, should use inline-block.
I want to change the colours of divs separately but don't want to use the following css.
The syntax I am using is as follows:
HTML:
<div id="wrapper"><div><div><div><div><div><div><div>
</div></div></div></div></div></div></div></div>
CSS:
div>div>div {background-color:yellow;}
div>div>div>div {background-color:green;}
div>div>div>div>div {background-color:indigo;}
div>div>div>div>div>div {background-color:violet;}
div>div>div>div>div>div>div {background-color:chocolate;}
div>div>div>div>div>div>div>div {background-color:brown;}
Your best/only easy solution is using Classes or Id's and attaching them to your CSS sheet (as per Daniel's answer).
HTML:
<div id="wrapper" class="ClassDiv1">
<div class="ClassDiv2">
<div class="ClassDiv3">
<div class="ClassDiv4">
<div class="ClassDiv5">
<div class="ClassDiv6">
<div class="ClassDiv7">
<div class="ClassDiv8">
CSS:
.ClassDiv1{background-color:yellow;}
.ClassDiv2{background-color:green;}
.ClassDiv3{background-color:indigo;}
etc.
If you want 1 color for 2 div tags you can just do this in your style:
.ClassDiv1 .ClassDiv2{background-color:brown;}
But seriously, rather go to W3Schools and learn a bit on CSS as it will help you a LOT!
Use a naming convention.
.innerDiv1{
background-color:yellow;
}
.innerDiv2{
background-color:green;
}
.innerDiv3{
background-color:indigo;
}
.innerDiv4{
background-color:violet;
}
.innerDiv5{
background-color:chocolate;
}
.innerDiv6{
background-color:brown;
}
or you can use a pre-processor like LESS and nested inside each other
.innerDiv{
background-color:yellow;
div{
background-color:green;
div{
background-color:indigo;
div{
background-color:violet;
div{
background-color:chocolate;
div{
background-color:brown;
}
}
}
}
}
}
I would go with classes:
.bg-yellow { background-color: yellow; }
...
.bg-brown { background-color: brown; }
HTML:
<div id="wrapper">
<div class="bg-yellow"><div><div><div><div><div><div class="bg-brown">
</div></div></div></div></div></div></div>
</div>
Using this solution makes it easier to identify the color of the element when inspecting the HTML.
I know many inheritance questions have been asked, but each case is unique and I'm having trouble with this one.
I have some h2 elements that need to have unique styling to them but they keep inheriting properties from previously defined h2 elements.
I've tried giving them a unique class, I've tried defining css properties through JS and Jquery, nothing's working.
Here's an example of what I'm talking about:
<div class="parent">
<h2>Original H2</h2>
<div class="child">
<h2>New H2</h2>
</div>
</div>
.parent h2 {
font-weight:bold;
color:red;
}
.child h2 {
font-weight:normal;
color:green;
}
Even with giving the child's h2 tag a unique class I get nowhere.
<div class="parent">
<h2>Original H2</h2>
<div class="child">
<h2 class="newh2class">New H2</h2>
</div>
</div>
.parent h2 {
font-weight:bold;
color:red;
}
.child h2.newh2class {
font-weight:normal;
color:green;
}
<!--or-->
h2.newh2class {
font-weight:normal;
color:green;
}
Can anyone help out?
you need to use !important value to make it so.
h2.newh2class {
font-weight:normal;
color:green !important;
}
You css should look like this
.parent > h2 {
font-weight:bold;
color:red;
}
.child h2 {
font-weight:normal;
color:green;
}
check it here http://jsfiddle.net/yNFUd/
Your issue is CSS because of how your are referencing the element. Read about stacking and precedence in CSS
http://jsfiddle.net/feitla/SmUGm/2/
.parent > h2 {
font-weight:bold;
color:red;
}
.parent .child h2 {
color:blue;
}
.child > h2 {
font-weight:normal;
color:green;
}
Changing the order and how they are called will affect how they are inherited and calculated.
I get a little lost on css stylesheet syntax. My dilemma is that I have four <div> tags with ROUGHLY the same style, except the colors are different or one may float: left but another tag might not have that.
So I was thinking I could add id to all of these so that I can move these style statements into the stylesheet.
How would I address each individual id in the stylesheet? I'm thinking something like div#id or something. Lets assume basic div is already unavailable, but I want some abstract stylesheet tag that at least contains display:block and font-size:11px and then a more specific stylesheet tag to address each <div> tag by its id or class or name.
<div style="display:block; color:steelblue; float:left; font-size:11px;">Open Requests </div>
<div id="openNumber" style="display:block; color:steelblue; font-size:11px; clear:right;">13</div>
<div style="display:block; color:green; float:left; font-size:11px;">Completed Requests </div>
<div id="completeNumber" style="display:block; color:green; float:left; font-size:11px;">13</div>
I get a little turned around on the syntax for different selector types
Thanks for any insight
You could try the following:
css:
.floatLeft { float: left; }
.clearRight { clear: right; }
.open { color: steelblue; font-size: 11px; }
.complete { color: green; font-size: 11px; }
html:
<div id="openRequests" class="open floatLeft">Open Requests </div>
<div id="openNumber" class="open clearRight">13</div>
<div id="completeRequests" class="complete floatLeft">Completed Requests </div>
<div id="completeNumber" class="complete floatLeft">13</div>
A <div> is already a block-level element, so you don't need to specify display: block on it.
You can create a class .numbers(or whatever best describes your grouping of divs) to hold the shared styles, and add that class to the divs in question. Then, target individual divs with their id's for tweaking colors.
Something like this might help:
CSS
.numbers {
/* shared styles */
}
#one {
/* unique styles */
}
#two {
/* unique styles */
}
#three {
/* unique styles */
}
Organizing your styles, in a semantic and meaningful way, can be challenging, but the time you save maintaining your code is well worth it. For a much better summary of how to do this, you can read this article.
I would use multiple classes to group silimar styles together. Try to extract semantic meaning:
Something like this:
CSS:
.block11 { display:block; font-size:11px; }
.left { float:left; }
.clear-right { clear:right; }
.steelblue { color: steelblue; }
.green { color: green; }
HTML:
<div class="block11 steelblue left">Open Requests </div>
<div class="block11 steelblue clear-right" id="openNumber">13</div>
<div class="block11 green left">Completed Requests </div>
<div class="block11 green left" id="completeNumber">13</div>
since the id's have to be unique, you could add an ID to those and then use:
#openRegistration{display:block; color:steelblue; float:left; font-size:11px;}
#openNumber{display:block; color:steelblue; font-size:11px; clear:right;}
#completedRequests{display:block; color:green; float:left; font-size:11px;}
#completeNumber{display:block; color:green; float:left; font-size:11px;}
NOW, given the above, we can simplify it as:
#openRegistration,#openNumber,#completedRequests,#completeNumber{display:block;font-size:11px;}
#openRegistration{ color:steelblue; float:left; }
#openNumber{color:steelblue; clear:right;}
#completedRequests{ color:green; float:left;}
#completeNumber{ color:green; float:left; }
or IF you want, give them a class and use that:
.myClass{display:block;font-size:11px;}
#openRegistration{ color:steelblue; float:left; }
#openNumber{color:steelblue; clear:right;}
#completedRequests{ color:green; float:left;}
#completeNumber{ color:green; float:left; }
EDIT:
or IF you want, give them more than one class and use that:
.myClass{display:block;font-size:11px;}
.complete{ color:green;}
.open{ color:steelblue;}
#openRegistration{ float:left;}
#openNumber{clear:right;}
#completedRequests{ float:left;}
#completeNumber{ float:left; }
<div class="myClass complete" ...
You can define some CSS classes and assign them to your elements according to what you need. Just an example:
CSS:
.myDiv {
display: block;
font-size: 11px;
}
.left { float: left; }
.clear-both { clear: both; }
.steelblue { color: steelblue; }
.green { color: green; }
HTML:
<div class="myDiv left steelblue">Open Requests </div>
<div class="clear-both"></div>
<div id="openNumber" class="myDiv steelblue">13</div>
<div class="myDiv green left">Completed Requests </div>
<div id="completeNumber" class="myDiv green left">13</div>
In this way you can separate your classes and use them only when you really need it.
You can use a class for the similarities, and an id for the differences.
<div class="common" id="some-id"><!-- ... --></div>
CSS:
.common {
display: block;
float: left;
font-size: 11px;
}
#completeNumber {
color: green
}
Can somebody please explain what the inherit keyword means in CSS and how it works?
It will use the same value as the same property its parent has.
body {
margin: 234px;
}
h1 {
margin: inherit; /* this equals 234px in this instance */
}
<body>
<h1></h1>
</body>
If there are multiple instances of <h1> in the file, it will take the margin of its parent, so 234px is not always the value it will have. For example:
<body>
<h2></h2>
<div>
<h2></h2>
</div>
</body>
body {
margin: 20px;
}
div {
margin: 30px;
}
h2 {
margin: inherit; /* 20px if parent is <body>; 30px if parent is <div> */
}
To clarify, inherit doesn't do anything unless you're using it to override another style rule, otherwise it's just reinforcing the default behavior. Note that the overriding rule should be higher specificity or be below the rule that it overrides.
.pink {
background-color:pink;
}
.green {
background-color:lightgreen;
}
.override {
background-color:inherit;
}
<div class="pink">
<p class="green">I'm classed "green", and I am green.</p>
<p class="green override">I'm also classed "green" but `inherit` overrides this and causes me to inherit pink from my parent.</p>
</div>