Unidad 2. Básico: Incrustar la hoja de estilo en el código HTML

La forma más correcta de utilizar hojas de estilo es guardándolas en un archivo con extensión .css

Es decir, en el archivo .html se escribe el contenido de la página web con etiquetas html, y en el archivo .css se define el estilo, por ejemplo el color del texto o el tipo de alineación.

En la imagen siguiente podemos ver un ejemplo.

En el archivo ejemplo_2_1.html tenemos las etiquetas html y el contenido, y en el archivos ejemplo_2_1.css tenemos la hoja de estilo. El resultado es la página web que se muestra en la parte inferior.

Pero también podemos incrustar el código CSS dentro del código HTML, con lo cual no necesitaremos otro archivo con extensión .css, para ello basta escribir una etiqueta <style> y poner dentro el código de la hoja de estil . Por ejemplo:

<style type="text/css">    h1 {text-align: center;}  </style>

Esta etiqueta debe ir dentro de la cabecera, es decir, antes de la etiqueta </head>

De esta forma podemos tener en un solo archivo el siguiente código que sería equivalente a los archivos ejemplo_2_1.html y ejemplo_2_1.css:

<!doctype html> 
<html lang="es"> 
<head> 
<meta charset="utf-8" /> 
<title>Ejemplo 2.1. Texto</title> 
<style type="text/css"> 
  h1 { text-align: center; }  
  p { font-family: arial; 
      font-size: 16px; } 
  .resaltado {color: blue;} 
</style> 
</head> 
<body>  
<h1>Introducci&oacute;n</h1> 
<p>Excel es un programa del tipo Hoja de Cálculo.</p> 
<p class="resaltado">Microsoft es la propietaria de Excel.</p> 
</body> 
</html>

De esta forma podemos probar los ejemplos de este curso que tienen el código CSS en un archivo aparte, desde la página: Probar código desde el navegador.

Enero-2019 (V 2.0)

Cursos Informática Gratuitos

Síguenos en: Facebook Sobre aulaClic Política de Cookies