Propiedades básicas de CSS
Vamos a revisar hoy las propiedades que pueden ser consideradas como básicas en relación con las reglas CSS. Como ya sabemos, en realidad CSS es todo un mundo y resulta complicado conocer todas las posibilidades que nos ofrece. Sin embargo, sí que podemos hacer referencia a aquellas propiedades que suelen ser más utilizadas a la hora de darle estilos a una página web. Con ello no nos convertiremos en unos expertos, pero sí que seremos capaces de dar los primeros pasos con CSS. Luego ya dependerá de cada uno profundizar más sobre este tema o quedarse en la superficie.
Propiedades básicas de CSS
Pues nada, sin más dilación, vamos a ir viendo una serie de propiedades de considero básicas para trabajar con CSS. Por supuesto, están recogidas en función de mi opinión, que no tiene que coincidir con la vuestra. Son las siguientes.
🌐 border : Nos sirve para establecer las características del borde de la caja que envuelve al elemento afectado.
El resultado será el siguiente:
🌐 width : Permite indicar la anchura de la caja.
El resultado será el siguiente:
🌐 height : Sirve para indicar la altura de la caja.
La altura se puede indicar en varios formatos:
- px: píxeles
- em: tamaño de la fuente utilizada por el elemento.
- %: porcentaje en función del tamaño de la fuente base del documento HTML
El resultado será el siguiente:
🌐 color : Permite indicar el color del elemento incluido en la caja.
El resultado será el siguiente:
🌐 background : Sirve para indicar las características del fondo de la caja.
Las características que se pueden modificar con esta propiedad son las siguientes:
- color
- size
- position
- image
El resultado es el siguiente:
🌐 font-family : Se trata de una de las propiedades relacionadas con la fuente del elemento. En particular, esta propiedad nos permite definir el tipo de fuente asociado.
Otras propiedades relacionadas con las fuentes son las siguientes:
- font-size
- font-variant
- font-style
El resultado será el siguiente:
🌐 text-align : Permite indicar la alineación del elemento incluido en la caja.
Otras propiedades relacionadas con el texto son las siguientes:
- text-decoration
- text-transform
El resultado será el siguiente:
🌐 margin : Esta propiedad permite definir el margen existente alrededor de la caja del elemento.
El orden de los márgenes indicados en la propiedad es el siguiente:
- Margen superior
- Margen derecho
- Margen inferior
- Margen izquierdo
El resultado será el siguiente:
🌐 padding : Permite establecer el tamaño del espacio existente entre el elemento y la caja envolvente (esto es, se trata del espacio interior de la caja).
El resultado es el siguiente:
Pues nada, yo creo que con las propiedades que acabamos de enumerar ya disponemos de las herramientas básicas para comenzar a aplicarle estilos a nuestras páginas web. Si os ha gustado el resultado, os recomiendo que poco a poco vayáis profundizando en otras reglas CSS más avanzadas. Las variantes de estilo son casi infinitas y es importante que sigáis una buena guía para encauzar correctamente vuestro aprendizaje. En cualquier caso, os prometo que en futuro seguiremos revisando más cosas sobre este tema en el blog.
Saludos.
Comentarios
Publicar un comentario