Conceptos básicos de estilos CSS

En esta lección aprenderemos los conceptos básicos de los estilos CSS, totalmente desde cero.

Conceptos básicos

CSS sirve para aplicar estilos a las etiquetas HTML.

 

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 CCUSW</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 CCUSW</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.