Resizing multiple images under the same id in css - html

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>

Related

CSS Wrap content in div

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."

How to enforce css style over existing classes (specially in Bootrstap)

When I want to apply a certain style to a div (specially using bootstrap 3), I create my own class like this:
.myClass {
width: 30%;
padding-right: 0px;
}
<div class="myClass"></div>
But sometimes the div style is overwritten by the bootstrap classes or another inherited properties (I don't understand completely the inheritance in CSS3), but if I apply directly in the div:
<div style="width: 30%;padding-right: 0px;"></div>
2 ways to force CSS on an element in this case :
You have you custom CSS located in a local .css file : put the <link> tag for this custom stylesheet after the Bootstrap css file.
Set the CSS rule !important after each properties so they will get an extra authority upon others
CSS inheritance
.myClass is less than div.myClass which is less than body div.myClass.
The Bootstrap is using usually more than one identifier. Like .ourClass.theirClass.yourClass which is hard to overwrite. Inspect your element in your browser to see the inheritance and try to overwrite it the css way before using any !important attributes.
The last rule defining a style of the element will be aplied to it.
So if you have various stylesheets in your page, the order of the files should be in the order you want them to be applied. example:
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="secondStyle.css">
Every style rule(not an entire block) that is written in the second file will be the definitive one in the website.
the same rule apllies within files, for example:
.ClassOne {
color: red;
}
... othes styling ...
.classOne {
color: Black;
}
In this case the color in the browser will be Black because it was the last one and it overwrites the first one.
There is another rule that can affect styling - The more specific rule will be the definitive one, example:
.one .two .three {
color: red;
}
.two .three {
color: blue;
}
.one .three {
color: green;
}
<div class="one">
<div class="two">
<div class="three">
some text
</div>
</div>
</div>
Question: In which color will the text show?
Answer: red.
Why? because in the case above, we call the .three element in a more specific way when we declared the red color.
check it here:
https://jsfiddle.net/wxaw3205/
The same example with more elements:
https://jsfiddle.net/wxaw3205/1/
The last way is using the !important declaration, it provides a way for You to give a CSS value more weight than it naturally has.
For the last example, lets assume that we have the same html markup of the example above, which will be the color now?
.one .two .three {
color: red;
}
.two .three {
color: blue;
}
.one .three {
color: green !important;
}
Answer: green.
Link to live example: https://jsfiddle.net/wxaw3205/2/
And just a little tip: never style the element using the style="" attribute, unless you have too! and either the !important.
Most of the time when you have to use them its because you'r stylesheet needs to be reordered.
That's all, I hope it helped you understand.

What is .content in css?

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.

Multiple id's that have the same child classes. Need selectors

So I'll have the following markup:
<div id="content-sidebar">
<div class="entry">
</div>
<div class="sidebar">
Sidebar Content
</div>
</div>
It is styled with the following:
#content-sidebar{
float: left;
padding-left: 10px;
position: relative;
width: 580px;
text-align: left;
padding-right: 20px;
background: url(../_images/content-line.gif) top right repeat-y;
}
#content-sidebar .entry{
position: relative;
padding-left: 16px;
}
#content-sidebar .entry a:hover {
color: #5CB414;
text-decoration: none;
}
I also have markup that uses a different styling for the parent div WITHOUT a sidebar (just adjusts the width), but needs the same for the child .entry class.
<div id="content-nosidebar">
<div class="entry">
</div>
</div>
the content-nosidebar id needs some slightly different styling, but the .entry child selector is exactly the same.
#content-nosidebar{
padding-left: 10px;
position: relative;
text-align: left;
padding-right: 20px;
}
What selectors will tell it to use content-sidebar and content-nosidebar with the .entry class without having to use redundant code? Is #content-sidebar .entry, #content-nosidebar .entry{} the best way or is there another way to select these?
Thanks!
If .entry covers more elements than #content-sidebar .entry, #content-nosidebar .entry would, then without knowing the exact structure of your document you'll have to make do with selecting by both IDs explicitly.
Or you could cheat by using an attribute prefix selector, if you really don't want to modify your HTML, but I wouldn't recommend it unless you know what you're doing (it's often cleaner and simpler to modify your HTML to suit your selectors instead):
div[id^="content-"] .entry
The selectors you can use depends on what you want to do.
.entry {} will apply to the class in both containers. Any CSS share between the two should be added in the simple selector, which should be listed in your CSS.
From there, if you want to customize either column, or have CSS that only applys to one column, but not the other, you can use either #content-sidebar .entry{} or #content-nosidebar .entry{}.
If there are other places that you have an .entry class, and you want CSS that applies to both #content-sidebar and #content-sidebar, you can use the combined selector #content-sidebar .entry, #content-nosidebar .entry{}. In this context, it might make more sense to add a common class of .content to #content-sidebar and #content-nosidebar. This would allow you to use a selector of .content .entry, instead of having to shove those IDs into all your CSS.
<div id="content-sidebar" class="content">
<div class="entry"></div>
<div class="sidebar">Sidebar Content</div>
</div>
<div id="content-nosidebar" class="content">
<div class="entry"></div>
</div>
The CSS would make the most sense in the following order:
.entry {
/** CSS common to all .entry elements **/
}
.content .entry {
/** CSS common to all .entry element in all .content areas **/
}
#content-sidebar .entry,
#content-nosidebar .entry{
/** CSS common to .entry elements inside #content-sidebar and #content-nosidebar **/
}
#content-sidebar .entry{
/** CSS specifically for .entry elements inside #content-sidebar **/
}
#content-nosidebar .entry{
/** CSS specifically for .entry elements inside #content-nosidebar **/
}
The reason you build your CSS this was is for
Efficiency - Common CSS is applied globally instead of repeated
multiple times thoughout the CSS
Organization - Common CSS is listed
first, while more specific CSS for specific sections are grouped and
listed afterwards, dispute the CSS specificity of the selectors
making the order irrelevant.
Good luck out there. -Matt

