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
font-size = Dimensión de la letra
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;
}
Paso de parámetros para cada una de las propiedades:
La propiedad font-family
espera recibir como valor el nombre exacto de la tipografía.
Ejemplo:
Arial, Times New Roman (Creo que es la que viene por defecto), Helvetica, Verdana...
En cuanto a las propiedades color
y background–color
, estas esperan recibir como parámetro el color para aplicarselo a la fuente y el fondo seleccionados. Dicho valor se puede pasar de tres formas:
- Nombre del color en inglés (black, green, pink, blue...)
- El color en hexadecimal (#33ff6e, #a233ff...)
- El color como RGB (rgb(202,202,72))
Por último, la propiedad font-size
puede recibir el parámetro de varias formas:
Con un grupo de palabras clave (xx-small
, x-small
, small
, medium
, large
, x-large
, xx-large
) de dimensión absoluta en relación al que determina el usuario como tamaño por defecto (que es medium
)
Por porcentaje, de la forma: h1 { font-size: 250% }
. Respecto a esta forma de pasar un valor es aconsejable evitar el uso de valores que no sean relativos al tamaño por defecto definido por el usuario, tales como longitud absoluta en unidades distintas a em
o ex
. Sin embargo, si hay que usar ese tipo de valores, es preferible utilizar unidades px
(píxel), ya que su significado no varía en función de las características del sistema operativo (casi siempre erróneas) como la resolución del monitor.
Por cantidad de píxeles de la forma:
h1 { font-size: 16px;} /* Ajusta el texto incluido en h1 a 16px */
Implementación de estilo en HTML
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>Proyecto de deandrea.franco</title>
<style>
body {
background-color: darkgrey;
}
h1{
color: white;
font-family: Algerian;
}
p{
color: lime;
font-family: Helvetica;
font-size: 120px;
}
</style>
</head>
<body>
<h1>Este es el sitio web de deandrea.franco</h1>
<p>Mi primera imagen</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>Proyecto de deandrea.franco</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<h1>Este es el sitio web de deandrea.franco</h1>
<p>Mi primera imagen</p>
</body>
</html>
style.css
body {
background-color: darkgrey;
}
h1 {
color: white;
font-family: Algerian;
}
p {
color: lime;
font-family: Helvetica;
font-size: 120px;
}
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: darkgrey;
}
h1 {
color: white;
font-family: Algerian;
}
p {
color: lime;
font-family: Helvetica;
font-size: 120px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Proyecto de deandrea.franco</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<h1>Este es el sitio web de deandrea.franco</h1>
<p>Mi primera imagen</p>
</body>
</html>