Introducción
Por si estas en el proceso de aprender a usar CSS para tus proyectos web, en lugar de esas feas tablas este es el lugar correcto para estar, en esta guía tratare de cubrir todos los conceptos básicos que un desarrollador web de front-end debe saber para lograr proyectos con CSS bonito, estándar y fácil de mantener, así que sin mas preámbulos vamos a comenzar.
Que es CSS?
Bueno por sus siglas en ingles Cascade Styling Sheet, sabemos por defecto que se trata de una “hoja de estilo en cascada” pero a que se refiere exactamente con eso de estilo en cascada? Pues se refiere a que es un lenguaje que nos sirve dentro de nuestro stack de desarrollo web para dar estilo a todos los elementos del cuerpo de nuestra pagina html.
Como comienzo?
Hay dos formas de agregar estilos a un documento html, y estos son:
1. Agregando un tag dentro del elemento <head> de nuestro documento para importar un fichero .css asi:
<link rel="stylesheet" href="style.css" type="text/css">
Con este tag decimos que estamos “enlazando” un fichero del typo “stylesheet” (hoja de estilo) que se llama “style.css” el href aquí funciona igual que en los otros lados, hay que pasarle la ruta relativa o absoluta hacia el fichero. y finalmente le decimos el mime-type que en este caso es text/css
2. Agregando directamente nuestros estilos dentro de el tag <style> siempre dentro del elemento <head> del fichero:
<style>
h1 {
font-size: 40px;
height: 200px;
}
.error {
color: Red;
font-weight: bold;
}
#pie {
background-color: Gray;
}
</style>
aquí ya introduje directamente código CSS, no te preocupes si de primeras no lo entiendes, que ya conforme vayamos avanzando iremos explicándolo.
Que son selectores?
En Css el concepto de selectores funciona de manera similar que en jQuery o javascript simple y plano. Para aquellos que no saben que es un selector para nada:
En CSS, los selectores son patrones utilizados para seleccionar el elemento(s) del documento que deseas darle estilo.
Existen 3 tipos básicos de selectores en css, que son:
- Class: Selecciona los elementos que tienen el atributo class (e.g: class=”error”)
- Id: Selecciona los elementos que tienen el atributo id (e.g: id=”pie”)
- Elemento: Selecciona todos los elementos de un tipo, por ejemplo si queremos seleccionar los elementos <div> el selector es div
Hay que tomar en cuenta que el selector “id” solo afecta el primer elemento de arriba a abajo que se encuentra, mientras que los selectores de class y elemento seleccionan todos los elementos.
Entonces la función de los selectores es darle estilo a elementos específicos, como por ejemplo si tenemos el siguiente div:
<div class="ejemplo"></div>
Y queremos decirle que sea rojo, y que el tipo de letra sea blanco y de 15px, podemos agregar el siguiente CSS
.ejemplo {
background-color:red;
color: white;
font-size: 15px;
}
Sintaxis
podemos definir la sintaxis de CSS con la siguiente gramática formal simplificada:
<selector>|<grupo_selectores> : {
<declaraciones>
}
<declaraciones> -> <propiedad> : <valor>;
<selector> -> .<nombre> | #<nombre> | <nombre> | <grupo_selectores>
<grupo_selectores> -> <selector> | <grupo_selectores>
Ademas tenemos una lista inmensa de probabilidades para los selectores con sus propios modificadores, si quieren ver una lista completa pueden verla aquí
Ademas también hay una lista completa de todas las propiedades y sus valores aqui
Ejercicio practico
Para efectos de poner en practica los conocimientos expuestos hasta este punto, vamos a hacer un ejemplo practico de convertir un botón simple y feo en un botón bonito y estiloso.
Vamos a convertir esto:
En esto:
Primero necesitamos este html:
<input type="submit" class="miBoton" value="Botoncito" />
que produce el mismo que en el inicio.
Ahora asumiendo que tenemos una hoja de estilos incluida como ya hemos definido, podemos de este modo ir agregando formas y colores a nuestro botón. Como todos ya sabemos un botón tiene 3 estados que son:
- Normal
- Hover
- Active
y para cada uno podemos definir distintas reglas de estilo, con el objetivo de que el botón sea dinámico y cambie de estilos con cada acción del usuario, ya que si lo dejamos plano parecerá que es una imagen y no sera tan intuitivo hacerle click.
Bien primero definamos el estado normal:
.botoncito {
background-color:#44c767; //color de fondo
-moz-border-radius:28px; //bordes redondeados (mozila)
-webkit-border-radius:28px; //bordes redondeados (chrome y sfari)
border-radius:28px; //bordes redondeados todo lo demas
border:1px solid #18ab29; //linea del borde
display:inline-block; //layout definido
cursor:pointer; //forma del cursor al entrar
color:#ffffff; //color de la letra
font-family:Arial; //tipografia
font-size:17px; //tamaño de letra
padding:16px 31px; //espacio entre la letra y el borde
text-decoration:none; //que no esta subrayado ni nada
text-shadow:0px 1px 0px #2f6627; //sombreado para el texto
}
Como ven definimos una serie de cosas, que por cierto, no es necesario volver a definir para todos los estados, mas bien para cada estado del botón simplemente definimos lo que queremos que cambie o bien que se agregue al estado “normal”, por ejemplo para el estado “hover” que es cuando pasamos el cursor por el boton, tenemos que solo cambiara ligeramente de color, así:
.botoncito:hover {
background-color:#5cbf2a;
}
Noten que la clase se llama igual, y para diferenciar la acción se le pone un :<acción> después del nombre de la clase.
Y finalmente en la acción “active” que es cuando el usuario hace click, hacemos que el botón se mueva ligeramente hacia abajo para dar la impresión de que se agacho
.botoncito:active {
position:relative;
top:1px;
}
Estas “acciones” se pueden ir aplicando a cualquier elemento html que se encuentre en el documento, y así lograr un markup mas limpio y entendible.
Cabe mencionar también que no necesariamente tiene que ser una clase a la que le vamos a poner una acción, bien podría ser un elemento directo, o un id, las acciones responderán igual.
Propiedades CSS
Hay un listado bastante extenso de propiedades, y realmente nos tomaría muchísimo tiempo estudiarlas todas en un solo post, no obstante es importante conocerlas todas y que efecto tienen sobre nuestros elementos.
Es por eso que les dejo este link en donde podrán encontrar una lista completa de TODAS las propiedades CSS que existen hasta su versión 3 (CSS3) :
http://www.htmldog.com/reference/cssproperties/
Y hasta aquí ustedes ya deberían tener un conocimiento básico de como utilizar CSS en sus aplicaciones. Mas adelante si Dios me da licencia publicare mas tutoriales de como seguir utilizando CSS3, pero por el momento espero que esto haya sido de su utilidad.
Saludos!