My problem is that given the following HTML5 code
<!DOCTYPE html>
<html>
<head>
<title>Prueba_1</title>
<meta charset="utf-8">
<meta name="author" content="Sergio">
<meta name="Copyright" content="Facebook Inc.">
<!--Si seleccionamos "noindex", entonces ocultamos la página al usuario al no ser indexable-->
<meta name="robots" content="index">
<!--Investigar sobre este metadato-->
<meta name="robots" content="follow">
<meta name="keywords" content="primer programa, HTML5, Sergio, lista de la compra">
<meta name="description" content="Esta web pretende servir de prueba para practicar HTML5">
<link rel="icon" type="image/ico" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="normalize.css">
<link rel="stylesheet" tyoe="text/css" href="estilo3.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="Página_2.html">Comida</a></li>
<li><a href="Página_3.html">Mi cuenta</a></li>
</ul>
</nav>
</header>
<h1>Bienvenido a la tercera página</h1>
<div ID="caja1">Hola mundo</div>
<div ID="caja2"></div>
<div ID="caja3"></div>
<div ID="caja4"></div>
</body>
</html>
where the "normalize.css" style sheet puts suppresses the standard setting to "zero everything" and the "style3.css" style sheet is as follows:
#caja1{
width: 200px
height: 200px;
background-color: green;
margin: auto;
}
#caja2{
color: red;
}
#caja3{
color: yellow;
}
#caja4{
color: blue;
}
The objective is to create four 200x200px boxes and place them in different places on the page: the center, on the sides, above, below... in order to work a bit with the boxes themselves and see how they interact with each other. I don't want to put text inside or anything other than to see what they look like and how they work.
The problem is that the boxes "appear" on the page. The quotes are because, according to the live code on the page (I mean the code you see when you open the page in the browser and press Ctrl+Shift+I), the height is 0px. This causes that, obviously, they are not visible.
I thought that it could be some kind of problem with the cascading inheritance, although it makes my life difficult: the program is very simple and there are no other elements besides the 4 boxes. The same is related to the normalize sheet (I don't share it because it is very long), but I understand that it is a sheet widely used to "normalize" programs, so if it were wrong, many people would have complained about it.
So I have no idea why the height is zero in all four boxes , unless text is being written to them, even though the dimensions are specified.
You must specify the height of all the boxes in your css code, because if they do not have content and you do not specify their width and height at the same time, they will not be visible on your website.
Example:
Note: In the first css lines, in your "#caja1" selector, there is a syntax error, the ";" is missing. after specifying the width of your first box, I hope it will help you :D.
More information: https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/El_programa_de_caja
Your code contained an error, it was missing a ";" at the end of width:200px . That caused the height to be interpreted as part of the width value.