El lenguaje de estilos CSS es fundamental para que el diseño de tu página web sea armonioso y atractivo. En este post voy a darte una introducción a CSS para que puedas comenzar a aplicarlo hoy mismo en tu sitio web.
- Que es el CSS
- Estilos CSS en un elemento HTML específico
- Estilos CSS en mas de un elemento HTML al mismo tiempo
Que es el CSS
El CSS es un lenguaje de estilos complementario a HTML, si no sabes lo que es esto último dale un vistazo a mí articulo sobre que es el HTML. Cuando escribimos una página web, algunos tag HTML nos permitirán asignar estilos al texto como negritas(«<strong>»), sin embargo el alcance de estas etiquitas es limitado.
Ahi es donde el CSS interviene, gracias al acceso de una serie de propiedades que cada elemento HTML tiene podremos asignar color, tamaño de fuente, forma de bordes, comportamientos gráficos a los enlaces, separación de margenes de un elemento sobre otro, etc.
Estilos CSS en un elemento HTML específico
Siguiendo el ejemplo de un texto en negrita, vamos a suponer que quiero destacar un subtitulo, asignándole ese peso, pero tambien definiendo un color rojo para la letra. Para hacerlo debo ir al elemento HTML y establecer las propiedades CSS de font-weight en bold y color en red, tal como muestra el siguiente ejemplo:
<p style=»font-weight:bold;color:red»>Hola Mundo</p>
En ese caso, le estoy asignando a la frase Hola Mundo, contenida en el elemento HTML «<p>», un estilo CSS que establece estas características. La gran ventaja de esto es que nos da acceso a múltiples propiedades para hacer nuestros diseños más atractivos.
Estilos CSS en más de un elemento HTML
Hasta aqui todo suena muy bien, estoy tratando de hacer esto de apoco, porque mi objetivo siempre es que las personas que no tienen conocimientos técnicos puedan aprender sobe estos temas para aplicarlos en sus proyectos o bien saber que pedirle al profesional que contraten.
El ejemplo anterior esta bien si vamos a aplicarlo a un par de elementos HTML en una web, pero imagina que tenemos unos 20 subtítulos y que nos piden modificarlos todos, porque el color no convence al cliente o a nosotros no nos gusta. En ese caso nos veríamos en la tediosa tarea de tener que modificar cada uno de los 20 subtítulos.
La buena noticia es que CSS nos permite asociar estas propiedades a diferentes elementos pero centralizandolas en un solo trozo de código. Lo que hacemos en ese caso es crear una clase, que contenga las propiedades y asignar esa clase a cada uno de los elementos HTML de subtítulo. Ejemplo:
<style>
.formato-subtitulo{
font-weight:bold;
color:red
}
</style>
Lo que acabo de hacer, es crear una clase, de nombre «formato-subtitulo» y si quisiera ahora asignarla al elemento HTML, para que adopte las propiedades puedo hacerlo de la siguiente forma:
<p class=»formato-subtitulo»>Hola Mundo</p>
Como puedes ver el CSS resulta muy potente, esto es solo una pequeña parte de lo que puedes llegar a hacer con el en tu página web, blog o negocio online. Si te gustaría que siga subiendo contenido como este, no dudes en dejarme un mensaje en el siguiente formulario de contacto