Introducción a CSS: El modelo de cascada
Introducción al modelo de cascada con CSS para aplicar estilos y diseño a nuestras diferentes paginas HTML.
Por Angel Villa
¿Qué es CSS y el modelo de cascada?
Si conoces HTML como el "esqueleto" o estructura de una pagina web entonces CSS es el motor que le brinda el diseño y estilo. Conocido como el modelo de cascada por su sintaxis que se interpreta de manera vertical por el navegador.
Reglas en CSS
Para controlar como se renderiza un elemento de la pagina mediante CSS, utilizamos reglas compuestas por un selector y un bloque de declaraciones como se observa en la imagen anterior.
-Los selectores indican a que elemento del HTML vamos a aplicar el estilo.
-Las declaraciones especifican una propiedad y el valor de esta, por ejemplo: backgroud-color:'red', indica que el color del fondo (propiedad) será rojo (valor).
Modelo de caja (Box Model)
El navegador interpreta cada elemento HTML como una caja compuesta por 4 capas concentricas:
Content: El texto o imagen dentro del elemento.
Padding: El espacio interno entre el contenido y el borde.
Border: La linea que envuelve el contenido y el relleno.
Margin: El espacio externo que separa los elementos de otros.
"Limpiar" los estilos
Por defecto el navegador tiende a sumar los espacios de los elementos, es decir si definimos un margin:5 y un padding:10, el navegador lo sumara como un espacio de 15px, por eso se debe "limpiar" el estilo por defecto del navegador, generalmente aplicando la siguiente regla:
1*{2 box-sizing:border-box;3 margin:0;4 padding:0;5}
De esta forma reiniciamos los estilos que aplica el navegador por encima de los aplicados por nuestro archivo.
Propiedades comunes en CSS
Tipografía y texto
font-family: Define la tipografia.
font-size: Define el tamaño del texto.
font-weight: Establece el grosor de la fuente.
color: Permite cambiar el color del texto.
text-align: Permite elegir la dirección hacia la que el texto se alinea.
Dimensiones
width/height: Ancho y alto de un elemento.
max-width: Limita el crecimiento de un elemento.
padding: Espacio interno.
margin: Espacio externo.
Estilo visual
backgroud-color: Permite definir un color para el fondo de la pagina.
border: Define un ancho de borde, estilo y color.
border-radius: Redondea las esquinas del borde.
box-shadow: Añade sombras sutiles a un elemento para dar "profundidad".
Insertar estilo CSS en nuestra pagina
Existen dos maneras de lograrlo, la primera es utilizando la etiqueta HTML: <style> </style>
Dentro de esta etiqueta podemos escribir CSS directamente:
y la otra manera es importar un archivo de .css en nuestra etiqueta head con la etiqueta link:
<link rel="stylesheet" href="estilos.css">
Finalmente solo deberíamos abrir nuestro archivo HTML y el estilo se cargara automáticamente sin importar o configurar algo extra.