I am trying to target all the heading elements within two classes ('section2' and 'section3') using this code:
.section2,.section3 h1,h2,h3,h4,h5,h6 {
color:white;
}
But it is only targeting section3. Does anyone know why?
Edit:
This is my HTML:
<section class="section2">
<h1>Test</h1>
</section>
<section class="section3">
<h1>Test</h1>
</section>
.section3 h1 {
color:white;
}
You're specifying .section3 h1, which is targeting the section3 h1 specifically, and is the only reason it works. To get it all working try this.
h1,h2,h3,h4,h5,h6{
color:inherit;
}
.section2, .section3 {
color:white;
}
.section2 h1,h2,h3,h4,h5,h6 ,.section3 h1,h2,h3,h4,h5,h6 {
color:white;
}
Related
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
}
Im working on a portfolio for uni and the background of my container / wrapper does not extend vertically enough in order for all its content to have a back ground color. I'll post code below, any help would be appreciated.
HTML
<body>
<section id="wrapper">
<header>
<hgroup class="title">
<h1>Matt Murphy</h1>
<p>Personal Portfolio | University of Leeds | BA New Media</p>
</hgroup>
</header>
<nav>
Home
About Matt
</nav>
<section id="modules">
<h2>Modules Studies To Date</h2>
<section id="year_1">
<h3>Year 1</h3>
<p>History of Communications</p>
<p>Academic Skills and Contemporary Issues</p>
<p>Interface Design</p>
<p>Design For New Media</p>
<p>Basic Camera and Editing</p>
<p>Animation For New Media</p>
</section>
<section id="year_2">
<h3>Year 2</h3>
<p>Dynamic Web Programming</p>
<p>Communications Research Methods</p>
<p>Working in New Media/p>
<p>Media Policy</p>
<p>New Media Narrative and Gaming</p>
<p>Visual Communications</p>
</section>
</section>
</section>
</body>
CSS
body{
color:#000;
background-image: url(images/canvas.png);
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
a:link {
text-decoration:none;
color:#000;
}
a:visited {
text-decoration:none;
color:#000;
}
a:hover {
text-decoration:none;
color:#000;
}
a:active {
text-decoration:none;
color:#000;
}
#wrapper {
background-color:#FFF;
padding:3%;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
display:block;
margin:auto;
width:60%;
margin-top:2%;
}
header {
text-align:right;
}
#modules {
width:100%;
display:block;
margin:auto;
}
#year_1 {
float:left;
}
#year_2 {
float:left;
}
To fix your problem you just need to add overflow: auto to #wrapper.
#wrapper {
background-color:#FFF;
padding:3%;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
display:block;
margin:auto;
width:60%;
margin-top:2%;
overflow: auto; /* add this line */
}
However, another issue is that you are using HTML5 elements and the HTML5 shiv but you have not used the HTML5 doctype:
<!DOCTYPE html>
I assume you are having problems in IE? You are missing a doctype declaration. If you add a transitional doctype as per the example on W3Schools below it should work.
HTML doctype declaration
Basically the css-property 'float' on the section#year is the bad guy here.
If I replace your sections with div's and add an extra div to clear block rendering it works:
http://jsfiddle.net/hoedinie/537sL/1/
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