Cómo incluir CSS en un documento HTML


Podemos incluir CSS en un documento HTML de tres formas:
  1. Incluir CSS dentro del documento HTML
  2. Incluir CSS en las etiquetas HTML
  3. 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 estará incluida dentro de la etiqueta <head>. El problema de definir CSS dentro del mismo documento es que si utilizas un mismo estilo en diferentes documentos HTML y luego desearas realizar algún cambio tendrás que hacerlo en todos los documentos HTML.

Ejemplo:
<html>
<head>
<style type="text/css">
p { color: green; font-size:18px; font-family:Verdana;  }
</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: green; font-size:18px; font-family:Verdana;"> 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 utilizar y lo guardamos con la extensión .CSS, Una vez que tenemos el archivo creado lo enlazamos mediante la etiqueta <link>

Ejemplo:

 Archivo: estilo.css
p { color: green;
font-family:Verdana;
font-size:18px;
}

Archivo: pagina.html
codigo.jpg 

Ubicación: España

Comentarios

Publicar un comentario

Entradas populares de este blog

Códigos Hex de color

Imagen
¿Qué son los códigos de colores de HTML? Los códigos de colores son formas de representar los colores utilizando un formato que un ordenador puede interpretar y mostrar. ¿Cuáles son los códigos de color de HTML? Son utilizados en sitios web y otras aplicaciones de software, existen gran variedad de formatos, incluidos los códigos de color HEX, RGB y HSL. Los más populares son los códigos Hex de color : tres bytes números hexadecimal (es decir, compuesto de seis dígitos). En cada byte, con un par de caracteres en el código Hex, se representa la intensidad de rojo, verde y azul en el color, respectivamente:  #XXXXXX             #XX     XX       XX                   Rojo    Verde   Azul Valores de bytes código Hex de 00, que es la más baja intensidad de un color, a lo que representa el nivel más alto de intensidad. El color blanco, por ejemplo, se obtienen por la mezcla de los tres colores primarios en su máxima intensidad, y en el código Hex la notación d
Leer más

Enlaces Intradocumentales

Imagen
  Enlaces Intradocumentales : Los mismos son aquellos  hiperenlaces que  hacen referencia a un punto determinado de la página que los contiene, es decir, a un punto en el mismo documento . <a> </a> Es la etiqueta que se utiliza en HTML para definir un enlace.  Ejemplo: Origen: <a href="#datos personales">Datos Personales<a/> Destino: <a name="datos personales">Datos Personales<a/> Importante: Escribir todo el código en el mismo documento! Este tipo de enlaces se utilizan cuando el texto a incluir es largo y para ser visto es necesario tener que mover la barra de desplazamiento de la página. Normalmente se utiliza texto o imágenes o vídeo como contenido de un enlace . Fuente: Activate, Google España www.hipertexto.info
Leer más

Etiqueta header HTML5

Imagen
Las etiquetas  <header>  y su cierre  </header>   s e encargan de indicar a los navegadores que lo que contienen es la cabecera de la página y que dentro seguramente llevarán lo típico, es decir, algún logotipo, el título de la página, quizás una descripción de la misma y poco más. La norma define a la cabecera como un grupo de ayudas a la navegación. No es una etiqueta obligatoria , aunque debemos usarla si realmente nuestras páginas tienen algún bloque de código que se pueda entender como "cabecera". Además de los elementos citados, un header podría contener un menú de ayuda a la navegación, una tabla de contenidos, un formulario de búsqueda, etc. Su contenido no es tan estricto. Al tratarse de etiquetas semánticas, da igual la posición que ocupen dentro de nuestra página. Quizás hayas diseñado una web en la que el título y la descripción de la web junto con algunos enlaces o ayudas a la navegación los tengas situados en una barra lateral. Ese bloq
Leer más