0

Hola Comunidad!

Estoy aprendiendo HTML5 pero me gustaría cambiar un poco la apariencia simple que tiene. He investigado en internet y he visto que hay que usar un lenguaje llamado CSS pero no sé como se usa y como implementarlo en el archivo HTML. Si me pudieseís echar un cable estaría muy agradecido. Os dejo un pequeño ejemplo de código HTML por si me podéis ayudar en algo. Me gustaría poner si puede ser el color negro en la página, tipo dark mode y las letras de algún color que se vea o si puede ser algún tipo de letra llamativo. Igualmente me encuentro con el problema de que los párrafos que escribo con la etiqueta <p> no tiene un doble espaciado como me gustaría. Gracias por la ayuda

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Web de Juan Carlos</title>
      </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>Actualmente me encuentro aprendiendo HTML5</p>
      </body>
    </html>

3
  • 1
    Tu pregunta es muy amplia, CSS es un lenguaje con demasiado contenido, te recomiendo ir aprendiendolo, revisa este enlace y conforme avances podrás ir agregando los estilos deseados
    – user128299
    Commented el 20 jul. 2020 a las 16:22
  • De igual modo, al igual que @BetaM te recomiendo que, vayas aprendiéndolo poco a poco, ya que tiene bastante contenido y personalmente, creo que es bastante útil. Saludos Commented el 20 jul. 2020 a las 17:05
  • Muchas gracias por las sugerencias. Usaré el enlace proporcionado para poder aprender sobre este lenguaje y poder personalizar un poco más los archivos HTML. Gracias Commented el 20 jul. 2020 a las 17:20

1 respuesta 1

1

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:

  1. Implementar el estilo en el propio archivo HTML haciendo uso de la etiqueta <style>

  2. 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.

2
  • 1
    Muchas gracias por la ayuda. Tengo una duda, ¿Si hago: p { color: pink } se cambiaría el color del párrafo? Commented el 20 jul. 2020 a las 17:27
  • 1
    En efecto, con esa instrucción puedes cambiar el color del párrafo a rosa. Saludos Commented el 25 jul. 2020 a las 19:35

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.