1. Que es CSS
CSS por sus siglas en inglés (Cascading Style Sheets) “hojas de estilo en cascada” Es el lenguaje que define el estilo de un documento HTML, por lo tanto es el lenguaje con la cual controlaremos el diseño de nuestras páginas web o aplicación.
CSS es el segundo lenguaje más básico y esencial para crear páginas web. El primero sería HTML, con el que se define el contenido de la página. El segundo CSS, con el que se define la parte de la presentación, es decir, cómo deben mostrarse los elementos de la página, su posición, forma, espaciados, colores y en resumen, toda la parte estética.
La idea de CSS es la de utilizar el concepto de separación de Estructura de Contenido y Diseño Visual, intentando que los documentos HTML incluyan sólo información y datos, relacionados con el contenido, y todos los aspectos relacionados con el estilo (diseño, colores, formas, etc...) se encuentren en un documento CSS independiente.
2. Como se configura esa separación HTML y CSS?
index.html
Crear un archivo .html, desde donde llamaremos al documento CSS
style.css
Crear un archivo .css, donde escribiremos todo el código CSS que apunta a los elementos HTML
link:css
Abre tu index.html para enlazar con style.css y escribe link:css en vs code dentro del <head>, es decir, entre las etiquetas<head> y </head>, aparecera tal como ves:
<head>
<link rel="stylesheet" href="style.css">
</head> 3. Sintaxis Básica de CSS
Se considera sintaxis al orden y relación de los elementos que componen una correcta instrucción CSS así como las funciones que cumplen.
La estructura CSS se basa en reglas que tienen el siguiente formato:
De este modo podemos añadir varias caracterisicas o propiedades a la vez, solo necesitas escribirlos separados por punto y coma (;), así:
Ejemplo: “Titulo nivel 1 que sea color azul, con un tipo de letra Georgia y que el texto este centrado”
index.html
Soy el Titulo Nivel 1
<h1>Soy el Titulo Nivel 1</h1> <!--definimos el elemento en HTML-->style.css
/*Seleccionamos el elemento HTML*/
h1 {
color: blue; /*Color de letra rojo*/
font-family: Georgia; /*Tipo del letra */
text-align: center; /*Texto centrado */
}4. Propiedades Básicas que deberias conocer
Lista de lo que me parecen las propiedades más útiles para esta guia virtual:
Ejemplo Practico: Diseño Visual del Texto
Utilizaremos un primer ejercicio para crean una pagina web con las siguientes Caracteristicas:
index.html
Cien años de soledad
Fragmento Corto, 1967
“Muchos años después, frente al pelotón de fusilamiento, el coronel Aureliano Buendía había de recordar aquella tarde remota en que su padre lo llevó a conocer el hielo. Macondo era entonces una aldea de veinte casas de barro y cañabrava construidas a la orilla de un río de aguas diáfanas que se precipitaban por un lecho de piedras pulidas, blancas y enormes como huevos prehistóricos. El mundo era tan reciente, que muchas cosas carecían de nombre, y para mencionarlas había que señalarlas con el dedo. Todos los años, por el mes de marzo, una familia de gitanos desarrapados plantaba su carpa cerca de la aldea, y con un grande alboroto de pitos y timbales daban a conocer los nuevos inventos. Primero llevaron el imán. Un gitano corpulento de barba montaraz y manos de gorrión, que se presentó con el nombre de Melquíades, hizo una truculenta demostración pública de lo que él mismo llamaba la octava maravilla de los sabios alquimistas de Macedonia. Fue de casa en casa arrastrando dos lingotes metálicos, y todo el mundo se espantó al ver que…”
“ Cuando el pirata Francis Drake asaltó Riohacha, en el siglos XVI, la bisabuela de Úrsula Iguarán se asustó tanto con el toque de rebato y el estampido de los cañones, que perdió el control de los nervios y se sentó en un fogón encendido ”.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cien años de soledad</title>
<!--Enlace para llamar al archivos css -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Cien años de soledad</h1>
<h2>Fragmento Corto, 1967</h2>
<p>
“Muchos años después, frente al pelotón de fusilamiento, el coronel
Aureliano Buendía había de recordar aquella tarde remota en que su
padre lo llevó a conocer el hielo. Macondo era entonces una aldea de
veinte casas de barro y cañabrava construidas a la orilla de un río de
aguas diáfanas que se precipitaban por un lecho de piedras pulidas,
blancas y enormes como huevos prehistóricos. El mundo era tan
reciente, que muchas cosas carecían de nombre, y para mencionarlas
había que señalarlas con el dedo. Todos los años, por el mes de marzo,
una familia de gitanos desarrapados plantaba su carpa cerca de la
aldea, y con un grande alboroto de pitos y timbales daban a conocer los
nuevos inventos. Primero llevaron el imán. Un gitano corpulento de
barba montaraz y manos de gorrión, que se presentó con el nombre de
Melquíades, hizo una truculenta demostración pública de lo que él
mismo llamaba la octava maravilla de los sabios alquimistas de
Macedonia. Fue de casa en casa arrastrando dos lingotes metálicos, y
todo el mundo se espantó al ver que…”
</p>
<p>
“ Cuando el pirata Francis Drake asaltó Riohacha, en el siglos XVI, la
bisabuela de Úrsula Iguarán se asustó tanto con el toque de rebato y el
estampido de los cañones, que perdió el control de los nervios y se
sentó en un fogón encendido ”.
</p>
</body>
</html>style.css
/*Importación del tipo de letra Roboto de Google Fonts*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
/*Seleccionamos los elemento HTML*/
body{
background-color: #f7fafc; /*Fondo de color , color Gris claro*/
}
h1 {
color: orange; /*Color de letra naranja*/
font-family: 'Roboto', sans-serif; /*Tipo del letra Roboto*/
text-align: center; /*Texto centrado */
}
h2 {
color: gray; /*Color de letra gris*/
font-family: 'Roboto', sans-serif; /*Tipo del letra Roboto*/
}
p {
color: #38a169; /*Color de letra verde, color hexadecimal*/
font-family: 'Roboto', sans-serif; /*Tipo del letra Roboto*/
text-align: justify; /*Texto justificado */
}
Actividad #2. CSS3: Sintaxis básica CSS
Ahora que ya sabes el uso de CSS en HTML es el momento de que empieces a practicar, aunque no es nada difícil, practica para desarrollar la habilidad en el aprendizaje.
Te ha resultado util esta guia de aprendizaje ?
Que tal el contenido?