Trabajar con CSS

por NT Mar Sep 23, 2008 6:47 pm

Primero que nada CSS significa Cascading Style Sheets, en español tiene el significado de Hojas de Estilo en Cascada, bueno como esto fue un poco de teoría vamos a la práctica, ahora vamos a hacer la siguiente estructura:

Documento HTML + Documento CSS = Resultado

Bueno, el ejemplo es el siguiente, vamos a hacer un documento HTML con el Bloc de Notas con el siguiente código:

Código:: <html> <head> <title>Nuevo documento HTML</title>  <link rel="stylesheet" href="style.css">  </head> <body> <span class="texto">Si te aparezte esto en Texto en arial con 12 px lo hiciste perfecto</spam </body> <html>

Ahora lo guardamos en una carpeta como index.html y vamos a hacer un nuevo documento CSS para la hoja de estilo con el siguiente contenido:

Código:: @charset "utf-8"; /* CSS Document */ .Texto { font-family: Arial; font-size: 12px; }

Esto es como HTML y PHP, pero nada más que abre con un "{" y cierra el contenido con un "}"
Con la línea 4 le indicamos la fuenta, en ese caso "Arial" que es la que uso yo, y en la línea 5 el tamaño que también es el que uso yo...
.Ahora guardamos, en la misma carpeta que index.html, nuestro documento CSS que hicimos en el Bloc de notas como: style.css que significa estilo.css en español

Ahora ejecutamos Index.html y vemos el resultado, obtenemos el texto en arial tamaño 12 px
Si hiciste otro estilo llamalo así:

Código:: <span class='estilo') >contenido</span>

Recuerda que si quieres podes poner el fondo también, si quieres elegir el fondo acá te dejo un código, sólo agregalo en la hoja de estilo(abajo de todo el código):

Código:: body { background-color: #000000;

Te tiene que quedar algo así:

Código:: @charset "utf-8"; /* CSS Document */ .Texto { font-family: Arial; font-size: 12px; } body { background-color: #000000;