¿Qué es CSS exactamente?<\/h2>
El CSS<\/a> (hojas de estilo en cascada) es un lenguaje de marcado que se encarga de la apariencia de las páginas web. Controla los colores, las fuentes y el diseño de los elementos de tu sitio web.<\/p> Este lenguaje de hojas de estilo también te permite añadir efectos o animaciones. Puedes utilizarlo para mostrar algunas animaciones CSS como los efectos de clic en los botones, los cargadores y los fondos animados.<\/p> Sin CSS, tu sitio web se verá como una simple página HTML<\/a>. Este es el aspecto que tendría Twitter<\/a> si desactiváramos su CSS:<\/p> Hay tres tipos de estilos CSS: interno, externo e inline. Vamos a desglosarlos.<\/p> El CSS interno o incrustado requiere que añadas la etiqueta <style><\/strong> en la sección <head><\/strong> de tu documento HTML.<\/p> Este estilo CSS es un método eficaz para dar estilo a una sola página. Sin embargo, utilizar este estilo para varias páginas requiere mucho tiempo, ya que es necesario poner reglas CSS en cada página de tu sitio web.<\/p> A continuación te explicamos cómo puedes utilizar el CSS interno:<\/p> Tu archivo HTML se verá así:<\/p> Con el CSS externo, enlazarás tus páginas web a un archivo .css externo, que puede ser creado con cualquier editor de texto de tu dispositivo (por ejemplo, Notepad++<\/a>).<\/p> Este tipo de CSS es un método más eficiente, especialmente para estilizar un sitio web grande. Al editar un archivo .css<\/strong>, puedes cambiar todo tu sitio de una sola vez.<\/p> Sigue estos pasos para utilizar CSS externo:<\/p> No olvides cambiar style.css<\/strong> por el nombre de tu archivo .css<\/strong>.<\/p> El CSS inline se utiliza para dar estilo a un elemento HTML específico. Para este tipo de estilo CSS, sólo tendrás que añadir el atributo style<\/strong> a cada etiqueta HTML, sin utilizar selectores.<\/p> Este tipo de CSS no es realmente recomendable, ya que cada etiqueta HTML debe ser estilizada individualmente. La gestión de tu sitio web puede resultar demasiado difícil si sólo utilizas CSS inline.<\/p> Sin embargo, el CSS inline en HTML puede ser útil en algunas situaciones. Por ejemplo, en los casos en los que no tienes acceso a archivos CSS o necesitas aplicar estilos para un solo elemento.<\/p> Veamos un ejemplo. Aquí añadimos un CSS inline a la etiqueta <p><\/strong> y <h1><\/strong>:<\/p> En este tutorial, has aprendido la diferencia entre los tres tipos de estilos CSS: interno, externo e inline. Veamos el resumen:<\/p> Entonces, ¿qué estilo CSS vas a utilizar? Compártelo con nosotros en la sección de comentarios a continuación.<\/p>\n","protected":false},"excerpt":{"rendered":" La principal diferencia entre el CSS inline y el CSS externo es que el CSS inline se procesa más rápido, ya que sólo requiere que el navegador descargue un archivo, mientras que el uso de CSS externo requerirá la descarga de archivos HTML y CSS por separado. En este tutorial, aprenderás la diferencia entre los […]<\/p>\n![\"Ejemplo](\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2021\/06\/twitter.png\")
<\/figure><\/div>Diferencia entre los estilos CSS Inline, Externo e Interno<\/h2>
CSS Interno<\/h3>
\n
<style type=\"text\/css\"><\/pre>\n<\/li>\n\n\n\n
body {
background-color: blue;
}
h1 {
color: red;
padding: 60px;
}<\/pre>\n<\/li>\n\n\n\n<\/style><\/pre>\n<\/li>\n<\/ol>
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: blue;
}
h1 {
color: red;
padding: 60px;
}
<\/style>
<\/head>
<body>
<h1>Tutoriales de Hostinger<\/h1>
<p>Esto es un párrafo<\/p>
<\/body>
<\/html><\/pre>Ventajas del CSS Interno:<\/h4>
\n
\n.class {
propiedad1 : valor1;
propiedad2 : valor2;
propiedad3 : valor3;
}
#id {
propiedad1 : valor1;
propiedad2 : valor2;
propiedad3 : valor3;
}<\/pre>\n<\/li>\n\n\n\nDesventajas del CSS Interno:<\/h4>
\n
CSS Externo<\/h3>
\n
.xleftcol {
float: left;
width: 33%;
background:#809900;
}
.xmiddlecol {
float: left;
width: 34%;
background:#eff2df;
}<\/pre>\n<\/li>\n\n\n\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"style.css\" \/><\/pre>\n<\/li>\n<\/ol>
Ventajas del CSS Externo:<\/h4>
\n
Desventajas del CSS Externo:<\/h4>
\n
CSS Inline<\/h3>
<!DOCTYPE html>
<html>
<body style=\"background-color:black;\">
<h1 style=\"color:white;padding:30px;\">Tutoriales de Hostinger<\/h1>
<p style=\"color:white;\">Esto es un párrafo.<\/p>
<\/body>
<\/html><\/pre>Ventajas del CSS Inline:<\/h4>
\n
Desventajas del CSS Inline:<\/h4>
\n
![\"\"](\"https:\/\/blog.hostinger.io\/co-tutoriales\/wp-content\/uploads\/sites\/40\/2023\/02\/ES-Web-hosting_in-text-banner-1024x300.png\")
<\/a><\/figure>Conclusión<\/h2>
\n