Muy bien, si estas leyendo esto, quiere decir que tienes una noción básica de que son las Hojas de Estilo. Ahora veras como funciona exactamente el CSS en combinacion con el HTML.
Lo que veras a continuación es codigo de archivos de css y html, los cuales podras copiar y pegar y verlo desde tu ordenador.
PRIMERA FORMA:
Archivo miarchivohtml.html:
<html>
<head>
<title>archivo html</title>
<link href="miarchivocss.css" rel="stylesheet" type="text/css">
</head>
<body>
Este es un archivo que sera modificado con un archivo externo css.
<p>La etiqueta p que es predefinida en html, tiene un estilo definido
en el archivo css.</p>
<div class="etiqpersclase">
Este texto esta siendo modificado por una etiqueta personalizada de tipo clase. Fijense que en el archivo css se define con un punto "." al principio. Nota como cuando te posas sobre el texto el curso cambia.
</div>
</br>
<div id="etiqpersidentificador">
Este texto esta siendo modificado por una etiqueta personalizada de tipo identificador. Fijense que en el archivo css se define con un punto "#" al principio. </div>
</body>
</html>
Archivo miarchivocss.css:
p {
font-size: 12px;
font-style: normal;
background-color: #CCCCCC;
}
.etiqpersclase{
color:#663300;
cursor:crosshair;
}
#etiqpersidentificador{
border:double;
text-decoration:underline;
text-shadow:#CCFF00;
}
Tenemos que para vincular el archivo html con el css, se usa la etiqueta link, en el cual el atributo href="nombredelarchivo.css" sirve para señalar el nombre del css.
SEGUNDA FORMA:
O bien tambien se puede colocar la hoja de estilo incrutada en el archivo html, entre las etiquetas head y style:
Archivo miarchivocss2.css:
<html>
<head>
<title>archivo html</title>
<style type="text/css">
<!--
p {
font-size: 12px;
font-style: normal;
background-color: #CCCCCC;
}
.etiqpersclase{
color:#663300;
cursor:crosshair;
}
#etiqpersidentificador{
border:double;
text-decoration:underline;
text-shadow:#CCFF00;
}
-->
</style>
</head>
<body>
Este es un archivo que sera modificado con un archivo externo css.
<p>La etiqueta p que es predefinida en html, tiene un estilo definido
en el archivo css.</p>
<div class="etiqpersclase">
Este texto esta siendo modificado por una etiqueta personalizada de tipo clase. Fijense que en el archivo css se define con un punto "." al principio. Nota como cuando te posas sobre el texto el curso cambia.
</div>
</br>
<div id="etiqpersidentificador">
Este texto esta siendo modificado por una etiqueta personalizada de tipo identificador. Fijense que en el archivo css se define con un punto "#" al principio. </div>
</body>
</html>