Querrás que tu texto HTML se vea bien por muchas razones. HTML le brinda la opción de editar el tamaño del texto, la fuente, el color, etc. según sus preferencias. Para hacerlo, deberá modificar su apariencia utilizando las propiedades de color y tamaño de fuente de CSS. Este artículo le proporcionará dos métodos sobre cómo hacer que sus textos HTML se vean bien.
Método 1: usar un atributo de estilo en línea
Con las propiedades de color y tamaño de fuente, puede modificar el color y el tamaño de su texto desde dentro de su etiqueta. Esto se conoce como CSS en línea. El color, la fuente, el tamaño y otros estilos se pueden aplicar a un elemento mediante el atributo de estilo HTML. CSS (hojas de estilo en cascada) es un lenguaje de hojas de estilo para describir la apariencia de un documento creado en un lenguaje de marcado como HTML. Aquí le mostraremos cómo usar algunas de las propiedades CSS más comunes.
- El color del texto está determinado por el atributo de color CSS.
- El atributo de tamaño de fuente en CSS determina el tamaño del texto que se mostrará.
El atributo de estilo se puede utilizar para cambiar la apariencia de un elemento HTML. Esta es una propiedad de CSS. La sintaxis para el atributo de estilo HTML es como se muestra en:
<tagname style="property:value;">
La etiqueta <style> se utiliza para definir la información de estilo (CSS) de un artículo. Usted declara cómo deben mostrarse los componentes HTML en un navegador utilizando el elemento style>.
Atributos: hay dos atributos en esta etiqueta, que se enumeran a continuación:
- media: Indica el medio/dispositivo para el cual el recurso de medios es más adecuado.
- type : Aquí se proporciona el tipo de medio de la etiqueta <style>.
El <style> también funciona bien con atributos globales y atributos de eventos.
Ejemplo: Usando la etiqueta <style> para acceder al elemento HTML, este ejemplo muestra cómo cambiar el color del texto.
HTML
<!DOCTYPE html> <html> <head> <title>Font Color</title> </head> <body> <h1 style="color:green;">Hello GeeksforGeeks.</h1> <h2 style="color:green;">Hello GeeksforGeeks.</h2> <h3 style="color:green;">Hello GeeksforGeeks.</h3> <p style="color:green;">Hello GeeksforGeeks.</p> </body> </html>
Producción:
La propiedad font-size en CSS determina el tamaño del texto en un elemento HTML.
Ejemplo: Usando la etiqueta <style> para acceder al elemento HTML, este ejemplo muestra cómo cambiar el tamaño del texto.
HTML
<!DOCTYPE html> <html> <head> <title>Font Color</title> </head> <body> <h1 style="font-size:500%;">This is GeeksforGeeks.</h1> <p style="font-size:300%;">This is GeeksforGeeks.</p> </body> </html>
Salida :
Combinando los dos códigos anteriores, obtenemos:
HTML
<!DOCTYPE html> <html> <head> <title>Font Color</title> </head> <body> <h1 style="font-size:300%; color:green;"> This is GeeksforGeeks. </h1> <h2 style="color:green;">Hello GeeksforGeeks.</h2> <h3 style="color:green;">Hello GeeksforGeeks.</h3> <p style="color:green;">Hello GeeksforGeeks.</p> </body> </html>
Producción:
Método 2: Uso de CSS interno:
Si una sola página HTML tiene un estilo distinto, se puede usar una hoja de estilo interna. El estilo interno se define dentro de la etiqueta <style> de la sección principal.
Sintaxis:
<style>
h1 {
property-name=property: value;
}
</style>
Ejemplo: El siguiente ejemplo te lo hará entender mejor:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
font-size: 50px;
}
</style>
</head>
<body>
<h1>This is GeeksforGeeks.</h1>
<p>This is GeeksforGeeks.</p>
</body>
</html>
Salida :
Otra forma de cambiar el tamaño y el color de la fuente es usando la etiqueta <font> . Aunque se descartó, la etiqueta HTML <font> todavía se puede usar y algunos servicios web la requieren. El atributo de cara, que describe la fuente que se utilizará, debe incluirse cuando se utiliza la etiqueta FONT.
Sintaxis:
<font attribute="value"> Content </font>
Ejemplo: Echa un vistazo al siguiente ejemplo.
HTML
<!Doctype Html> <Html> <Head> <Title> </Title> </Head> <Body> <font color="green"> <font size="7"> Welcome to GeeksforGeeks </font> <br> </font> <font color="black"> Hi this is GeeksforGeeks learning. <br> </font> </Body> </Html>
Producción:
