another probably stupid question

Question

To scale an image would I have to defined it as a class in html first

<img src = "http://img02.deviantart.net/8319/i/2015/242/c/f/fat_whale_by_mochi_nee-d8tdt56.jpg" alt/"" class="blue whale" />

then in CSS would I have to say

.blue whale img{
width: 10px:

height: 10px;
}

or

img. blue whale{

width:100px;
height:100px;
}

Answer 1

To change the styling of any object with a class, it would look like this:

.blueWhale
{
height: 10px;

width: 10px;
}

Notice the 'img' before the class isn't necessary, unless you plan on giving that class to other elements besides just images.

So let's say I have <div class='blueWhale'></div> and <img class='blueWhale'> -

If I wanted affect both, I'd use my example from above. If I only wanted to affect my divs with the blueWhale class, I'd use:

div .blueWhale
{
/* Styling goes here */
}

To only affect my img elements with the blueWhale class:

img .blueWhale
{
/* Styling goes here */
}

However, if you want to give all your images the same class, but still only want to affect one image, you should also think to apply ids to those img tags. Ids are meant to be unique to one specific element.

So if I had <img class='whale' id='blueWhale' /> <img class='whale' id = 'greenWhale' />

To only affect the blueWhale, i'd do the following:

#blueWhale
{
/* This is how you reference elements by ID */
}

Also, notice I'm using camel-casing instead of spaces: 'blueWhale' instead of 'blue whale'. That's because when you use spaces, you're actually assigning multiple classes. So class='blue whale' would give an element the class 'blue' and the class ' whale'.

TL;DR: Technically no, but depending on what you're doing, you may want to anyways.

Answer 2

Sorry for replying so late. I wasn't on sololearn for a while, but here is my code:

HTML

<img src = "http://img02.deviantart.net/8319/i/2015/242/c/f/fat_whale_by_mochi_nee-d8tdt56.jpg" alt/"" class="blueWhale" />
<p class ="whale">
Blue whale can fly
</p>
<p class= "fish">
Despite some myths fish cannot fly
</p>

CSS

p.whale {
padding: 10px;
border-style: solid;
border-width: 2px;
border-color: yellow;
font-size: 30px;
}
p.fish {
padding: 10px;
border-style: solid;
border-width: 5px;
border-color: blue;
font-size: 30px;

}

.blueWhale{
width: 5px:

height: 5px;
}

Yet that whale still no scale, is it because the image?