Tutorial CSS3: El uso de reglas

En el tutorial de introducción al CSS aprendimos algo sobre la historia de CSS y también cómo incluirlo en nuestro HTML, pero va siendo hora de entrar en materia poco a poco.

Es importante saber que CSS funciona mediante reglas que aplicamos a los diferentes selectores de nuestro sitio web.

No importa que lo que estoy diciendo te suene a chino, coreano o cualquier idioma de símbolos; lo explicaré todo aquí lo más sencillo posible para que cualquiera sea capaz de entender el funcionamiento de CSS.

Así como HTML se basa en etiquetas que encierran contenidos (párrafos, títulos…) CSS asigna a estas etiquetas unos atributos visuales mediante reglas.

Para entender esto vamos a explicar cómo es una regla CSS por partes:

regla CSS

De esta manera, podemos ver algunos ejemplos:
Asignamos color negro a todas las etiquetas h1:

h1 {color:black;}

Le quitamos el subrayado a los enlaces y les damos color rojo:

a {text-decoration:none; color:red;}

Aplicamos el tamaño de fuente a 20 pixeles a la clase «.resaltado»:

.resaltado {font-size:20px;}

Aplicamos un margen izquierdo de 50px al ID «bloque1» y a la clase «clase33»:

#bloque1, .clase33 {margin-left:50px;}

Como se ve en los ejemplos, CSS permite:

En la próxima entrega veremos los selectores CSS a fondo, para sacar el mayor potencial posible de nuestras reglas CSS.

¡MANTENME INFORMADO!

¡Gracias por tu interés en estar informado del próximo lanzamiento de mis cursos! 😎

¡No hago spam! Lee la política de privacidad para tener más información.

3 comentarios en “Tutorial CSS3: El uso de reglas

  1. Hola Dario, sé que esta entrada es antigua, pero dejo por aquí comentario por si a alguien le sirve:

    En la medida de lo posible, las reglas y etiquetado mejor con classes .{} que id #{}, evitar los #id prescindibles, ya que por cada #id el doom tira de RAM y es posible «petar» algún que otro navegador antiguo o equipo con pocos recursos.

    Alguna que otra vez me ha pasado generando algún menú bastante largo usar un #id para cada elemento y el consumo de RAM ha sido bestial. Cosas que pasan… :D

    Un saludo!

      1. Creo que lo he explicado mal :D

        Realmente lo que pasa es que el DOOM reserva memoria por cada #id.

        No encuentro la fuente, son cosas que no llegan a mi alcance pero es bueno saberlas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

*

DARÍO BALBONTÍN FERNÁNDEZ es el Responsable del tratamiento de los datos personales del usuario y le informa que estos datos serán tratados de conformidad con lo dispuesto en el Reglamento (UE) 2016/679 de 27 de abril (GDPR) y la Ley Orgánica 3/2018 de 5 de diciembre (LOPDGDD), por lo que se le facilita la siguiente información del tratamiento: Fin del tratamiento: mantener una relación comercial y el envío de comunicaciones sobre nuestros productos y servicios. Criterios de conservación de los datos: se conservarán mientras exista un interés mutuo para mantener el fin del tratamiento y cuando ya no sea necesario para tal fin, se suprimirán con medidas de seguridad adecuadas para garantizar la seudonimización de los datos o la destrucción total de los mismos.Comunicación de los datos: No se comunicarán los datos a terceros, salvo obligación legal. Derechos que asisten al usuario: Derecho a retirar el consentimiento en cualquier momento. Derecho de acceso, rectificación, portabilidad y supresión de sus datos y a la limitación u oposición al su tratamiento. Derecho a presentar una reclamación ante la Autoridad de control (agpd.es) si considera que el tratamiento no se ajusta a la normativa vigente. Datos de contacto para ejercer sus derechos: contacto@dariobf.com.