Tipos de estilos CSS.
Los estilos CSS son una herramienta indispensable en el diseño de páginas web modernas. Gracias a ellos, podemos darle un aspecto visual atractivo a nuestro sitio web y mejorar su usabilidad. En este artículo aprenderás todo lo que necesitas saber sobre los tipos de estilos CSS existentes.
Cuantos son los tipos de estilos CSS y sus nombres
Existen tres tipos de estilos CSS:
- Estilos CSS internos: se definen en la sección head de un documento HTML. Se aplican a un solo documento HTML.
- Estilos CSS externos: se definen en un archivo externo con extensión .css. Se aplican a todos los documentos HTML que enlacen con dicho archivo.
- Estilos CSS en línea: se definen en la etiqueta style del elemento HTML. Se aplican a un solo elemento HTML.
Cuales son los tipos de estilos CSS y sus características
A continuación, detallamos los tres tipos de estilos CSS:
Estilos CSS internos
Como hemos mencionado, los estilos CSS internos se definen dentro de la sección head de un documento HTML. Se aplican a un solo documento HTML. Su sintaxis es la siguiente:
<head>
<style>
selector {
propiedad: valor;
}
</style>
</head>
En el ejemplo anterior, selector hace referencia al elemento HTML al que se le aplicará el estilo CSS. La propiedad es la característica que queremos modificar y el valor es el nuevo valor que le queremos asignar.
Estilos CSS externos
Los estilos CSS externos se definen en un archivo con extensión .css. Este archivo se enlaza con el documento HTML mediante la etiqueta link. Se aplican a todos los documentos HTML que enlacen con dicho archivo. Su sintaxis es la siguiente:
<head>
<link rel="stylesheet" type="text/css" href="archivo.css">
</head>
En el ejemplo anterior, el archivo.css contiene los estilos CSS que queremos aplicar a nuestro sitio web.
Estilos CSS en línea
Los estilos CSS en línea se definen directamente en la etiqueta HTML que queremos estilizar. Se aplican a un solo elemento HTML. Su sintaxis es la siguiente:
<p style="color: red;">Este párrafo es de color rojo</p>
En el ejemplo anterior, la propiedad color se está modificando y su valor es rojo.
Significado de los tipos de estilos CSS
Cada tipo de estilo CSS tiene sus particularidades y usos específicos. Los estilos CSS internos son útiles cuando queremos aplicar un estilo a un solo documento HTML. Los estilos CSS externos son recomendados cuando queremos aplicar un estilo a todos los documentos HTML de nuestro sitio web. Por último, los estilos CSS en línea son útiles cuando queremos aplicar un estilo a un solo elemento HTML.
En conclusión, conocer los tipos de estilos CSS es fundamental para poder aplicar un estilo visual atractivo y coherente en nuestro sitio web. Esperamos que este artículo haya sido de utilidad para ti.
Deja una respuesta