Sintaxis y propiedades de los estilos CSS

La sintaxis es muy simple, consiste en escribir el nombre de la etiqueta html que queremos aplicarle un estilo o bien el nombre de la capa o bloque seguido de una llave “{” y luego los estilos que queremos aplicar, una vez que tenemos todo el código listo, cerramos la llave con “}”, si por ejemplo queremos cambiar el tamaño de fuente de toda la página web, le aplicaríamos el estilo a la etiqueta <body>, quedaría de esta forma:

body{

font-size:16px;

}

Cuando queremos aplicar estilos a un bloque que creamos nosotros, antes del nombre tenemos que insertar un “#”, imaginemos que creamos un bloque (capa) llamado “cabecera” donde queremos asignarle un tamaño de 780px de ancho, lo hacemos así:

#cabecera{

width:780px;

}

Recuerden que al final de cada atributo va un “;”. Hasta acá vamos bien, la sintaxis básica ya la tenemos dominada, ahora veamos las propiedades y atributos para aplicar estilos.

Atributos y propiedades CSS

Modificar fuentes

Estos son los atributos que cambian el aspecto de las fuentes:

font-family: este atributo cambia el tipo de fuente, por ejemplo: font-family: verdana,sans-serif;
font-size: cambia el tamaño de la fuente, ej: font-size: 15px;
color: con este atributo cambiamos el color de la fuente, podemos seleccionar el color mediante una palabra (red, gray, green, etc), formato RGB (rgb(255, 255, 255) o valor hexadecimal (#F4F4F4)), la sintaxis sería así: color: #fff;
font-style: cambiamos el estilo de fuente, podemos elegir entre normal, oblique, italic de esta forma: font-style: italic;

Modificar texto y párrafos

text-align: con este atributo modificamos la alineación del texto, podemos elegir entre left, center, right, justify de esta forma: text-align: left;
text-decoration: si queremos que nuestro texto este subrayado, sobrerayado o tachado, escribimos: text-decoration: seguido de alguna de estas palabras: underline, overline, line-through y si no queremos nada escribimos none, ejemplo: text-decoration: none;

Modificar el fondo

background-image: le decimos al navegador que queremos una imagen de fondo, así: background-image: url(/imagenes/fond.jpg); si queremos que la imagen se repita usamos otro atributo llamado “repite-x” o “repite-y”.
background-color: seleccionamos un color de fondo, de esta manera: background-color: #000000;

Modificar un bloque o capa

Si queremos modificar una capa o bloque utilizamos estos atributos:

margin: le especificamos un margen en px o em, este atributo podemos hacerlo mas especifico, por ejemplo: margin-left (margen izquierdo), margin-right (margen derecho), margin-top (margen superior), margin-bottom (margen inferior).
padding: especificamos un espacio de padding, al igual que el atributo margin, podemos especificarlo aun mas, padding-left (margen izquierdo), padding-right (margen derecho), padding-top (margen superior), padding-bottom (margen inferior).
border: le aplicamos un borde al bloque, podemos hacerlo así: border: 1px solid #000000; primero especificamos el tamaño del borde, luego el tipo (solid, double, etc) y finalmente el color.
float: como su nombre lo indica, con este atributo “flotamos” el bloque, podemos elegir right, none, left, así: float: left;
clear: con este atributo modificamos la alineación de los elementos que están a los lados, podemos elegir entre: both, none, right, left. así: clear: both;

Con esto ya podrás comenzar a escribir estilos CSS y crear tu pagina web con una estructura mas ordenada y simple.

En la siguiente lección veremos como hacer que la hoja de estilos se asocie con nuestra pagina web para que los estilos se apliquen.

Tercera lección: Asociar la hoja de estilos CSS con nuestra pagina Web

¿Que puntuación le darías a este tutorial?