1

Quiero hacer algo sencillo, poner un tipo de letra, color y altura dentro de una etiqueta de un documento HTML. El color va bien, pero no me toma el resto.

<h1 style="color:red";>Mi primera imagen</h1>

Ese ejemplo si me lo toma, pero no el tamaño y la tipografia.

Quedaría así todo el documento:

<!DOCTYPE html>
    <html lang="en" dir="ltr">
    <head>
    <meta charset="utf-8">
    <title></title>
    </head>
    <body>
    <h1 style="color:red";>Mi primera imagen</h1>
    <img src="https://ciudaddemendoza.gob.ar/wp- 
    content/uploads/2020/07/3203f2c6-d392-488f-bc6c-424637091393-1170x630.jpeg" 
    alt="Esto es el logo de portrero digital">
    </body>
    </html>

Si me pueden ayudar se los agradezco, el estilo tiene que estar dentro de la etiqueta. Gracias.

3
  • 3
    Añade tu código por favor, de otro modo poco o nada podemos hacer
    – user128299
    Commented el 2 ago. 2020 a las 19:56
  • 1
    solo es un esqueleto de html ahora lo agrego
    – fedo.dev
    Commented el 2 ago. 2020 a las 20:08
  • 2
    Agrega como tratas de darle tamaño y tipo de fuente
    – user128299
    Commented el 2 ago. 2020 a las 20:13

2 respuestas 2

3

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 colory 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:

  1. Nombre del color en inglés (black, green, pink, blue...)
  2. El color en hexadecimal (#33ff6e, #a233ff...)
  3. El color como RGB (rgb(202,202,72))

Por último, la propiedad font-sizepuede recibir el parámetro de varias formas:

  1. 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)

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

  3. 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:

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

2
  • 2
    Genial muchas gracias si me fue bien asi, yo estaba tratando de poner el estilo en la misma linea de la etiqueta
    – fedo.dev
    Commented el 2 ago. 2020 a las 20:40
  • 1
    De nada. Como recomendación personal, en la medida de lo posible trata de implementar programación modular en todos tus proyectos. Saludos Commented el 2 ago. 2020 a las 20:42
1

el color va bien pero no me toma el resto

Cuando añades solo una característica a la propiedad style de una etiqueta, no es necesario el uso del punto y coma (;).

<h1 style="color: red">Header</h1>

ese ejemplo si me lo toma, pero no el tamaño y la tipografia.

Sin embargo, cuando son varias características si que es necesario. Esto pasa debido a que los comillas del valor de style son equivalentes a los corchetes en un archivo .css.

<h1 style="color: red; font-family: Arial; font-size: 20px;">Header</h1>

Cada característica (al ser varias), ocupa ser se separada por punto y coma (;) de otra. Las características tienen que estar todas dentro de las misma comillas. Como dije antes su equivalente es

h1 {
    color: red;
    font-family: Arial;
    font-size: 20px;
}
<h1>Header</h1>

Por lo tanto, se puede decir que la propiedad style es CSS incrustado en el documento.

1
  • exactamente esto es lo que estaba buscando muchas gracias <h1 style="color: red; font-family: Arial; font-size: 20px;">Header</h1>
    – fedo.dev
    Commented el 2 ago. 2020 a las 21:18

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.