¿Quieres hacer que tu sitio web luzca más profesional? ¿Quieres añadir un poco de estilo a tus páginas? ¡Entonces no te puedes perder este artículo! Aquí encontrarás todo lo que necesitas saber sobre cómo implementar CSS en tus páginas web y mejorar su apariencia. Prepárate para darle un aspecto increíble a tu sitio con nuestros consejos e instrucciones fáciles de seguir. ¡Comencemos juntos este viaje al mundo del diseño web!
HTML es limitado cuando se trata de la apariencia de sus elementos. Si está tratando de aplicar una apariencia agradable a sus páginas web, entonces necesitará aprovechar CSS. CSS significa Hojas de estilo en cascada, y su objetivo principal es permitir que los desarrolladores web aplicar estilos en sus páginas web.
Con CSS, puedes especificar una variedad de propiedades para un elemento HTML dado. Los estilos se pueden declarar de tres maneras: en línea, internoy/o externo. Con CSS, eres no limitado para aplicar estilos de una 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 los estilos es el siguiente: externo –> interno –> en línea. 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
Se puede usar un estilo en línea si se va a aplicar un estilo único a una sola aparición de un elemento. Para usar estilos en línea, use el style atributo en la etiqueta correspondiente. El style El atributo puede contener cualquier propiedad CSS. A continuación se 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
Se puede utilizar una hoja de estilo interna 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: black;
}
p {
color: yellow;
}
</style>
</head>Hoja de estilo externa
Una hoja de estilo externa se utiliza cuando el 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 pagina web debe vincular a la hoja de estilo usando el <link> elemento. El <link> elemento se coloca dentro de la <head> sección de las páginas web. Aquí tienes 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/how-to-use-css-tutorial-guide/style.css" />
</head>En lugar de almacenar los estilos en cada página, guarda la información de estilo en un archivo central. Aquí hay un ejemplo del contenido almacenado en un archivo CSS.
Guarde la hoja de estilo como .css archivo. Guarde el archivo en un locacion central. Este puede ser el carpeta raíz de su sitio web. Si planea tener más de un archivo CSS, puede organizar varios archivos en una sola carpeta.
body {
background-color: yellow;
}
p {
color: blue;
text-align: center;
font-family: “Century Gothic”, Verdana, serif;
}