Previamente en esta serie:
- En la primera parte empecé a escribir los códigos HTML y CSS de la página web que muestra un artículo con su título y su imagen.
- Además, le asigné un tipo de letra (de Google Fonts) para todo el documento.
Antes de empezar con los pasos que tenía previstos para esta segunda parte, borré el contenido del archivo estilos.css (que hasta el momento, solo definía la tipografía general de la página y el ancho de la imagen).
Esto porque, antes de empezar a escribir las reglas de estilo, conviene resetear los estilos predefinidos de los navegadores para tener más posibilidades de que la apariencia que definamos con nuestras hojas de estilo sea consistente, sin importar el navegador desde el cual se visualice la página.
Para logra este reinicio de estilos hay varias opciones (como normalize.css, entre otras). Yo utilicé, como recomienda Kevin Powell, el CSS Reset de Andy Bell.
Así que copié y pegué ese código en un nuevo documento en blanco, lo guardé como andybellreset.css, y le eleminé la regla que estaba entre las líneas 8 y 20 (comentadas como /* Remove default margin */) y que eliminaba el margen a varios selectores. Luego, a la declaración de estilos que estaba en la línea 5 le agregué las líneas que a continuación se ven en rojo y le agregué al comentario inicial el texto coloreado en azul:
/* Box sizing rules and remove default margin and padding */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Remove list styles...
...
...
A este archivo andybellreset.css lo vinculé en al archivo HTML, antes de las líneas que vinculaban a las GoogleFonts y a la hoja de estilos estilos.css, como se ve coloreado en azul en el primer código que se muestra en la próxima sección.
Propiedades personalizadas CSS
Entonces sí, para empezar “oficialmente” esta segunda parte, quería definir los colores para la página. Pero también quería que, llegado el caso, fuera sencillo cambiarlos por otros, ya que la idea final de este proceso es armar una estructura básica reutilizable en diferentes proyectos.
Y lo mismo con las tipografías.
Para esto, las propiedades personalizadas CSS son muy prácticas.
Con respecto a las tipografías, y siguiendo las clásicas recomendaciones de no usar en un mismo proyecto más de dos familias tipográficas y que una sea con serifa y la otra sin, fui a Google Fonts y elegí (además de la Sarabun que había elegido en la parte anterior) la fuente Volkhov, copié el código que me proporcionaba Google Fonts y lo pegué dentro del <head> del código HTML (como se muestra en rojo a continuación), sustituyendo las 3 líneas de <link ...> que había pegado en la parte anterior:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sitio web básico</title>
<link type="text/css" rel="stylesheet" href="andybellreset.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,400;0,700;1,400;1,700&family=Volkhov:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="estilos.css">
</head>
<body>
<header> ... </header>
<main> ... </main>
<footer>
</footer>
</body>
</html>También elegí algunos colores de prueba (en realidad los copié del ejemplo con el que trabaja Kevin Powell en su serie Build a responsive website with HTML & CSS):
- color principal: #242c51
- color secundario: #f3603b
- color de los textos: #1c1e25
- color de fondo: #fff0ede
El selector dentro del cuál se declaran las propiedades personalizadas define el ámbito en el que éstas se pueden utilizar. Así que, para que queden disponibles globalmente para el documento HTML se las puede definir en la pseudo-clase :root. Además, el nombre que se le da a cada clase personalizada debe comenzar con dos guiones.
Así que al archivo estilos.css, que estaba vacío, le agregué las siguientes líneas (en azul se muestran las declaraciones de las propiedades personalizadas:
:root {
--color-principal: #242c51;
--color-secundario: #f3603b;
--color-texto-base: #1c1e25;
--color-de-fondo: #fff0ed;
--tipografia-con-serifa: 'Volkhov';
--tipografia-sin-serifa: 'Sarabun';
}
* {
font-family: var(--tipografia-sin-serifa), sans-serif;
}
body {
color: var(--color-texto-base);
background-color: var(--color-de-fondo);
}
h1, h2, h3 {
color: var(--color-principal);
font-family: var(--tipografia-con-serifa), serif;
font-weight: bold;
}
Y, para aplicar las propiedades personalizadas, se usa la función var(), como se ve en las líneas resaltadas con rojo: a los selectores h1, h2 y h3 les asigné la propiedad personalizada color principal y al selector body le asigné como background-color la propiedad personalizada color de fondo y como color la propiedad personalizada color texto base.
Quizás no sea la gran diferencia pero en la siguiente imagen se ve, a la izquieda, la apariencia de la página resultante de la primera parte de esta serie y, a la derecha, la resultante luego de vincularle la hoja de estilos que reinicia los estilos y de agregar al código del archivo estilos.css las propiedades personalizadas descriptas en este apartado:
Agregar contenidos a la cabecera y al pie de la página
En el pie de página, de momento, solo colocaría el logotipo de HTML5.
Para colocar ese logotipo (y muchos otros logos e íconos que pudiera necesitar) la opción más popular es, probablemente, el servicio de Font Awesome que, al estilo de Google Fonts, permite vincularlo a la página web para así tener disponibles una gran cantidad de íconos.
Pero, en su lugar, luego de ver este video de Ginormous Dev, decidí probar con Ionicons.
Para poder utilizarlos hay que agregar en el código HTML, antes de la etiqueta de cierre del body, las siguientes dos líneas (resaltadas con rojo):
<!DOCTYPE html>
<html lang="es">
<head> ... </head>
<body>
<header> ... </header>
<main> ... </main>
<footer>
<ion-icon size="large" name="logo-html5"></ion-icon>
</footer>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>Luego, busqué el icono que quería utilizar (yo escribí “HTML”) en la barra de búsqueda de ionicons y el sitio me proporcionó el código necesario para agregar a la sección <footer> del archivo HTML (como se ve, resaltado en azul, en el código sobre estas líneas).
Para el formato agregué en el archivo estilos.css, lo siguiente:
...
footer {
color: var(--color-secundario);
background-color: var(--color-principal);
text-align: center;
padding: 10px;
};
Para la cabecera, en principio, solo colocaría una imagen que hiciera las veces de logotipo del sitio y quería que fuera un archivo SVG. Así que busqué en el sitio unDraw entre los muchos disponibles para descargar y elegí el que se llama undraw_designer_re_5v95.svg (se encuentra escribiendo “designer” en la barra de búsqueda) y lo guardé en el directorio images.
Lo coloqué en la cabecera escribiendo el código que a continuación se ve resaltado en rojo en el <header> del archivo HTML:
<!DOCTYPE html>
<html lang="es">
<head> ... </head>
<body>
<header>
<a href="/" class="logo-principal">
<img src="images/undraw_designer_re_5v95.svg" alt="">
</a>
<nav>
</nav>
</header>
<main> ... </main>
<footer> ... </footer>
<script type="...> ... </script>
</body>
</html>
Y para darle formato a la cabecera y a la etiqueta <img> dentro de la cabecera (que es la que contiene el archivo SVG) agregué en el archivo estilos.css las líneas que se muestran a continuación resaltadas en rojo:
:root { ... }
* { ... }
body { ... }
header {
background-color: var(--color-principal);
padding: 20px;
}
header img {
width: 35%;
}
h1, h2, h3 { ... }
footer { ...
}Con lo hecho en este apartado la página en una ventana de navegador de un ancho de alrededor de 450 px se veía así:
Vínculo al validador del código HTML
Para terminar esta segunda parte de la serie, en la sección <footer> del código HTML, le agregué un vínculo al validador HTML de la W3C.
Para ello incluí en el código HTML las líneas que se muestran a continuación en rojo:
<!DOCTYPE html>
<html lang="es">
<head> ... </head>
<body>
<header> ... </header>
<main> ... </main>
<footer>
<a href="https://validator.w3.org/">
<ion-icon size="large" name="logo-html5"></ion-icon>
</a>
</footer>
<script type="...> ... </script>
</body>
</html>Y para que el logo de HTML5 del pie de página no tome el color azul o púrpura predefinido de los vínculos (sin visitar y visitado, respectivamente) le agregué lo que a continuación se ve en azul en la hoja de estilos (lo hice antes de la regla del selector footer { ...
}, porque poniéndolo después no funcionaba).
* { ... }
:root { ... }
body { ...
}
header { ... }
header img { ... }
h1, h2, h3 { ... }
footer a, footer a:visited {
color: var(--color-secundario);
}
footer { ...
}
En la próxima parte de esta serie voy a contar los pasos que seguí para:
- Crear los estilos de algunos de los elementos del artículo: el texto de párrafo, los títulos, la “bajada”, el autor, la fecha, los subtítulos y los pies de fotos.
- Agregar a la cabecera el nombre del sitio web y el icono del menú cuando está acoplado para pantallas pequeñas.
No hay comentarios.:
Publicar un comentario
Lo que escriba a continuación será revisado antes de publicarse.
Gracias por tus comentarios.