CSS

CSS es un lenguaje de estilo utilizado para describir la presentación y el diseño de un documento HTML. Permite a los desarrolladores y diseñadores web aplicar estilos a elementos HTML.

CSS (Cascading Style Sheets, o Hojas de Estilo en Cascada) es un lenguaje de estilo utilizado para describir la presentación y el diseño de un documento HTML. Permite a los desarrolladores y diseñadores web aplicar estilos a elementos HTML, controlando aspectos como colores, fuentes, alineación, espaciado y disposición de los elementos en la página.

Características Principales de CSS

Separación de Contenido y Presentación: CSS permite separar el contenido HTML (estructura) de su presentación visual (estilos), lo que facilita el mantenimiento y la organización del código.
Especificidad y Cascada: CSS utiliza un modelo de cascada para aplicar estilos. Los estilos se pueden definir en diferentes niveles (inline, interno o externo) y el navegador determina cuáles aplicar en función de la especificidad de las reglas.
Selectores: CSS proporciona una variedad de selectores que permiten a los desarrolladores seleccionar elementos HTML específicos para aplicarles estilos, incluyendo selectores de tipo, clase, ID, pseudoclases y pseudoelementos.
Responsividad: CSS permite crear diseños responsivos que se ajustan a diferentes tamaños de pantalla, utilizando técnicas como media queries.
Estilos Dinámicos: CSS puede ser manipulado mediante JavaScript para cambiar estilos en tiempo real, permitiendo interactividad en las páginas web.

Sintaxis Básica de CSS

La sintaxis de CSS se compone de reglas que incluyen un selector y un bloque de declaración. Un bloque de declaración contiene una o más propiedades y valores.

selector {
    propiedad: valor;
}

/* Ejemplo */
h1 {
    color: blue;
    font-size: 24px;
}

Tipos de Estilos CSS

Estilos Inline: Se aplican directamente a un elemento HTML mediante el atributo style.
```
<h1 style="color: blue">Título en Azul</h1>
```
Estilos Internos: Se definen dentro de una etiqueta <style> , en la sección <head> de un documento HTML.
```
<style>
    h1 {
        color: blue;
    }
</style>
```
Estilos Externos: Se almacenan en un archivo CSS separado y se enlazan al documento HTML mediante la etiqueta <link> en el <head>.
```
<link rel="stylesheet" href="estilos.css">
```

Selectores Comunes en CSS

Selector de tipo: Aplica estilos a todos los elementos de un tipo específico.
```
p {
    color: red;
}
```
Selector de clase: Utiliza un punto ( . ) antes del nombre de la clase.
```
.mi-clase {
    font-weight: bold;
}
```
Selector de ID: Utiliza un símbolo de número # antes del nombre del ID.
```
#mi-id {
    font-size: 20px;
}
```
Selector de atributo: Selecciona elementos basados en sus atributos.

input[type="text"] {
border: 1px solid black;
}

Media Queries

Las media queries son una característica de CSS que permite aplicar estilos en función de ciertas condiciones, como el tamaño de la pantalla, lo que es fundamental para crear diseños responsivos.

@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

Conclusión

CSS es una herramienta esencial en el desarrollo web moderno, proporcionando a los diseñadores y desarrolladores un control significativo sobre la presentación y el diseño de las páginas web. Al trabajar en conjunto con HTML y JavaScript, CSS permite crear sitios web atractivos, responsivos e interactivos que mejoran la experiencia del usuario. Su flexibilidad y capacidad para implementarse de diversas maneras lo convierten en un pilar fundamental del diseño web.