Autor: Jose Luis Quintana Trejo
20/02/2023

CSS - Lo básico

CSS es el tipo de código que le da estilo al contenido de un sitio web, a continuación veremos los elementos básicos de este tipo de código.

2291

CSS no es un lenguaje de programación, tampoco un lenguaje de etiquetas, CSS es un lenguaje de estilo para hojas. CSS es lo que se usa para darle estilo a los elementos HTML, por ejemplo este código selecciona el texto en un párrafo y le da color rojo:

                                            
                                              p {
                                                color: red;
                                              }
                                            
                                          

Para poder asignar estilo a su sitio es necesario que agregue el link en su página HTML para así poder ver los cambios realizados en un explorador.

1.- Abra su página index.html y agregue la siguiente línea de código en la parte head del archivo HTML.

2.- Guarde el archivo index.html y recargue su explorador para ver los cambios, si su texto o elemento se modificó su hoja de estilo CSS está enlazada correctamente.

Ejemplo de cómo se modifica el color del texto en un párrafo cuando se aplica la línea de código vista anteriormente.

Anatomía de las reglas en CSS:

Usemos las líneas de código anteriores como ejemplo para ver que comprenden y como se les denomina a cada parte:

Toda la estructura se llama juego de reglas, cada parte tiene su propio nombre.

Selector

Este es el elemento HTML y se agrega al inicio del juego de reglas, define qué elemento será editado.

Declaration

Esta es una sola regla y especifica cual propiedad del elemento quieres editar.

Properties

Estas son las maneras en que puede editar los elementos HTML, en CSS específicas que propiedad quieres sea editada con la juego de reglas.

Property value

En la derecha de la propiedad después del signo : está el property value, este selecciona una de las muchas posibles apariencias que se le pueden dar a la propiedad.

Otras partes importantes en el juego de reglas:

Aparte del selector, cada juego de reglas debe estar dentro de estos signos { }.

Dentro de cada declaración debe haber un signo de : para separar la propiedad de su valor o valores

Dentro de cada declaración se debe usar un semicolon ; para separar la declaración de la siguiente.

Para separar varias propiedades en un juego de reglas, se escriben separándolas por un semicolon, por ejemplo:

                                            
                                              p {
                                                color: red;
                                                width: 500px;
                                                border: 1px solid black;
                                              }
                                            
                                          

Full Stack Developer, Graphic Designer at Atomic Web Design