Introducción a CSS
Bienvenido, nuevamente, a mi sitio web, en donde te estoy dando una breve introducción al desarrollo web. En esta ocasión, vamos a empezar con CSS (de las siglas en inglés Cascade Style Sheet).
¿Qué es CSS?
CSS es un lenguaje de estilos, es decir, que vamos a poder incorporar colores, cuadros, dibujos, como queremos ordenar nuestra página, por ejemplo si queremos poner una serie de botones (los cuales colocaremos con HTML), CSS nos permite ponerles colores, animaciones, dibujos, si queremos que estén en una línea horizontal o vertical, y mucho más.
Para empezar, vamos a nuestro editor de código de preferencia, en mi caso VS Code, en el artículo anterior, vimos una breve introducción a que es un editor de código. Anteriormente, teníamos una carpeta abierta en nuestro editor, en la cual había un archivo “index.html”, ahora, vamos a crear otro archivo, haz clic derecho sobre el nombre de la carpeta de trabajo (en la barra de la izquierda) y “nuevo archivo” al cual llamaremos “styles.css”; guardamos. Dentro escribiremos esto:
body{
background-color: red;
color: white;
}
Vamos por partes, lo primero que vemos es que al principio dice “body”, esta es la etiqueta
HTML que queremos editar, como sabrás, en la estructura básica HTML, existe la etiqueta “
<body>”, en donde va el contenido de la página. Luego se abre y se cierran “{“ y “}”,
dentro
de estas llaves, se escriben las propiedades y las características que queremos añadir.
En este caso está “background-color” que como supondrás es para definir el fondo de la
página, seguido de dos puntos (“:”), y el valor que le queremos dar, en este caso “red”,
es decir, que el fondo de la página que estamos creando será rojo. Luego está “color”,
el cual determina el color de las letras, si añadís algún texto en el HTML, será de
color blanco.
Pero, si probás a abrir tu página, no verás ningún cambio, ¡todo sigue igual! Eso es
porque hay que vincular los dos archivos, para ello, ir a la etiqueta “<head>”
del HTML y escribir:
<link src=”./styles.css”>
Esta línea de código establece un vínculo (o link, en inglés) entre el HTML y el CSS, dentro de la etiqueta “ <link>” hay una atributo “src” que indica la ruta del archivo CSS, como en nuestro caso, el CSS, está en la misma carpeta que el HTML, basta con escribir “./styles.css”. Ahora sí, abrí tu página web y verás que hay cambios. Hay muchos más colores y propiedades CSS (entre colores hay “blue”, “green”, “yellow”, “black”, y los colores en inglés), también hay colores personalizables, pero para ello necesitas usar un código hexadecimal, la palabra parece complicada, pero es super fácil aprender a usarlos, te recomiendo que entres a google y busques “color picker” te saldrá una herramienta que te permite elegir un color, cuando tengas uno que te guste, copiá los números y letras que empiezan con un “#” (incluyendo el numeral) y pegalo en el lugar de la propiedad que quieras por ejemplo:
body{
color: #ff8996
}