Aprende CSS desde cero
¡Hola! Bienvenido/a
Vamos a aprender CSS desde cero
¿Qué es CSS?
CSS (Cascading Style Sheets) es un lenguaje que te permite dar estilo a las páginas web, como colores, fuentes y diseños
Cascading: Significa que los estilos se aplican en orden de prioridad. Si hay varios estilos para el mismo elemento, se elige el más específico o el último definido.
Aplicar CSS a HTML
Puedes aplicar CSS a tus páginas HTML de tres maneras:
inline con el atributo style="" En bloque interno delimitado por etiquetas <style>...</style> O en archivo externo incluido con <link rel="stylesheet" href="mystyle.css"> (es la opción más recomendable)
Estructura de un archivo
Un archivo CSS contiene reglas de estilo que aplican a los elementos HTML de tu página.
Las reglas se escriben en,
- Selectores que delimitan que elementos se ven afectados
- Declaraciones que establecen las propiedades
¡Vas muy bien!
Ahora vamos a hablar de la sintaxis de CSS
Selectores
Los selectores en CSS te permiten elegir los elementos HTML a los que quieres aplicar estilos.
Algunos tipos de selectores:
- Selector de etiquetas: Estiliza todas las etiquetas de un tipo.
p { } - Selector de clases: Estiliza elementos con una clase específica.
.mi-clase { } - Selector de ID: Estiliza un elemento con un ID único.
#mi-id { }
Propiedades y valores
En CSS, las propiedades definen qué aspecto del estilo cambiar, y los valores determinan cómo se verá.
Por ejemplo:
.mi-clase {
color: red;
font-size: 16px;
}¡Combina propiedades y valores para personalizar tu página!
Colores
En CSS, tendrás que usar colores con mucha frecuencia, para darle vida a tu página. Hay muchas formas de usar colores
Nombres de colores: Usa palabras como red, blue, green, etc. Códigos hexadecimales: Son códigos que empiezan con # seguidos de números y letras, como #ff0000 (rojo). Valores RGB: Usa rgb() con valores entre 0 y 255 para rojo, verde y azul. Ejemplo: rgb(255, 0, 0) (rojo).
¡Experimenta con diferentes colores y formatos!
Tipografías
CSS te permite personalizar el texto usando diferentes propiedades de tipografía.
font-family: Define la fuente que quieres usar. Ejemplo: font-family: 'Arial', sans-serif; font-size: Cambia el tamaño del texto. Ejemplo: font-size: 20px; font-weight: Ajusta el grosor del texto. Ejemplo: font-weight: bold; font-style: Aplica estilos como cursiva. Ejemplo: font-style: italic;
¡Usa estas propiedades para hacer que el texto se vea exactamente como lo deseas!
Box Model
El box model es una estructura que define cómo se calculan el tamaño y el espaciado de los elementos en la página ¡Es muy importante!
Content: El contenido del elemento. Padding: El espacio interno alrededor del contenido. Border: El borde que rodea el padding. Margin: El espacio externo entre el borde y otros elementos.
¡Ya casi lo tienes!
Ahora veamos cosas algo más complicadas como layouts, variables, y herramientas.
Flexbox y Grid
Flexbox y Grid son métodos avanzados para crear layouts complejos y responsivos en CSS
Flexbox: Es ideal para distribuir y alinear elementos en una sola dirección (horizontal o vertical). Grid: Te permite crear layouts en dos dimensiones (filas y columnas).
Responsive design
Responsive design es diseñar tu página web para que se vea bien en diferentes tamaños de pantalla y dispositivos (por ejemplo, desktop y mobile)
Una forma es usando Media Queries, que permiten aplicar estilos según el ancho de la pantalla u otros factores.
@media (max-width: 991px) {
}Variables
Las variables en CSS te permiten guardar valores reutilizables para facilitar la gestión de estilos.
- Se definen usando
--nombre-variable. Ejemplo: - Luego, las puedes usar con la función
var(). Ejemplo:
¡Con las variables, tu código CSS será más limpio y fácil de mantener!
Herramientas útiles
Existen herramientas como preprocesadores (Sass, Less) y frameworks (Tailwind) que pueden ayudarte a escribir y gestionar CSS de manera más eficiente
Además de metodologías (como BEM) que establecen formatos y reglas para organizar los ficheros CSS.
¡Bien hecho!
¡Ahora tienes las bases para comenzar a crear y estilizar páginas web con CSS!
