Seguir leyendo «Introducción a CSS para principiantes»

">
logo carlos astudillo

Introducción a CSS para principiantes

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

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

¿Quieres aprender a crear un negocio online sin renunciar a tu empleo invirtiendo desde 60 minutos al día?


Envio correos cada semana para que lo consigas, aplicando ideas concretas con las que descrubrirás cosas como:

✅ Las bases para que tu negocio online se haga realidad sin descuidar a tu familia ni tu empleo.

✅ La mejor forma para organizar tu tiempo, para que empieces a dar forma a tu proyecto..

✅ Ideas para generar ingresos, que te permitan aumentar tu sueldo aunque tu jefe no quiera hacerlo.

✅ Estrategias para conseguir tus primeros clientes que paguen lo que realmente vale tu trabajo.


Mis correos incluyen historias curiosas y experiencias que llevan alguna lección practica en medio y por supuesto tambien mis productos y servicios (que de algo hay que vivir). Envio varios correos por semana, unas menos y otras más. No regalo nada por suscribirse, pero cada email es un regalo que puede ser la chispa que te faltaba para encender la llama. Te unes cuando quieres y te das de baja de la misma forma, y tan amigos. Si te suscribes recibirás un correo para que confirmes que realmente quieres apuntarte. Nunca esta demás mirar en la carpeta de spam que a veces puedo caer ahí.


Responsable: Carlos Astudillo; Finalidad: Para comunicarme contigo y hacerte llegar información de nuevos contenidos y productos que voy publicando; Legitimación: Tu consentimiento informado; Destinatario: Siteground, donde alojo este sitio web. Lo guardaré ademas en la base de datos de mi cuenta Mailerlite; Derechos: Acceso, rectificación, limitación y eliminación de tus datos si me lo pides; Plazo de conservación de los datos: Hasta que me pidas la eliminación de los datos entregados por ti en este formulario.