CSS en 1 minuto: introducción a las hojas de estilo en cascada
¿Qué es CSS? ¿Cuál es su sintaxis? ¿Cómo dar estilos a un HTML? ¿Cómo se escriben comentarios en CSS? Mira a continuación un ejemplo en 1 minuto.
¿Qué es CSS?
Cascading Styles Sheets son hojas de estilo en cascada que nos permiten cambiar el diseño de una página HTML. Los archivos HTML están constituidos por etiquetas, a ésas etiquetas se les da un estilo (color, tamaño, ubicación, etc) a través de las hojas de estilo. Si deseas información sobre las etiquetas HTML lee el siguiente artículo: HTML5 en 5 minutos: Etiquetas esenciales
Sintaxis de CSS
Un archivo .css tiene un conjunto de las siguientes declaraciones
elemento{
propiedad: valor;
}
Donde elemento es cualquier elemento HTML (como P, H1, DIV, TABLE, etc).
Propiedad se refiere a cualquier propiedad de estilo como color, color de fondo, familia de la fuente, grosor del borde, etc.
Valor es el valor de la propiedad, por ejemplo, si estamos trabajando con el color, el valor podría ser RED, o #FF0000, etc.
El estilo es importante
Cómo dar estilos a un HTML
La forma más extendida de dar estilos a un HTML es a través de la etiqueta
<LINK REL= “stylesheet” HREF=“hoja_de_estilo.css”>
Ésta etiqueta se coloca en la sección <HEAD> del HTML al que se quiera dar estilo, y el archivo “hoja_de_estilo” puede estar en cualquier ubicación, por ejemplo, en el mismo directorio que el HTML, o dentro de un subdirectorio.
Ejemplo de un archivo HTML enlazado con una hoja de estilos
El archivo HTML es el siguiente, solo contiene las etiquetas esenciales de la cabecera, el link de enlace a la hoja de estilos y una etiqueta header a la que le daremos estilo
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Curso en linea</title> <link rel="stylesheet" href="estilo.css"> </head> <body> <header></header> </body> </html>
Y el archivo .css con el que daremos estilo únicamente a la etiqueta header será el siguiente
header{
width: 100%;
height: 80px;
background: #1A232F;
}
Le estamos diciendo que a la etiqueta header tendrá un ancho del 100%, una altura de 80 pixeles y un color de fondo oscuro, puedes variar cualquiera de estos valores. El resultado será como el siguiente.
Archivo HTML con estilos
Como observación te comento que para escribir comentarios dentro de un archivo css se utilizan los símbolos /* y */, todo lo que esté dentro de esos símbolos no se considerará código sino simples comentarios.
En ejemplos posteriores estaremos utilizando el método aquí empleado para enlazar un archivo HTML con hojas de estilo. Continúa el curso, estaremos viendo entre otros temas, el uso de Normalize, los prefijos, los selectores id, de clase, adyacente, hermanos, medidas relativas, absolutas, porcentuales, etc.
Recurso web sugerido: Palettr es un generador de paletas de colores, únicamente le das un concepto o tema y te sugiere los colores a utilizar.
Tu comentario
