Para poder añadir estilos a un archivo HTML es necesario hacer uso de CSS.
CSS o Hoja de estilos en cascada hace uso de propiedades para modificar los estilos del HTML. Lo que buscas son estilos muy simples. Las propiedades que permiten esta modificación son bastante autodescriptibles. Existen bastantes propiedades que permiten modificar por completo el HTML.
A continuación, para tu propósito vamos hacer uso de las siguientes propiedades:
font-family = Tipo de letra (Fuente)
color = Color del texto
background – color = Color de fondo
Las propiedades de CSS se construyen referenciando a la etiqueta HTML que queramos aplicar el estilo. Por ejemplo, si queremos modificar el contenido de la etiqueta <p>
se modifica de la siguiente forma:
p {
propiedad1: parámetro;
propiedad2: parámetro;
}
En tu código puedes implementar CSS de dos formas:
Implementar el estilo en el propio archivo HTML haciendo uso de la etiqueta <style>
Implementar los estilos en un archivo con extensión .css
aparte e incrustarlo en el archivo con extensión .html
Uso de la etiqueta <style>
en el archivo .html
:
Haciendo uso de la etiqueta <style>
en el head del archivo HTML podemos implementar los estilos necesarios para nuestro archivo. En tu caso, sería de la siguiente forma:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web de Juan Carlos</title>
<style>
body {
background-color: black;
color: white;
font-family: Helvetica;
}
h1 {
color: red;
font-family: Algerian;
}
</style>
</head>
<body>
<h1>Este es el sitio web de Juan Carlos</h1>
<p>Hola a tod@s. Mi nombre es Juan Carlos y este va a ser mi sitio web personal</p>
<p><br>Actualmente me encuentro aprendiendo HTML5</p>
</body>
</html>
Implementar los estilos en un archivo con extensión .css
aparte e incrustarlo en el archivo con extensión .html
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web de Juan Carlos</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<h1>Este es el sitio web de Juan Carlos</h1>
<p>Hola a tod@s. Mi nombre es Juan Carlos y este va a ser mi sitio web personal</p>
<p><br>Actualmente me encuentro aprendiendo HTML5</p>
</body>
</html>
style.css
body {
background-color: black;
color: white;
font-family: Helvetica;
}
h1 {
color: red;
font-family: Algerian;
}
Para implementar el archivo con extensión .css
en el código HTML hacemos uso de la etiqueta <link>
la cual NO tiene etiqueta de cierre. Esta etiqueta tiene la forma:
<link rel="stylesheet" type="text/css" href="style.css"/>
Donde rel
es un atributo de HTML que describe la relación que mantiene el documento de destino con el documento presente (el que enlaza). Por otro lado, type
es una versión específica del elemento <input>
, que se usa para representar a un campo de entrada de texto. Por último, con el atributo href
indica la URL de un archivo. Es importante que se especifique el nombre concreto del archivo CSS a implementar, de lo contrario, el archivo referenciado será otro y los estilos pueden verse alterados.
Código completo reproducible:
body {
background-color: black;
color: white;
font-family: Helvetica;
}
h1 {
color: green;
font-family: Algerian;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web de Juan Carlos</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<h1>Este es el sitio web de Juan Carlos</h1>
<p>Hola a tod@s. Mi nombre es Juan Carlos y este va a ser mi sitio web personal</p>
<p><br>Actualmente me encuentro aprendiendo HTML5</p>
</body>
</html>
Si deseas que tú parráfo <p>
incluya un doble espaciado, equivalente a un enter
puedes hacer uso de la etiqueta <br>
en el párrafo que quieras que se aprecie dicho cambio. Esta etiqueta NO tiene etiqueta de cierre.