Getting crazy with the Css!

HTML-CSS
1

Hello guys i had been trying to add width to an image through a style tag but i had not been able to do it, could you help me?
here is the code…

<!DOCTYPE html5>

<html> 

<main>

<head>
<style type="text/css">
.smaller-image 
{width= 10px;
height= 10px;
}

</style>

<h1>Shave-nation</h1>

</head>

<body>
 
<h2>this is a link to the <a href="#end of the page">end of the page</a> for you to follow</h2><br> 
 
<!--introducction to the page and a non working image-->
<img class="smaller-image" src="file:///C:/Users/camilo Paez/Desktop/proyecto web/woman.jpg" alt="woman shaving the armpit" >

<h3> <p>this webpage is dedicated to the ritual of shaving.
humans have shave their bears through all history, with different methods and sharpened objects.
those are some of them:<p></h3>

<ul>
<li>sharpened stones</li>
<li>straight razors</li>
<li>safety razors</li>
</ul>
<h4> When shaving people prefer a way over the other, depending of few factors in a certain order of importance, as we can see:</h4>
<ol>
<li>safety</li>
<li>comfortability</li>
<li>eficciency</li>
<p>could you participate in our survey and indicate your name, and what type of razor method you use to shave your body hear:</p>
<form action="C:\Users\camilo Paez\Desktop\proyecto web\survey.txt">

<input type="text" placeholder="here your name" required>

<button type="submit">This is a submit button</button><br>

<!--Radio button system-->
<label for="male"><input value="male" id="male" type="radio" name="male-female" checked by default>male</label>
<label for="female"><input value="female" id="female" type="radio" name="male-female">female<label><br>
<!--checkbox system-->
<label for="straight razor"><input id="straight razor" type="checkbox" value="straight razor" name="type of method">straight razor</label>
<label for="safety razor"><input id="safety razor" type="checkbox" value="safety razor" name="type of method">safety razor</label>
<label for="disposable razor"><input id="disposable razor" type="checkbox" value="disposable razor" name="type of method">disposable razor</label>
</form>

</ol>
<a href="https://google.com">This is a link to google searching engine</a>

<h5 id="end of the page"> This is finally fine...the end of the page.</h5>

</body>

</main>
</html>
2 
{width= 10px;
height= 10px;

These should have colons, not equal signs. Like: width: 10px;

1 Like
3

The above is not valid CSS syntax. I recommend working through the Free Code Camp CSS curriculum section to help you gain a better understanding of how to implement what you are wanting to do.

4

Also, this is not related to your problem of sizing the image, but you have problems with your html as well.

<main> should be nested inside <body>, not around it.

There shouldn’t be a <h1> inside <head>.

1 Like
5

You need to : instead of =

.smaller-image 
{
width : 100px;
height : 100px;
}
1 Like
6

Thank you, for the Help

7