Para qué sirve los estilos CSS
CSS se utiliza para dar estilo a documentos HTML y XML, separando el contenido de la presentación.
Los Estilos definen la forma de mostrar los elementos HTML y XML. CSS permite a los desarrolladores
Web controlar el estilo y el formato de múltiples páginas Web al mismo tiempo. Cualquier cambio en
el estilo marcado para un elemento en la CSS afectará a todas las páginas vinculadas a esa CSS
en las que aparezca ese elemento.
Estructura básica del código CSS
Para aplicar estilos CSS a una etiqueta HTML tenemos que hacerlo así:
etiqueta{atributo:valor;}por ejemplo:
body{font-size:12px;}
Esa instrucción CSS hará que el tamaño de fuente del texto en todo el contenido dentro de "body" (o sea, todo el contenido del sitio) sea de 12px (pixeles).
Nota: asegurate de escribir todo bien, si te falta un signo ":" o "{" "}" no te funcionaran los estilos.
Si lo que queremos modificar es un bloque, entonces al nombre del bloque o div le anteponemos un numeral (#), por ejemplo:
#mibloque{ font-size:12px; }
y para que ese estilo funcione, deberemos aplicarlo a un bloque o div dentro del código HTML de nuestra pagina web, de esta forma:
<div id="mibloque">Este es mi primer bloque creado gracias a pw2</div>
Ese código hara que todo el texto dentro de ESE bloque tenga un tamaño de fuente de 12px, lo que este fuera de ese bloque no tendra ningun estilo.
Y por ultimo si queremos crear una clase, en lugar de anteponer un numeral o almohadilla (#) pondremos un punto (.), así:
.miclase{font-family: arial}
y desde el código HTML la llamaremos así:
<span class="miclase">Esta es mi primer clase creada gracias a pw2</span>
o también así:
<div class="miclase">Mi primer clase otra vez</div>
Entonces todo lo que este dentro de esas etiquetas la veremos con la fuente "Arial".
Nota: La diferencia entre una clase (.) y un bloque (#) es que el bloque es único e irrepetible en la pagina, es decir, si creamos un estilo de bloque "#busqueda" para mostrar el cuadro de búsqueda no podremos usarlo otra vez en la misma pagina, en cambio si a "#busqueda" lo convertimos en una clase ".busqueda" podremos usarlo cuantas veces queramos.