CSS, que significa Hojas de Estilo en Cascada (Cascading Style Sheets en inglés), es un lenguaje de diseño gráfico utilizado para estilizar y diseñar el contenido estructurado de una página web. CSS trabaja en conjunto con el HTML (Lenguaje de Marcado de Hipertexto) y el JavaScript para crear páginas web visualmente atractivas y funcionales.
Aquí hay algunos conceptos clave sobre CSS:
1. Selectores: Los selectores son la manera de apuntar a los elementos HTML que deseas estilizar. Pueden ser nombres de etiquetas HTML, clases, IDs, entre otros.
2. Propiedades y Valores: Las reglas CSS están compuestas por propiedades y valores. Las propiedades son aspectos estilizables de un elemento, como el color de fondo, y los valores son asignaciones a esas propiedades, como "rojo".
3. Reglas CSS: Una regla CSS es un conjunto de propiedades y valores aplicados a un selector específico.
4. Herencia: Algunas propiedades CSS son heredadas por los elementos hijos de un elemento al que se le ha aplicado un estilo.
5. Especificidad: Es una regla que determina qué estilos se aplican en caso de conflicto. Los estilos con mayor especificidad (por ejemplo, los aplicados directamente a un ID de elemento) tienen prioridad sobre los estilos con menor especificidad (por ejemplo, los aplicados a una etiqueta HTML).
A continuación, se describe cada uno de estos elementos:
Un selector es un patrón que se utiliza para seleccionar elementos HTML específicos en una página web para aplicarles estilos. Existen diferentes tipos de selectores como los de tipo, clase, ID, atributo, entre otros.
Una declaración es una instrucción que se encuentra dentro de una regla CSS, y está compuesta por una propiedad y un valor. Una declaración se encuentra dentro de un bloque de llaves { }.
Una propiedad es un tipo de atributo de estilo que deseas modificar, como el color, el tamaño de fuente, el margen, el relleno, entre otros.
Un valor es la configuración específica o el estilo que deseas aplicar a una propiedad. El valor se asigna a una propiedad y define cómo se debe aplicar el estilo.
/* Selector */
p {
/* Declaración */
color: red; /* Propiedad: color, Valor: red */
font-size: 16px; /* Propiedad: font-size, Valor: 16px */
}
Una regla CSS está compuesta por un selector y un conjunto de declaraciones.
Una declaración está compuesta por una propiedad y un valor.
Las declaraciones deben terminar con un punto y coma ;, especialmente cuando se tienen múltiples declaraciones en una regla.
Las propiedades y los valores son case-insensitive, pero es una buena práctica mantener un estilo consistente, generalmente en minúsculas.
El selector universal en CSS es representado por el símbolo asterisco *. Este selector coincide con cualquier elemento HTML dentro de una página, permitiendo aplicar estilos de manera global. Es muy útil cuando quieres establecer algunas propiedades básicas que deben aplicarse a todos los elementos de tu página web.
* {
margin: 0;
padding: 0;
color=blue;
}
Un selector de tipo en CSS es una regla que selecciona elementos HTML basados en su nombre de etiqueta. Los selectores de tipo se utilizan para aplicar estilos a todos los elementos de un cierto tipo en un documento HTML. Por ejemplo, si quieres aplicar un estilo específico a todos los párrafos en tu página web, puedes utilizar un selector de tipo.
p {
color:blue;
}
Un selector descendiente en CSS es un tipo de selector que se utiliza para aplicar estilos a un elemento HTML que está anidado dentro de otro elemento HTML específico. Los selectores descendientes se utilizan para seleccionar elementos secundarios que están dentro de un elemento principal (padre) y aplicar estilos solo a esos elementos secundarios. La sintaxis de un selector descendiente utiliza un espacio para separar el elemento padre y el elemento secundario que se desea seleccionar.
Sintaxis:
elemento-padre elemento-hijo {
propiedad: valor;
}
Ejemplo:
h1 em {
color: blue;
}
Un selector de ID en CSS se utiliza para aplicar estilos a un elemento HTML que tiene un atributo "id" específico. Los selectores de ID se utilizan para seleccionar un elemento único en un documento HTML en función de su ID único y aplicar estilos a ese elemento. La sintaxis de un selector de ID utiliza el símbolo "#" seguido del valor del atributo "id".
Sintaxis:
#nombre-del-id {
propiedad: valor;
}
Ejemplo:
#frase1{
color:blue;
}
Un selector de clase se utiliza para aplicar estilos a uno o varios elementos HTML que comparten una misma clase. Los selectores de clase son muy útiles para aplicar un estilo consistente a varios elementos en una página web sin tener que repetir estilos para cada elemento individualmente. La sintaxis de un selector de clase utiliza un punto (.) seguido del nombre de la clase que deseas seleccionar.
Sintaxis:
.nombre-de-clase {
propiedad: valor;
}
Ejemplo:
.resaltado {
color: red;
background-color: yellow;
}
Los comentarios se realizan colocando el texto que deseas comentar entre /* y */. Todo el texto entre estos marcadores será ignorado por el navegador al interpretar y aplicar los estilos CSS.
/* Esto es un comentario simple */
/*
Esto es un comentario
que ocupa múltiples líneas
*/
/* Los comentarios pueden ser útiles para describir el propósito o funcionamiento de un bloque de código específico */
body {
font-size: 16px;
/* Este es un comentario sobre la propiedad de color del body */
color: black;
}