Curso Básico de estilos CSS
-Conceptos básicos de estilos CSS
Los estilos CSS es una tecnología que nos permite aplicar estilos fácilmente y obtener un diseño uniforme en todos los navegadores.
-¿Que necesito para escribir estilos CSS?
Nada en especial, todo lo haremos con el bloc de notas.
-Lo que debemos saber
Un archivo que contiene estilos CSS debe tener una extensión .css, por ejemplo “estilos.css”. Generalmente, los estilos CSS se colocan en un archivo aparte, aunque se pueden poner en el mismo archivo html, esto no es recomendable ya que aumentan el tamaño de la pagina web y hacen mas pesada su carga.
-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 , 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.
-Asociar la hoja de estilos CSS con nuestra pagina web
Para que nuestros estilos se apliquen a nuestra pagina web tenemos que decirle a nuestro archivo html que utilizaremos una hoja de estilos CSS, esto se hace con la etiqueta donde le indicaremos la dirección del archivo, para hacer esto tendremos que poner esa etiqueta en la cabecera , así:
link href="estilos.css" rel="stylesheet" type="text/css">
Si la ubicación de nuestra hoja de estilos es otra, por ejemplo, se encuentra en “/css/estilos.css” solo lo cambiamos en el atributo href.
Ya esta, si todo salió bien deberíamos ver nuestra página web con los estilos que escribimos en la hoja de estilos.
-Fuente: comocrearunsitioweb.com
Ver informacion reducida
