I want to wrap the content inside .container in another div, and give the new div class="content". As you can see, I've already started but I can't figure out how you're supposed to do it. I couldn't really find any help online regarding this so I could be doing it completely wrong.
.container {
div class="content" {;
width: 60%;
min-width: 640px;
margin: 0 auto;
background: #FFFFFF;
padding: 8px;
}
</div>
}
div class="content" { isn't valid CSS for specifying styles. Use this syntax instead:
.container div.content {
width: 60%;
min-width: 640px;
margin: 0 auto;
background: #FFFFFF;
padding: 8px;
}
Explanation
SELECTOR1 SELECTOR2 { RULES } is CSS syntax that means "Any element matching SELECTOR2 found as a child (or grandchild, etc) of any element matching SELECTOR1, give it RULES"
.CLASS is CSS syntax for a selector that means "Any element where the class property contains CLASS."
One specifies multiple classes by separating them with whitespace, e.g. <div class="foo bar"> would be hit by selector .foo as well as .bar, but not by .foobar.
ELEMENT.CLASS is CSS syntax for a selector that means "Any <ELEMENT> element where the class property contains CLASS."
So putting this all together, .container div.content { padding: 8px; } means "Any <div> element where class contains content, nested anywhere under any element where class contains container, give it padding=8px."
Related
I have just started learning HTML and CSS and I am implementing all the techniques I have learnt. I have come across a problem where I have two images places under one id that have 2 different dimensions. However I don't know how to edit them separately.
This is my HTML code:
#main-header {
background-color: #453e32;
}
#main-header img {
height: 4%;
width: 4%;
}
#main-header h1 {
color: #F8D115;
padding-left: 1%;
font-family: Calibri;
}
<div id="main-header">
<img src="../resources/wsimplylogo.png" />
<img src="../resources/wsimply.png" />
</div>
When editing the image sizes I cannot edit one specifically and I don't know if I should create another id separately or what
Any help would be appreciated!
PS I've literally only just started!
When using the selector #main-header img you target all img tags within your div with the id main-header. This means, that you cannot target a specific image without using something a bit more sofisticated.
If you're just learning css and html, I would suggest you give each of your images a seperate id (or class).
BUT if you really want to learn, then you could use :nth-child() as a selector:
#main img:nth-child(1){
/*here be style of 1st image*/
}
For further reference, see https://www.w3schools.com/cssref/sel_nth-child.asp
Try to make use of adjacent sibling selector + css selector.
The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element.
Also remove the closing </img> tag in your html. No need of it
#main-header {
background-color: #453e32;
}
#main-header img {
height: auto;
max-width: 100%;
vertical-align: middle;
}
#main-header img+img { /*for the second image followed by image*/
width: 50px;
}
<div id="main-header">
<img src="http://lorempixel.com/100/100/sports">
<img src="http://lorempixel.com/100/100/food">
</div>
I'm a CSS beginner trying to customise my WordPress blog by using a custom.css file.
I'd like to change the color of a div but this div have several classes :
<div class="container template-blog template-single-blog ">
If I use the following code will it change the background of all the divs with at least one of these classes or only the div with at least these 3 classes ?
.container .template-blog .template-single-blog {
background-color: lightgreen;
}
If you have a several classes associated to an element e.g. the <div>, those classes will target that div element only.
However, if your <div> classes are being used anywhere else, it will however, change the background-color to lime green.
If you want one class to target one element and your not going to be using it anywhere, then maybe consider ids (#unique).
If you want to target that one element then consider doing the following:
.container.template-blog.template-single-blog {
background-color: lightgreen;
}
Examples of usage: http://jsfiddle.net/kjLfq8b4/
div {
margin-bottom: 40px;
}
#uniqueItem {
color: red;
border: 1px solid green;
}
.oneClass {
background-color: blue;
color: white;
}
.twoClass {
padding: 10px;
}
.threeclass {
text-decoration: underline;
}
.oneClass.twoClass.threeClass {
height: 40px;
}
<div id="uniqueItem">This is a unique Item</div>
<div class="oneClass">This is one class</div>
<div class="oneClass twoClass threeClass">This is multiple classes</div>
Remove the spaces between classes names:
.container.template-blog.template-single-blog {
background-color: lightgreen;
}
This will mean that this style will be applied only when an tag matches with all the three classes.
Your CSS selector is actually like this:
"class 'template-single-blog' which has an ancestor with class 'template-blog' which has an ancestor with class container"
The best option is to add a class to that div and make a CSS rule for that class:
.new-class {
background-color: lightgreen;
}
If adding a class isn't an option, you should try saying "a div that has all of those classes". It is written like this:
div.container.template-blog.template-single-blog {
background-color: lightgreen;
}
To change the colour of all any div with one of these class names, you will want to add commas between the class names, like this:
.container, .template-blog, .template-single-blog {
background-color: lightgreen;
}
Without the comma nothing will change.
Will change nothing. You have selected the template-single-blog class in a markup like this:
<div class="container">
<div class="template-blog">
<div class="template-single-blog">
</div>
</div>
</div>
Just change the background on one of the classes, will work if nothing overwrites it.
.template-single-blog {
background-color: lightgreen;
}
or better add a new class
.background-single-blog {
background-color: lightgreen;
}
With your given markup:
<div class="container template-blog template-single-blog ">
This style:
.container .template-blog .template-single-blog {
background-color: lightgreen;
}
Will not affect anything. What that style declaration says is:
"For all elements with the class container, that have a descendant element with the class template-blog that contain children with the class template-single-blog elements, change the background of the element with the class template-single-blog element.
You could change the background of your div simply with this:
.template-single-blog {
background-color: lightgreen;
}
Which will change all elements with the .template-single-blog class across the site, regardless if they have any other classes.
If you want to get more specific, you can do this:
.container.template-blog.template-single-blog {
background-color: lightgreen;
}
Which will change only those elements that have all three classes.
I'm doing homework for my html class. And the book makes us insert some css. So I copy pasted it. Here it is.
body {
font-family: Arial, Verdana, Garamond;
font-size: 11pt;
}
a {
text-decoration: none;
color: #122973;
}
table {
width: 65%;
margin-left: auto;
margin-right: auto;
border-spacing:10px;
}
.menu {
text-align: left;
width: 20%;
}
.content {
width: 80%;
}
But I don't understand what .content is. Or .menu.
When I googled content, it showed me things like
content: open-quote;
content: close-quote;
content: no-open-quote;
content: no-close-quote;
Here's the solution image to my homework.
What part of that picture uses the .menu and .content rule?
In my homework it never said to give anything a class called content or menu.
.content is just a class selector - it selects any element on the page that has a class of 'content'.
Identifiers preceeded by a dot (.) are class selectors. They refer to the value of a class attribute of an HTML elmement.
The page creator can make up these names themselves, so googling them is pointless. 'content' probably refers to the content section on the page, but you would have to check the HTML to be sure. Judging by the image you added, this seems about right, there is a menu which is about 20% wide and a content section that occupies the rest of the space.
So if your assignment is to write the HTML, you just have to apply the right styles to the right elements by adding class="content" to the proper elements.
.content targets to a class selector.
HTML markup for:
<div class="content"></div>
This can be used many times inside of a page, unlike id which should be unique per page.
content and menu are the names of classes of elements within the HTML code of the page. Class names are prepended with a dot (.) when referenced in CSS.
This is a good resource for CSS selectors: http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
the ".content" references to the class "content", where you have all that text, and you are defining in that class that you want the content box to be 80% of the size of the website.
I'm using the <section> tag on several pages, but on ONE page I'm using an <aside> tag that is preceded by the <section> tag.
In the case that I have a <section> immediately followed by an <aside>, I would like to apply a width to both and have the section float left, and the aside float right.
Basically, if I have a <section> and <aside> I want the style to work like this:
section {
width: 500px;
float: left;
padding: 8px;
}
aside {
padding:8px;
width:400px;
float:right;
}
If I only have the <section> I want it to be like:
section {
padding: 8px;
}
Is there a way I can do this with either a conditional statement in CSS3, or a pseudo-class, without having to use JavaScript, custom classes, or separate CSS files?
This only works if the <section/> comes after the <aside/>:
<aside>content</aside>
<!-- if there is another node in between, use the '~' selector -->
<section>content</section>
In that case you could use aside ~ section or aside + section:
section {
padding: 8px;
}
aside + section {
width: 500px;
float: left;
}
In all other cases you'll have to use JavaScript because these selectors only work in one direction, top to bottom.
With CSS4 there might be a way using the Subject of a selector with Child combinator, but that's future. This selector was removed from the specification.
Suppose I have the following HTML:
<div id="Wrapper">
<div class="MyClass"></div>
<div class="MyClass"></div>
<div class="MyClass"></div>
<div class="MyClass"></div>
<div class="MyClass"></div>
</div>
and the following CSS:
.MyClass {
float: left;
margin-right: 5px;
}
All these elements are going to be positioned on one line with a space in between of 5px. The problem is that there will also be a space of 5px at the end. I want to have Wrapper really wrap the .MyClass divs so that there's no space on the edge.
Now I can think of several ways of doing this:
with jquery, set the right margin of the last element to 0.
with CSS create a new class - .MyClassForLastElement with marin-right set to 0.
creating a negative right-margin of -5px for .Wrapper.
I was wondering if there's an elegant and clever way of doing it.
Not sure if there is a perfect solution, I use to do that:
.MyClass {
float: left;
margin-left: 5px;
}
.MyClass:first-child {
margin-left: 0;
}
I do it with with first-child since it is supported in IE6-7 while last-child is not.
If you don't want the last child to have a margin-right use the last-child psuedo-selector.
.MyClass:last-child {
margin-right: 0px;
}
The following rules would provide the desired effect. First element will have no margin, but effectively any consecutive element would have margin-left:5px;.
.MyClass {
float: left;
margin: 0;
}
.MyClass + .MyClass {
margin-left: 5px;
}
Well supported across browsers, IE7+
the + adjacent selector matches an element that is a next sibling of another element, in the example above it's a .MyClass element following another .MyClass element
selectors as like this one
.MyClass + .MyClass {
margin-left: 5px;
}
More info http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors