¿Quieres saber cómo darle un toque único y personal a tu sitio web? ¡Tenemos la solución! En este artículo te mostraremos los diferentes estilos HTML que puedes utilizar para darle un aspecto más atractivo a tu sitio y destacarlo del resto. Descubre cómo personalizar y mejorar la apariencia de tu página web con los estilos HTML. ¡No te lo pierdas!
HTML está limitado en lo que respecta a la apariencia de sus elementos. Si está tratando de aplicar una apariencia agradable a sus páginas web, necesitará aprovechar CSS.
CSS significa Hojas de estilo en cascaday su objetivo principal es permitir que los desarrolladores web apliquen estilos en sus páginas web.
Con CSS, puede especificar una variedad de propiedades para un elemento HTML determinado.
Los estilos se pueden declarar en tres maneras:
Con CSS, no está limitado a aplicar estilos de una sola manera. Por ejemplo, es posible que desee aplicar un estilo globalmente a todos sus hipervínculos, por lo que usaría una hoja de estilo externa. Sin embargo, en una página específica, es posible que tenga un hipervínculo al que desee aplicar un estilo diferente.
En esa etiqueta HTML, puede aplicar un estilo en línea. El orden de aplicación de estilos es como sigue: external --> internal --> inline. Si aplica la misma propiedad en un estilo externo y aplica una propiedad diferente en el interno y/o en línea, el en línea tendrá prioridad.
Estilos en línea
Un estilo en línea se puede utilizar si se va a aplicar un estilo único a una única aparición de un elemento. Para usar estilos en línea, use el atributo de estilo en la etiqueta correspondiente. El atributo de estilo puede contener cualquier propiedad CSS.
La siguiente ejemplo muestra cómo cambiar el color y subrayar el texto:
<span style="color:red;text-decoration:underline;">
Apply style to this text.
</span>Hoja de estilo interna
Un hoja de estilo interna se puede usar si una sola página web tiene un estilo único. Los estilos internos se definen en el <head> sección de una página HTML, utilizando el <style> etiqueta.
Aquí hay un ejemplo:
<head>
<style type="text/css">
body {
background-color:blue;
}
p {
color:white;
}
</style>
</head>Hoja de estilo externa
Un hoja de estilo externa se utiliza cuando los estilos deben aplicarse a muchas páginas. Con una hoja de estilo externa, puede cambiar la apariencia de un sitio web completo cambiando un archivo.
Cada página web debe vincular a la hoja de estilo utilizando el <link> elemento. El <link> elemento se coloca dentro de la <head> sección de las páginas web.
Aquí hay un ejemplo del código que colocas en cada una de tus páginas:
<head>
<link rel="stylesheet" type="text/css" href="https://www.itgeared.com/html-apply-css-styles/style.css" />
</head>En lugar de almacenar los estilos en cada página, guarda la información de estilo en un archivo central. Guarde la hoja de estilo como .css archivo.
