Incluir CSS en un documento HTML


Puedes incluir CSS en un documento HTML de tres formas:

  • Incluir CSS dentro del documento HTML
  • Incluir CSS en las etiquetas HTML
  • Incluir CSS desde un archivo externo

Incluir CSS dentro del documento HTML

Para incluir CSS dentro del documento HTML hacemos uso de la etiqueta <style>, la cual estara incluida dentro de la etiqueta <head>. El inconveniente de definir CSS dentro del mismo documento es que si ocupas un mismo estilo en diferentes documentos HTML a la hora de que quieras realizar algun cambio tendras que hacerlo en todos los documentos HTML.

Ejemplo:

<html>
<head>
<style type="text/css">
p { color: blue; font-size:15px; font-family:Arial;  }
</style>
</head>
<body>
<p>Este es un parrafo </p>
</body>

</html>

Incluir CSS dentro de la etiqueta HTML

Se puede incluir CSS dentro de la misma etiqueta html mediante el atributo style.

Ejemplo:

<html>
<head>
</head>
<body>
<p style="color: blue; font-size:15px; font-family:Arial;"> Este es un parrafo </p>
</body>
</html>

Incluir CSS desde un archivo externo

La otra forma de incluir CSS es definiendo en un archivo todos los estilos que vayamos a ocupar y lo guardamos con la extension .CSS, Una vez que tenemos el archivo creado lo enlazamos mediante la etiqueta <link>

Ejemplo:
Archivo: estilo.css

p { color: blue;
font-family:Arial;
font-size:15px;
}

Archivo: pagina.html

codigo.jpg

5 comentarios en “Incluir CSS en un documento HTML

  1. una duda… teóricamente sería más eficiente que todo el código css estuviese dentro del documento html, como lo has planteado en el primer caso, ya que se realizarían menos peticiones al servidor, claro está que es menos ordenado pero ¿sería más eficiente?

  2. html y css no son lenguajes de servidor, sino que se ejecutan en la máquina del cliente

  3. De hecho es mejor trabajar con archivos css externos y vinculados con el archivo html. Aunque por planteamiento lógico alguien puede deducir lo que dijo Fernando; es más eficiente realizar la acción que planteo al principio

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s