CSS BASICO
¿Qué es CSS?
CSS (Cascading Style Sheets) es el lenguaje que te permite darle estilo a tus
páginas web. Imagina que HTML es el esqueleto de tu sitio, mientras que CSS le
da la piel, el color y la forma. Antes, veamos como utilizar CSS para nuestros sitios
HTML.
Primero necesitamos establecer la relación entre nuestro archivo HTML y CSS
utilizando la etiqueta <link> y sus atributos rel y href
En este ejemplo, la etiqueta <link> va dentro de la etiqueta <head> y utiliza dos
atributos : el atributo rel es siempre el mismo y lleva de valor la palabra
"stylesheet" mientras que el atributo href debe tener la ubicación del archivo de
CSS que queremos ejecutar.
Sintaxis Básica
CSS BASICO 1
El código CSS se escribe en bloques que contienen:
Selector: Define a qué elementos HTML se aplica el estilo.
Declaraciones: Las propiedades CSS que quieres aplicar, seguidas de dos
puntos y su valor.
Punto y coma: Separa cada declaración.
En el ejemplo anterior, utilizamos CSS para cambiar de color el texto en pantalla.
En este caso :
CSS BASICO 2
p: Es el selector y hace referencia al nombre de la etiqueta <p> , es decir que
estaria aplicando a todas esas etiquetas
{…}: Es el bloque de propiedades para modificar del selector
color: Es el nombre de una propiedad de CSS que se usa para cambiar el
color de la tipografia de un elemento
red: Es el nombre de un color predefinido
Tipos de Selectores
Selector Universal: * selecciona todos los elementos HTML.
Selector por Etiqueta: etiqueta selecciona todos los elementos con esa
etiqueta (e.g., p , h1 ).
Selector por ID: #id selecciona el elemento con ese atributo ID único
(e.g., #titulo-principal ).
Selector por Clase: .clase selecciona todos los elementos con ese atributo de
clase (e.g., .boton ).
Selectores Descendientes: padre > hijo selecciona elementos "hijo" dentro de
un "padre" (e.g., ul > li ).
Propiedades Básicas
Color: color define el color del texto. background-color define el color de fondo.
Fuente: font-family establece la familia de fuentes, font-size el tamaño y font-
weight el grosor.
Margen: margin agrega espacio alrededor del elemento.
Relleno: padding agrega espacio dentro del borde del elemento.
Borde: border define el estilo, grosor y color del borde.
Ancho: width establece el ancho del elemento.
CSS BASICO 3
Alto: height establece la altura del elemento.
Modelo de Cajas
Cada elemento HTML se representa como una caja con:
Contenido: El texto o imagen dentro del elemento.
Relleno: El espacio entre el contenido y el borde.
Borde: La línea decorativa alrededor del contenido.
Margen: El espacio alrededor del borde.
CSS BASICO 4
Usualmente utilizamos este diagrama para calcular el tamaño real que esta
ocupando una etiqueta en particular.
Etiquetas de Línea y Bloque
Etiquetas de Bloque: Crean nuevas líneas y ocupan todo el ancho disponible
(e.g., <div> , <h1> ).
Etiquetas de Línea: No crean nuevas líneas y solo ocupan el ancho necesario
(e.g., <span> , <a> ).
Flexbox
Flexbox es un módulo CSS que te permite crear diseños de página flexibles y
responsivos.
Contenedor Flex: Se define con la propiedad display: flex .
Elementos Flex: Los elementos dentro del contenedor se convierten en
elementos flex.
Propiedades Flex: Permiten distribuir el espacio, alinear elementos y más.
CSS BASICO 5
Recuerda
CSS es un lenguaje profundo con muchas más propiedades y posibilidades.
Existen herramientas y frameworks para facilitar la escritura de código CSS.
La práctica te ayudará a crear diseños web increíbles con CSS.
CSS BASICO 6
