COMO FUNCIONA CSS

¿Cómo funciona CSS?
En esta lección aprenderás a crear tu primera hoja de estilo; conocerás el modelo básico de CSS y qué código es necesario para usar CSS en un documento HTML.
Muchas de las propiedades que se usan en las hojas de estilo en cascada (CSS) son parecidas a las de HTML. Así pues, si estás acostumbrado a usar HTML para cuestiones de presentación, lo más probable es que reconozcasgran parte del código usado. Examinemos un ejemplo concreto.
La sintaxis básica de CSS
Digamos que queremos un bonito color rojo como fondo de nuestra página web:
Usando HTML podríamos haberlo conseguido así:

Con CSS el mismo resultado puede lograrse así:
body {background-color: #FF0000;}
Como verás, el código usado es más o menos idéntico para HTML y CSS. El ejemplo anterior te muestraademás el modelo CSS fundamental:

Pero ¿dónde se sitúa el código CSS? Eso, precisamente, es lo que vamos a estudiar ahora mismo.
Aplicando CSS a un documento HTML
Podemos aplicar CSS a un documento HTML de tres maneras diferentes. Todos estos métodos se explican a continuación. Te recomendamos que te centres en el tercero, es decir, el externo.
Método 1: En línea (el atributo style)
Un modode aplicar CSS a HTML es usando el atributo de HTML style. Si ampliamos el ejemplo anterior sobre el color de fondo rojo, CSS se puede aplicar así:


Ejemplo


Esta es una página con fondo rojo



Método 2: Interno (la etiqueta style)
Otra forma es incluir el código CSS usando la etiqueta HTML . Por ejemplo, así:


Ejemplo

body
{background-color: #FF0000;
}



Esta es una página con fondo rojo



Aquí es en donde comenzamos el aprendizaje; no hay porque asustarse pues CSS es un lenguaje extremadamente sencillo. A continuación otro ejemplo:


hoja de estilo


p
{
font-size: 30 px;
font-family: arial;background: #ff6600
}


hola mundo.



Veamos un documento típico en HTML:


mi página


bienvenidos todos a mi página



un párrafo cualquiera . 
otro párrafo cualquiera. 
 
 


Ahora utilicemos CSS dentro de HTML:


mi página

p{
color: #3366cc; font-family: arial; font-weight: bold
}
h1
{
text-align: center
}



bienvenidos todos a mi página

un párrafo cualquiera . 
otro párrafo cualquiera. 


Así, cada vez que coloquemos una etiqueta  o una  estaremos utilizando los estilos definidos y nosevitaremos poner código adicional.
En este ejemplo los selectores son P y H1; las propiedades son color, font-family y font-weight.
Método 3: Externo (enlace a una hoja de estilo)
El método recomendado es enlazar con lo que se denomina hoja de estilo externa. A lo largo del curso usaremos este método en todos nuestros ejemplos.
Una hoja de estilo externa es sencillamente un fichero de texto con laextensión .css. Como cualquier otro fichero, puedes colocar la hoja de estilo en el servidor web o en el disco duro.
Por ejemplo, digamos que tu hoja de estilo se llama style.css y está localizada en una carpeta que se llama style. Esta situación se puede ilustrar de la siguiente manera:

El truco consiste en crear un vínculo desde el documento HTML (por ejemplo, default.htm) con la hoja deestilo (style.css). Dicho vínculo se puede crear con una sencilla línea de código HTML:


Fíjate cómo la ruta a nuestra hoja de estilo aparece indicada por medio del atributo href.
La línea de código debe insertarse en la sección de encabezado del código HTML, es decir, entre la etiqueta  y . De esta manera:


Mi documento



...

Este vínculo indica al navegador...