Square does not appear in my CSS code

Asked

Viewed 43 times

-1

I’m taking my first steps in html and bumped into my first puzzle. In this small "portfolio" that I am doing I tried to add the image of a square , I had already done some tests and worked very well ,but when trying to add the figure in the code of this specific exercise the figure does not appear .... I’ve tried to put it in other positions in the code and so far it hasn’t worked,I really appreciate if someone can give me a strength the code follows below:

body {
  background-color: green;
}

.square {
  height: 20px;
  width: 20px;
  background-color: #555;
}
<!DOCTYPE html>

<html>

<head>
  <meta charset="utf-8">
  <title>Nicolas Amad</title>
</head>

<body>

  <!--Cabeçalho da página-->
  <div>
    <center>
      <img width="300px" height="300" src="Perfil.jpeg">
      <hr/>
      <h1 style="color:white;"><big>Nicolas Amad</big></h1>
</body>
<hr/>
<div class="square"></div>
</center>
</div>

<!--Auto-Descrição-->

<h2 style="color:white;"><u>Quem sou eu?</u></h2>

<p style="color:white;"> Estudante de Engenharia Mecânica e Análise de Sistemas ,apaixonado pelo poder de criação que a tecnologia oferece, atualmente muito interesado em Desenvolvimento Web/Mobile.</p>

<br><br>

<!--Descrição de Habilidades--->
<h3 style="color:white;"><u><b>Skills</b></u></h3>

<table>
  <tr>

    <td style="color:white;"><b>HTML</b></td>
    <td>
      <div class="square"></div>
    </td>

  </tr>

</table>


</body>

</html>

html css

  • Your HTML has two elements <body>. The element <body> represents the content of a document HTML. only one is allowed <body> per document.

  • Thank you Augusto, solved my problem perfectly ,still confusing me a lot in some details.

1 answer

2

Hello, good night, good night! There are some errors in your code that you should watch out for.

1 - The <body></body> is the body of the page, and between it should be all content to which you want to appear visually on your page and cannot be repeated.

  1. <html>
  2. <head></head>
  3. <body></body>
  4. </html>

2 - It looks like your CSS code is in an external file. If it is, you need to insert the file link within the tag <head></head>. Thus: <link type="text/css" rel="stylesheet" href="MeuArquivo.css">

I edited your file, made some corrections. Study the code and see what you missed. These are simple things. Good studies.

 <!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
      <title>Nicolas Amad</title>
    <style>
        body{
            background-color: green;
        }

        .square{
            height: 20px;
            width: 20px;
            background-color: #555; 
        }
    </style>
    </head>

<body>
    <!--Cabeçalho da página-->
    <div>
            <center>
              <img width="300px" height="300" src="Perfil.jpeg">
                <hr/>
                    <h1 style="color:white;"><big>Nicolas Amad</big></h1>
                <hr/>
            </center>
          <div class="square"></div>
    </div>
    
<!--Auto-Descrição-->
<h2 style="color:white;"><u>Quem sou eu?</u></h2>
<p style="color:white;"> Estudante de Engenharia Mecânica e Análise de Sistemas ,apaixonado pelo poder de criação que a tecnologia oferece, atualmente muito interesado em Desenvolvimento Web/Mobile.</p>

<br><br>

<!--Descrição de Habilidades--->
<h3 style="color:white;"><u><b>Skills</b></u></h3>

    <table>
      <tr>
        <td style="color:white;"><b>HTML</b></td>
        <td>
          <div class="square"></div>
        </td>
      </tr>
    </table>

</body>
</html>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.