CSS funciona a base de reglas. Las hojas de estilo están compuestas por una o más de esas reglas aplicadas a un documento HTML o XML. La regla tiene dos partes: un selector y la declaración. A su vez la declaración está compuesta por una propiedad y el valor que se le asigne.
h1 {color: red;}
h1 es el selector{color: red;} es la declaraciónel texto anterior fue copiado de w3.es para que sea lo mas claro posible el funcionamiento de CSS.
CSS lo podemos usar dentro de nuestra pagina o desde fuera de la misma:
- usando las etiquetas <style> css aqui </style> dentro de el elemento head.
- Tambien se puede usar el atributo style donde se quiera dar el el estilo.
- desde fuera de la pagina haciendo referencia con el elemento link dentro de el elemento head.
Vamos a los ejemplos:
ejemplo 1: dentro de la misma pagina usando el elemento style entre <head></head>.
<html>
<head>
<title>ejemplo de css interno</title>
<style>
h1{
color: red;
}
</style>
</head>
<body>
<h1>tendre color rojo<h1>
</body>
</html>
ejemplo 2: dentro de la misma pagina (atributo style).
<html>
<head>
<title>ejemolo de css inline</title>
</head>
<body>
<h1 style="color:red;">tendre color rojo<h1>
</body>
</html>
a esta clase de estilo se le suele llamar inline style
ejemplo 3: desde fuera de la pagina.
<html>
<head>
<title>ejemplo de css externo</title>
<link rel="stylesheet" type="text/css" href="cssexterno.css">
</head>
<body>
<h1>encabezado con css</h1>
<p>parrafo con css</p>
</body>
</html>