Cómo agregar CSS
CSS Tutorial » Cómo agregar CSS
CSS puede adjuntarse como un documento separado o incrustarse en el propio documento HTML. Hay tres métodos para incluir CSS en un documento HTML:
1. Estilos en línea: uso del atributo de estilo en la etiqueta de inicio HTML.
2. Estilos incrustados: uso del elemento <style> en la sección del encabezado de un documento.
3. Hojas de estilo externas: usando el elemento <link>, apuntando a un archivo CSS externo.
En este tutorial cubriremos estos tres métodos para insertar CSS uno por uno.
Estilos en línea
Los estilos en línea se utilizan para aplicar las reglas de estilo únicas a un elemento colocando las reglas CSS directamente en la etiqueta de inicio. Se puede adjuntar a un elemento mediante el atributo de estilo.
El atributo de estilo incluye una serie de propiedades CSS y pares de valores.
Cada par "propiedad: valor" está separado por un punto y coma (;), tal como lo escribiría en una hoja de estilo incrustada o externa. Pero debe estar todo en una línea, es decir, sin salto de línea después del punto y coma, como se muestra aquí:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Ejemplo de estilos CSS en línea</title>
</head>
<body>
<h1 style="color:red; font-size:30px;">Este es un titulo</h1>
<p style="color:green; font-size:22px;">Este es un párrafo.</p>
<div style="color:blue; font-size:14px;">Este es un contenido de texto.</div>
</body>
</html>
El uso de estilos en línea generalmente se considera una mala práctica. Como las reglas de estilo están incrustadas directamente dentro de la etiqueta HTML, hace que la presentación se mezcle con el contenido del documento; lo que hace que el código sea difícil de mantener y niega el propósito de usar CSS.
Etiquetas: como agregar css a html, ejemplos de paginas web en html y css, etiqueta style html
Hojas de estilo incrustadas
Las hojas de estilo integradas o internas solo afectan al documento en el que están integradas.
Las hojas de estilo incrustadas se definen en la sección
<style> en un documento HTML, pero deben aparecer entre las etiquetas <head> y </head>.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Mi documento HTML</title>
<style>
body {
background-color: #09F;
}
p {
color: #E5E5E5;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Este es un titulo</h1>
<p>Este es un párrafo de texto.<br />
Este es un párrafo de texto.</p>
</body>
</html>
Hojas de estilo externas
Una hoja de estilo externa es ideal cuando el estilo se aplica a muchas páginas del sitio web.
Una hoja de estilo externa contiene todas las reglas de estilo en un documento separado que puede vincular desde cualquier archivo HTML en su sitio. Las hojas de estilo externas son las más flexibles porque con una hoja de estilo externa, puede cambiar el aspecto de un sitio web completo cambiando solo un archivo.
Puede adjuntar hojas de estilo externas de dos formas: vinculando e importando.
Vinculación de hojas de estilo externas
Antes de vincular, primero debemos crear una hoja de estilo. Abramos su editor de código favorito y creemos un nuevo archivo. Ahora escriba el siguiente código CSS dentro de este archivo y guárdelo como "style.css".
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
background-color: #9FF;
}
h1 {color: green;
font-family: Arial, Sans-Serif;
font-size: 22px;
margin: 0px;
}
h2 {color: red;
font-family: Arial, Sans-Serif;
font-size: 22px;
margin: 0px;
}
p {
color: purple;
}
Una hoja de estilo externa se puede vincular a un documento HTML mediante la etiqueta <link>. La etiqueta <link> va dentro de la sección <head>, como puede ver en el siguiente ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Mi documento HTML</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Este es un titulo h1 </h1>
<h2>Este es un titulo h2 </h2>
<p>Este es un párrafo de texto.</p>
</body>
</html>
como agregar css a html, ejemplos de paginas web en html y css, etiqueta style html
Cómo agregar CSS a HTML - css.es
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.