Manual de CSS de NarbbagEsto pretende se un manual de CSS para principiantes que sepan html, si no resultará mas difícil de entender.

Empezaremos esta 1ª parte del tutorial explicando un poco las formas de utilizar los CSS ( Estilos) en una pagina web y como generar nuestra primera hoja CSS.

Está explicado a mi manera, creo que es una forma entendible de explicar CSS, pero quizas alguien se pierda.

Los CSS son los estilos visuales de las paginas web, dan la posibilidad de personalizar mucho una web.

Desde mi punto de vista hay 3 formas poner CSS a una web, voy a comentarlas de mas trabajosa a mas simple según mi opinión. y en la segunda parte del manual, ya avanzare mas en las propiedades.

El archivo .rar con los html y los css esta en la sección descargas de la web

1ª Forma

La primera, es insertar en cada etiqueta su propio CSS, es una forma costosa y que nos hace cambiar todo cada vez que queramos cambiar por ejemplo el color de todas las tablas, o las fuentes etc..

Si tenemos esta web de ejemplo
<html>
<head>
<title>Probando CSS en cada etiqueta</title>
</head>
<body>
<p>Texto para probar los CSS</p>
</body>
</html>

Ahora queremos ponerle al texto de la web color rojo y tamaño 25,  que en etiquetas CSS serian

- color: red;
- font-size: 25px;

Las añadimos a la pagina de pruebas en la etiqueta HTMl <p>, para ello usamos una propiedad de las etiquetas HTMl, que es Style y se usa así.

<p style=”color: red; font-size: 25px;”>

Vamos a verlo en el ejemplo de la web
<html>
<head>
<title>Probando CSS en cada etiqueta</title>
</head>
<body>
<p style=”color: red; font-size: 25px;”>Texto para probar los CSS</p>
</body>
</html>

Espero que quede claro, los CSS en esta forma se meten dentro de la propiedad Style=”" de las etiquetas y solo afectara a esa etiqueta en concreto y no a las que sean iguales.

2ª Forma

La segunda forma es igual que la tercera pero en el mismo documento, eso quiere decir que los css van en el html, pero no en la etiqueta Style, sino con la etiqueta CLASS. Haber si me explico, las etiquetas HTML como <DIV>, <TABLE>, <TD>, etc… pueden llevar la propiedad CLASS como podéis ver ahora.

<p class=”miclase”>

En este caso “miclase” sera un grupo de estilos para ese “P” que ahora voy a explicar donde y como se definen. Deben ir después de la etiqueta <HTML> y van dentro de las etiquetas <STYLE> tal que asi y en vez de color rojo, usaremos verde

<style>

.miclase {
color: green;
font-size: 25px;
}

</style>

Ahora lo ponemos en la web de prueba, dejando tambien la forma 1 y vemos la diferencia de colocación, pero que el resultado es el mismo.

<html>
<style>
.miclase {
color: green;
font-size: 25px;
}

</style>

<head>
<title>CSS en etiqueta y css general en hoja</title>
</head>
<body>
<p style=”color: red; font-size: 25px;”>Texto CSS Rojo</p>
<p class=”miclase”>Texto CSS Verde</p>
</body>
</html>

La class “miclase” sirve para cualquier etiqueta y para varias etiquetas a la vez.

3ª Forma

Bueno pasamos la tercera forma de poner CSS y es en una hoja aparte. Para ello necesitamos crear una hoja CSS, para ello la forma mas simple es abrir el BLoc de Notas y guardar la pagina como estilos.css, por ejemplo esta vez color Azul.

*Pagina CSS*/

.miclase {
color: blue;
font-size: 25px;
}

Asi seria la pagina de CSS, recordad guardarla como .css. Ahora vamos a ver como hacer que la pagina html llame a la pagina css con:

<link rel=”stylesheet” href=”estilos.css” type=”text/css” />

Vamos a verlo puesto en el HTMl, se situa dentro de <HEAD>, recordad poner el nombre de la hoja de estilos que habeis guardado, yo en mi caso la he llamado estilos.css.

<html>
<head>
<link rel=”stylesheet” href=”estilos.css” type=”text/css” />
<title>CSS en etiqueta y css general en hoja</title>
</head>
<body>
<p style=”color: red; font-size: 25px;”>Texto CSS Rojo</p>
<p class=”miclase”>Texto CSS Azul</p>
</body>
</html>

Bueno con esto queda finalizado el como y donde se usan los CSS y como empezar con ellos.

Podeis practicar con el codigo que he peusto, variando posiblidades.

En la parte 2 del tutorial me metere mas a fondo con las etiquetas del codigo CSS y otras etiquetas raras HTML.

P.D. El archivo .rar con los html y los css esta en la sección descargas de la we