I can't change the text and image size - html

Question

I'm having problems changing the size of the text and the image in css. I'm just starting to use html and css. This is my code.
function myFunction() {
var xmlhttp = new XMLHttpRequest();
var url = "https://vnwcn9gt89.execute-api.us-east-2.amazonaws.com/book";
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myJson = JSON.parse(this.responseText);
console.log(myJson);
document.getElementById("title").innerHTML = myJson.Items[3].valore;
document.getElementById("text1").innerHTML = myJson.Items[1].valore;
document.getElementById("img1").src="books_img/"+myJson.Items[0].valore;
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.img1 {display: none}
img1 {vertical-align: middle;}
.title {
color: #333333;
font-size: 3em;
font-family: 40 px Olney,"Trebuchet MS",Tahoma,Arial,"Lucida Sans Unicode","Bitstream Vera Sans","DejaVu Sans",Sans-serif;
font-weight: bold;
padding: 8px 12px;
position: static;
bottom: 8px;
width: 100%;
}
.text1 {
color: #333333;
padding: 8px 12px;
font-family: 17 px Olney,"Trebuchet MS",Tahoma,Arial,"Lucida Sans Unicode","Bitstream Vera Sans","DejaVu Sans",Sans-serif;
}
.img1 {
display: block;
margin-left: auto;
margin-right: auto;
}
<div>
<h1 div class="title" id="title" button onclick="myFunction()"></div> <br>
<div class="text1" id="text1" button onclick="myFunction()"></div> <br>
<div class="img1"> <img id="img1" src onerror="this.onerror=null; this.src=myFunction();" style="width:50%"> </div>
</div>
<br>
In particular, I am unable to change the size of the text and I cannot center the image.
I definitely get confused with divs.
Can you kindly help me?

Answer 1

<div class="text1" id="text1" button onclick="myFunction()"></div> <br>
For good practice, try using <p> for text.
What happens is that you are trying to add font-size style to a <div>.
You don't need to use <br> after a <div>.
You can't use a button inside a div
The proposal solution is this:
CSS
.text {
color: #333333;
font-size: 17px;
font-family: Olney,"Trebuchet MS",Tahoma,Arial,"Lucida Sans Unicode","Bitstream Vera Sans","DejaVu Sans",Sans-serif;
}
.text-container {
padding: 8px 12px;
}
HTML
<div class="text-container">
<button type="button" onclick="myFunction()">
<p class="text" id="text1"></p>
</button>
</div>
Now for the image, add text-align:center to img1:
.img1 {
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
Welcome to Programming :)

Answer 2

1.) font-family: 17 px Olney, is not a valid definititon for font-size. Use font-size instead, and make sure to not put a space between the number and "px".
2.) To center your image, apply text-align: center to your img1 class (which is the parent element of the image - the image itself is an inline element by default which can be centered that way)

Answer 3

You are using the font-family property to set both the size and font-family of the text1 class. font-family property is used to set the font family only. So, use this
{font:17px Olney,"Trebuchet MS",Tahoma,Arial,"Lucida Sans Unicode","Bitstream Vera Sans","DejaVu Sans",Sans-serif;}
instead of font-family
Or you can specify the font-size and font-family separately like
{
font-size:17px;
font-family:"Trebuchet MS",Tahoma,Arial,"Lucida Sans Unicode","Bitstream Vera
Sans","DejaVu Sans",Sans-serif;
}
And if you want to set the width of the image to be 50% then you have to provide some width to the parent div of the image.