Tutorial de iniciacion de CSS

Empezaré tambien a hacer un tutorial de CSS. Antes de nada deciros que para utilizar css deberiais tener unos conocimientos mínimos de html porque sino no os va a servir de mucho.

Para los que no sepáis que es css es una hoja de estilo en la cual podemos poner algunas características de nuestras páginas web. Hoy en día es lo que mas se utiliza cuando se hace una pagina en html por su comodidad. Desde el html llamamos por asi decirlo al CSS y este nos da unas propiedades así no tendremos que escribir todas esas características en cada html bastara con una línea de código para llamar al CSS.

Os pongo un ejemplo: tenéis 20 html y habéis decido cambiarle la imagen de fondo o el color del texto. En html tendríais que ir página por página cambiando la imagen de fondo o el color del texto. Y usando css bastaria con cambiarlo simplemente al CSS ya que los html están asociados a ellas. Si no entendisteis bien lo veréis mejor cuando hagamos los ejemplos.

Primero creamos un .html y un .css. podemos llamarles miweb.html y estilo.css. El CSS podéis colocarlo dentro de una carpeta donde este el html que se llame estilo.

Vamos a ponerle a nuestra web un color gris de fondo:

En html seria asi:

Y con el css pondríamos en la hoja de estilo esto otro:

body {background-color: silver;}

Primero se indica a que etiqueta nos referimos (en este caso body) y todos sus atibutos entre llaves { }.
después la propiedad( background-color:, color de fondo)
el valor de la propiedad(silver, gris)
un punto y coma; antes de cerrar la llave, esto es para separar una propiedades de otras.

Pero tendríamos que indicarle al html que coja la información del css en el encabezamiento entre las etiquetas y pondríamos quedando así:

<html> <head> <title>Mi web</title> <link rel="stylesheet" type="text/css" href="estilo/estilo.css"/> </head> <body> <h1>Mi primera hoja de estilo</h1> </body> </html>

Si tuviésemos 20 páginas y quisiéramos cambiarle el color de fondo solo con cambiarlo en el css bastaría.

Imaginaros ahora que queremos que todos los titulos que esten en las etiquetas h1 aprezcan de otro color pues lo indicamos en el css. h1 {color: uncolor}

Quedando asi la hoja de estilo

body {background-color: silver;} h1 {color: #FF0000;}

También le podemos poner un fondo a los titulos