A lo largo de este artículo, te mostraremos la diferencia entre los tres tipos de estilos CSS: Interno, Externo e Inline. Además, vamos a ver sus ventajas y desventajas a la hora de emplear cada uno.
Ahora, explicaremos los tipos de estilos CSS. Pero primero, ¿Qué es un CSS?
El CSS (hojas de estilo en cascada) es un lenguaje de diseño gráfico que se encarga del aspecto de las páginas web. Maneja las fuentes, los colores y el diseño de los elementos de tu sitio. Básicamente, es como ven los visitantes a tu sitio web.
También, te permite agregar efectos y animaciones. Por ejemplo, los efectos de clic en los botones, fondos animados o los cargadores.
Si tu sitio no posee alguno de los tipos de estilos CSS, se visualizará como una simple página HTML.
Diferencia entre tipos de estilos CSS Inline, Externo e Interno
Veamos un poco de que se trata cada uno, sus diferencias y usos.
CSS Externo
Utilizando este estilo, puedes enlazar tus páginas a un archivo .css externo. El archivo puede ser creado con cualquier editor de texto, por ejemplo Notepad++.
A diferencia de los otros tipos de estilos CSS, si posees un sitio web grande, el método más eficiente para darle estilo es con este tipo de CSS. Ya que puedes modificar todo tu sitio web de una vez sola.
Sigue los siguientes pasos para usar CSS externo:
Genera un archivo .css con el editor de texto y añade lo siguiente:
.xleftcol {
float: left;
width: 33%;
background:#809900;
}
.xmiddlecol {
float: left;
width: 34%;
background:#eff2df;
}Después de la etiqueta <title>, en la sección <head> de tu documento HTML, debes añadir una referencia al archivo .css externo.
<link rel="stylesheet" type="text/css" href="style.css" />Recuerda poner style.css por el nombre de tu archivo .css.
Ventajas del CSS Externo:
- Tus archivos HTML van a tener una estructura mucho más limpia y de menos tamaño, ya que el código CSS está en un documento separado.
- Puedes emplear el mismo archivo .css para muchas páginas.
Desventajas del CSS Externo:
- Está la posibilidad de que las páginas no se visualicen correctamente hasta que cargue el CSS externo.
- Subir muchos archivos CSS podrías aumentar el tiempo de carga de tu sitio web.
CSS Interno
El CSS interno necesita que agregues la etiqueta <style> en la sección <head>, en el documento HTML.
El CSS interno es el método más eficaz para darle estilo a una sola página, pero si lo que necesitas es modificar varias, este método te costará mucho tiempo, ya que deberás introducir reglas CSS en cada una de las páginas.
Ahora, te explicaremos como utilizar el CSS interno:
- Inicia tu página HTML y encuentra la etiqueta de apertura <head>.
- Agrega el código siguiente seguido de la etiqueta <head>:
<style type="text/css">- Pon las reglas CSS en una línea nueva. Aquí te dejamos como hacerlo:
body {
background-color: blue;
}
h1 {
color: red;
padding: 60px;
}Por último, debes escribir la etiqueta de cierre:
</style>Tu archivo HTML se verá así:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: blue;
}
h1 {
color: red;
padding: 60px;
}
</style>
</head>
<body>
<h1>Tutoriales de DonWeb</h1>
<p>Esto es un párrafo</p>
</body>
</html>Ventajas del CSS Interno:
- Tienes la posibilidad de usar selectores de ID y de clase en esta hoja de estilo. Veamos el siguiente ejemplo:
.class {
propiedad1 : valor1;
propiedad2 : valor2;
propiedad3 : valor3;
}
#id {
propiedad1 : valor1;
propiedad2 : valor2;
propiedad3 : valor3;
}Ya que solamente agregarás el código dentro del mismo archivo HTML, no necesitas cargar muchos archivos.
Desventajas del CSS Interno:
- Al añadir el código al documento HTML está la posibilidad de aumentar el tamaño de la página y que el tiempo de carga sea mayor.
CSS Inline
El CSS inline es usado para dar estilo a un elemento HTML en particular. Solamente tendrás que agregar el atributo style a cada una de las etiquetas HTML, sin emplear selectores.
A diferencia de los otros tipos de estilos CSS, te recomendamos no utilizar este tipo, ya que debes estilizar individualmente cada etiqueta HTML. Gestionar tu sitio web puede resultar muy complicado si solo empleas CSS inline.
Aun así, el CSS inline te puede ser útil en ciertas situaciones. Por ejemplo, aplicar estilos para un único elemento, o cuando no tienes acceso a archivos CSS.
Veamos el siguiente ejemplo. Añadiremos un CSS inline a la etiqueta <p> y <h1>:
<!DOCTYPE html>
<html>
<body style="background-color:black;">
<h1 style="color:white;padding:30px;">Tutoriales de DonWeb</h1>
<p style="color:white;">Esto es un párrafo.</p>
</body>
</html>Ventajas del CSS Inline:
- Puedes incluir fácilmente reglas CSS en una página HTML. Justamente por eso, este método es muy útil para previsualizar cambios y hacer correcciones rápidas en tu sitio web.
- Otra ventaja es que no es necesario crear y cargar otro documento separado como por ejemplo en el CSS externo.
Desventajas del CSS Inline:
- Agregar reglas CSS a cada uno de los elementos HTML te quitará mucho tiempo, además de que desordena la estructura HTML.
- Afecta al tamaño de la página y su tiempo de carga.
Conclusión
En este artículo, hemos aprendido la diferencia entre los tres tipos de estilos CSS: externo, interno e inline.
Ahora te preguntamos, ¿Qué estilo CSS vas a usar?
Visita nuestro sitio aquí.
