La propiedad widht

Esta propiedad se utiliza para establecer el ancho del elemento al cual nos estemos refiriendo, para aplicarle un ancho debemos usar esta propiedad dentro de style, el orden para establecerlo es siempre el mismo, primero escribimos el nombre de la propiedad, seguido de el signo dos puntos [:], un espacio en blanco, los valores que queramos aplicar y acabamos con un punto y coma [;], en este caso como la propiedad es para indicar una medida utilizaremos un valor numérico y la abreviatura [px] que proviene de pixeles, si bien hay otras medidas de momento utilizaremos esta, más adelante ya veremos otra clase de medidas. Aqui tienes un ejemplo del uso de width dentro de style.

<div style="width: 200px;">div de 200px de ancho</div>
<p style="width: 150px;">párrafo de 150px de ancho</p>

Aqui puedes verlo aplicado entre las etiquetas <style> en la cabecera del documento.

<!DOCTYPE html>
<html>
  <head>
    div {
      width: 200px;
      }
    p {
      width: 150px;
      }
  </head>
  <body> 
    <div>div de 200px de ancho</div>
    <p>párrafo de 150px de ancho</p>
  </body>
</html>

La propiedad height

Al igual que width, height se utiliza para establecer una medida, pero en vez de establecer un ancho, con height establecemos el alto, el procedimiento para darle estilo con height es el mismo que acabamos de utilizar con width, así que no tiene sentido volver a repetir todos los pasos, si tienes dudas vuelve a leer el apartado anterior. También vamos a utilizar pixeles en este caso.

<div style="height: 400px;"></div>
<p style="height: 50px;"></p>

Aqui puedes verlo aplicado entre las etiquetas <style> en la cabecera del documento.

<!DOCTYPE html>
<html>
  <head>
    div {
      height: 400px;
      }
    p {
      height: 50px;
      }
  </head>
  <body> 
    <div>div de 200px de ancho</div>
    <p>párrafo de 150px de ancho</p>
  </body>
</html>
Como ves, las dos maneras obtienen el mismo resultado, pero la segunda es mucho mas limpia, ya que separa el estilo de la estructura, aunque ahora no se note la diferencia, cuando llevas cientos o miles de líneas de código la diferencia es abismal. Aún viendo estas dos maneras, nosotros vamos a utilizar la tercera, es decir aplicar estilos a través de un archivo externo, que es la más usada y la mejor por muchos motivos.

Daniel Fernández Velázquez

Me encanta aprender y practicar la programación web, Autodidacta y apasionado de la tecnología.