Mediante las hojas de estilo podremos definir las características de presentación de los elementos HTML.
Para lograr esto, CSS nos ofrece un conjunto, cada vez más amplio, de propiedades que pueden asignarse a los elementos de nuestros documentos HTML.
Pero ahora vayamos a una de las preguntas que surgen siempre en mis primeras clases, cuando los alumnos están comenzando a familiarizarse con las hojas de estilo y HTML. Y esa duda apunta a como establecer el tamaño de los elementos.
Para esto, CSS nos ofrece dos propiedades imprescindibles: width (ancho) y height (alto). Es importante destacar que estas características recibirán un valor numérico (aunque a partir de las nuevas versiones de CSS también soportan variables) y que deben tener unidades especificadas (por ejemplo px, em o rem, entre otras posibles).
¿Qué elementos pueden recibir estas propiedades? La respuesta más simple es que las cajas son las que pueden tener establecido un ancho y un alto desde CSS. Algunos ejemplos serían: div, img y las cajas de texto (ej: p, h1, etc). También aplica a las nuevas cajas semánticas de HTML5, como el caso de section, article, main, header, aside y footer, entre muchas otras.
¿Podemos ver un ejemplo de como se aplica? Por supuesto. Imaginemos un div, cuya id es caja1, y deseamos establecer un ancho de 400px y un alto de 250px. En ese caso podríamos escribir en nuestro CSS un código como el siguiente:
#caja1{width: 400px; height:250px;}Recordemos siempre que los pares propiedad/valor en CSS se deben separar con punto y coma ( ;).
Más allá del ancho y el alto
Para tener en cuenta: una caja, como puede ser un div, aunque tenga asignado ancho y alto, no será visible si no tiene un contenido o un color de fondo o un borde. Por defecto es transparente.
Otro aspecto a tener en cuenta es que hay otras características que afectan las dimensiones de las cajas, por ejemplo el padding, que podría entenderse como el relleno de la caja, es decir el espacio entre el contenido y el borde. Esta característica se suma al ancho y al alto, y se expresa de manera numérica con una unidad, como las mencionas px o em. Si deseamos que el padding no se sume al ancho y al alto, desde CSS podremos especificar box-sizing: border-box. De esta manera, cambiamos el modelo de caja y el padding no se suma al ancho y el alto y se cuenta «hacia adentro».
Para completar, es importante tener muy en cuenta que si asignamos width y height a una caja de texto esto afectará sus dimensiones, pero no modificará el tamaño o proporciones del texto. Si lo que deseamos es cambiar el tamaño de texto, siempre desde CSS, lo podemos hacer con la propiedad font-size.
Lecturas recomendadas:
- ¿Qué es CSS3?
- La importancia de CSS3 en el diseño Web actual.
- Multicolumna con CSS3.
- Cómo hacer una sombra interior con CSS3.
- CSS creativo.
- Novedades de CSS4 para texto.
Más sobre Diseño y desarrollo Web
Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web. Realizo proyectos basados en Inteligencia Artificial. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes de programación y herramientas para Desarrollo Web y móvil en modalidad online y presencial.
Deja una respuesta