img with two different properties in css

I would like to be able to have for example two img classes with different properties. For example in css I want to have:
img {
padding-left: 15pt;
float: right;
}
and then:
img1 {
padding-left: 15pt;
float: left;
}
where img1 should be a tag for image so I can use it in html for example as:
<img1 src="myimage.png" alt="m"/>
How can I do that?
What you are using like <img1 /> is invalid HTML tag, inorder to select the elements uniquely, we define class or id to the elements, even if for some reason you don't want to define a class or an id, you can define Custom Attributes to the element, having a prefix of data- but you cannot define Custom HTML Elements, ..
Defining class to each img tag.. (Declaring id, make sure they are unique for each, you cannot use the same id on multiple elements..)
<img src="" class="img1" />
<img src="" class="img2" />
And than we write respective CSS like
.img1 {
/* Selects element having a class of .img1 */
}
.img2 {
/* Selects element having a class of .img2 */
}
Supposing you have common properties to be declared for both, group them using a comma, and than redeclare the unique properties for the other class like
.img1, .img2 {
padding-left: 15pt;
/* Other common properties goes here */
}
.img2 {
/* Unique properties for .img2 */
}
If you are not looking to assign a class to each img tag, than you can use :nth-of-type or :nth-child pseudo to select each img, but make sure you wrap them using a div or section anything you feel is appropriate...
Suppose we wrap them inside a div tag, and we assign a class say .container
<div class="container">
<img src="" />
<img src="" />
</div>
So here you can select the first img as
.container img:nth-of-type(1) {
/* Properties here will apply to first img tag nested inside element having
class of .container */
}
.container img:nth-of-type(2) {
/* Properties here will apply to second img tag nested inside element having
class of .container */
}
Note: These are CSS3 pseudo, but these are widely supported but as usual, older IE versions will spoil the game, though polyfills are available, but at the end you have to decide you want to choose what.
Also, specificity matters in each of the selectors I've defined above, if you aren't aware of specificity, than give a quick read here...
You can not define custom tags in html, should use CSS classes for what you want to accomplish.
<img class=img1 src="myimage.png" alt="m"/>
<img class=img2 src="myimage2.png" alt="m"/>
.img1 {
padding-left: 15pt;
float: left;
}
.img2 {
padding-left: 15pt;
float: right;
}