CSS en HTML: una guía con ejemplos
En lo relativo a páginas web, no solo cuenta el contenido, sino también su presentación. El lenguaje de hojas de estilo CSS se utiliza habitualmente para dar un formato adecuado al HTML. De este modo, se definen atributos como el diseño, el color y la forma de los elementos individuales de HTML. Las instrucciones de diseño CSS existen independientemente de HTML y también deben integrarse en un documento electrónico.
¡Tu pack de hosting con asesor personal!
Confía en el alojamiento web rápido, barato, escalable y seguro de IONOS.Incluye dominio gratis durante el 1er año y una dirección de e-mail.
Cómo insertar CSS en HTML: ¿qué métodos existen?
La vinculación de CSS en HTML es posible con hojas de estilo internas o externas. Con las hojas de estilo internas, las instrucciones CSS se encuentran dentro del documento HTML. Así, puedes integrar CSS al principio del archivo HTML o colocarlo en el código fuente. Con este método, una buena comprensión básica de HTML y su sintaxis es una ventaja. La forma más común y limpia de desarrollar páginas web es utilizar hojas de estilo CSS externas. El CSS se integra enlazando el documento HTML con un archivo CSS externo. A continuación, se presenta un resumen de los tres métodos:
- Estilo inline, es decir, directamente en el código fuente
- Al principio del documento HTML
- Externalizado en un archivo CSS externo
El Creador de páginas web MyWebsite de IONOS incluye una amplia gama de plantillas de diseño para que puedas crear una página web de aspecto profesional.
Incluir CSS: estilo inline
Con este método, las instrucciones de diseño se integran directamente en el código fuente mediante una etiqueta de estilo. Las propiedades deseadas solo se asignan a un elemento, de modo que es posible realizar diseños diferentes en todo el documento HTML. En el ejemplo siguiente, el encabezamiento H1 debe aparecer en azul y con un tamaño de letra de 14:
<h1 style="color:blue; font-size:14px;">Esto es un encabezado</h1>Con este tipo de integración, se pierden muchas de las ventajas de CSS. Entre ellas, la posibilidad de definir un único comando que luego se aplica, por ejemplo, a todos los elementos H1 del documento HTML. En algunas circunstancias, también hay un mayor esfuerzo de mantenimiento, porque se requiere la intervención directa en el código HTML.
Añadir CSS al principio del HTML
En este caso, se incluye el CSS en la cabecera del documento HTML. La etiqueta de estilo se convierte así en parte del elemento de cabecera y se aplica a todo el archivo. Las instrucciones de diseño están contenidas en el documento, pero están separadas del código HTML. En el siguiente ejemplo, se aplica el mismo comando que en el ejemplo anterior. Esta vez, sin embargo, todos los encabezados H1 del archivo deben ser formateados de acuerdo con la información.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:blue; font-size:14px;}
</style>
</head>
<body>
<h1> Esto es un encabezado </h1>
<p>Esto es un párrafo</p>
</body>
</html>
Integrar el CSS con un archivo externo
Este es posiblemente el mejor método para enlazar CSS en HTML. Un sitio web suele constar de muchas páginas, por lo que tiene sentido guardar las instrucciones de diseño en un archivo separado. Esto permite una separación limpia entre el contenido y el diseño y facilita el mantenimiento. El archivo exportado está simplemente vinculado al documento HTML. Se guarda la hoja de estilos externa con la extensión .css y luego se utiliza una etiqueta de enlace para incluirla en el archivo HTML. En el siguiente ejemplo, el archivo CSS se llama stylesheet.css.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<h1> Esto es un encabezado </h1>
<p>Esto es un párrafo</p>
</body>
</html>
El atributo rel define el tipo de relación lógica y href hace referencia al archivo CSS que se va a incrustar. Ten en cuenta que el elemento link puede tomar otros atributos. Con media = "print" específicas, por ejemplo, que la hoja de estilos solo se utiliza en la vista de impresión. La hoja de estilos externa no contiene ninguna etiqueta HTML, solo el selector respectivo y los corchetes con las instrucciones, como en el siguiente ejemplo:
H1 {
color: blue;
font-size:14px;
}
Descubre los mejores trucos de CSS para optimizar el diseño de tu proyecto web o confía en nuestro Servicio de Diseño MyWebsite para unos resultados profesionales.
Artículos similares
Cómo comprimir CSS y mejorar el rendimiento de una web
Encontrar elementos estructurales directamente en el código HTML no es muy común. Colores, fuentes y tamaños de otros elementos HTML son definidos normalmente en las llamadas hojas de estilo, como por ejemplo CSS. Si se trata de una web compleja, el número de archivos CSS necesarios para su correcto funcionamiento será mayor, lo que puede tener un impacto significativo en el tiempo de carga. Así,…
CSS grid: diseño con función inteligente
Es difícil crear un diseño web atractivo si no sabes en qué plataforma aparecerá. CSS grid resuelve este problema, permitiendo a los diseñadores definir una plataforma y colocar sus elementos siguiendo su formato. Gracias a las funciones de CSS grid, podrás adaptar tu contenido a diferentes pantallas.
Tipografía para el diseño responsivo con CSS
A menudo, se subestima a la tipografía web como parte fundamental del diseño responsivo de páginas web, a pesar de que la creación de fuentes adaptables no es ninguna ciencia inaccesible. ¿Cómo se aplican en la práctica? Y ¿qué fuentes web son las mejores para un diseño web responsivo? Te mostramos los aspectos técnicos fundamentales para la implementación de tipografía con CSS en una web…
Sinart CreativeShutterstock Tailwind CSS: qué destaca a este framework Utility First
Si ya tienes experiencia trabajando con CSS y buscas un framework especialmente flexible e individual, Tailwind CSS es una gran elección. La solución para profesionales simplifica el trabajo y ofrece numerosas opciones de diseño. Sigue leyendo para saber más sobre el framework y por qué a los principiantes les puede ir mejor utilizar una alternativa a Tailwind CSS.
CSS: padding vs. Margin: resumen de los componentes del modelo de cajas
La gran cantidad de comandos que contiene un lenguaje de programación como CSS puede suponer un desafío. No te preocupes: en nuestro artículo resumen sobre CSS padding vs. margin aprenderás las diferencias más importantes entre estos dos comandos de diseño. También te presentaremos el famoso modelo de cajas para que puedas distinguir fácilmente estos dos comandos CSS.
