CSS: Introducción - Parte 1 de ayuda y consejos para nuevos webmaster

Primera entrega de consejos para nuevos Webmasters. En esta ocasión, consejos para nuevos programadores. Uso de CSS.

Todos empezamos desde cero y, algunos, empezamos por hobbie, por lo que no tenemos mucha ayuda. Esto es un pequeño empujón.

Haremos diferencia sólo entre HTML y CSS, pero entiéndase por HTML al lenguaje de escritura de código, y no a la extensión del archivo.

CSS (Cascading Style Sheets, Hojas de Estilos en Cascada) se usan para cambiar la forma en que se muestra nuestra página en una pantalla. Son un método mucho más ordenado, puesto que permiten especificar una sola hoja de estilos que puede ser llamada desde un número infinito de páginas en HTML.

Una hoja de estilos tiene una forma como esta:

body {

    background: #0F0;
    color: #FFF;

    font-size:16px;
}

.cabeceras {

    color: #F00;

    font-size: 40px;
}

En este ejemplo, "body" se llama selector, y lo que está {entre llaves} son los estilos.
El ejemplo anterior es exactamente lo mismo que:

body {background: #0F0;color: #FFF;font-size:16px;}
El estilo de una clase se anota entre {llaves de este tipo}, cada atributo se usa atributo:valores, y se separa por punto y coma; ... selector {atributo1:valor1; atributo2:valor2;}

Puedes, al igual que en HTML, tener todo el código en una línea. Tú eliges como usarlo.

1. Cómo adjuntar una hoja CSS a nuestro HTML
   La forma es muy sencilla
   <link rel="stylesheet" type="text/css" href="RUTA/NOMBRE.css" />Con eso ya está llamado.
   
   
2. Nociones básicas de CSS
   Tenemos 3 formas de selectores para aplicar un estilo que hayamos definido en CSS, a un objeto en HTML.
   a) Class
   b) ID
   c) Etiqueta HTML
   
   Llamar mediante class.
   Para esto, en nuestro HTML usamos:
   <h1 class="cabecera1">Mi Web</h1>
   Y en CSS usamos:
   .cabecera1 {color:#FFF; más atributos...}
   El estilo se aplicará a cualquier objeto que contenga class="cabecera1", aunque no sea una cabecera. Si escribimos <p class="cabecera1">párrafo de escritura</p> se llamará de igual forma a la clase especificada.
   
   Nótese el .punto en el selector
   
   Llamar mediante IDHTML:
   <h1 id="cabecera1">Mi Web</h1>CSS:
   #cabecera1 {color: #FFF; más estilos...}
   Por restricciones al usar ID, no podemos repetir la misma ID en dos objetos (o, al menos, no debiéramos).
   
   Nótese el #gato en el selector
   LLamar por etiqueta en HTMLHTML:
   <h1>Mi Web</h1>CSS:
   h1 {color: #FFF; más estilos}
   En este caso, todas las etiquetas h1 en HTML serán tratadas con el estilo especificado.
   -------------------------------------------------------------------------
   Además existen pseudo-clases y pseudo-elementos. i.e, "a" especifica un link, por lo tanto, con a{estilos}, cambiaríamos el aspectos de los links. Pero tenemos pseudo-clases /elementos para a:
   
   a:link - links en estado natural
   a:hover - links con el puntero encima
   a:active - links al hacer click sobre ellos
   a:visited - links visitados
   
   "p" para párrafos, ocupa p:first-letter, para la primera línea del párrafo.
   
   "input" de formularios, ocupa input:focus, para el campo en que tenemos el cursor. Varios elementos pueden soportar :focus.
   
   
3. Conductas especiales con CSS (aplicar varias, poner condiciones)
   a) Un elemento HTML puede contener class e ID, y puede contener más de una clase:
   <p id="parrafo1" class="noticia actualidad">info.....</p>"noticia" y "actualidad" son dos clases distintas. Se separan simplemente por un espacio.
   Se asume que un elemento no puede tener dos IDs.
   
   b) Podemos definir los mismos valores para distintas clases o IDs:
   .menu, .nav-izquierda {atributos...}".menu" y ".nav-izq" son clases distintas. Se separan simplemente con una coma. Podemos especificar mismo valores para un ID y para una clase.
   
   c) Podemos restringir la aplicación de estilos:
   p .noticia {atributos...}
   Se aplicará el estilo a los elementos que contengan class="noticia", sólo si están dentro de un párrafo.
   Así mismo, .noticia p {atributos...} se aplicará a los párrafos que estén dentro de elementos que contengan class="noticia". Podemos añadir más condiciones:
   #menu li a:link se aplicaría a los links dentro de una lista, sólo si la lista está dentro de un elemento que contenga id="menu".

Hasta aquí la introducción a CSS. 

En la segunda parte empezamos con atributos, valores, y más!