Curso básico de HTML y CSS, Parte 2: Aprendiendo CSS

  • SHARE

En esta entrada, continuaremos con el curso básico, esta vez aprendiendo CSS. Puedes ver la Parte 1 del curso haciendo clic aquí. Para recordar un poco, con HTML logramos obtener el siguiente site:

Es relativamente funcional, pero no tiene personalidad ni todos los elementos que queremos. Para pulir los aspectos restantes, utilizaremos CSS.

CSS (Cascading Style Sheets) es el hermano de HTML y es otro tipo de código que todos los navegadores entienden por predeterminación. El CSS define los estilos de nuestro sitio: colores, fuentes, tamaños, entre otros.

Para entenderlo un poco mejor, podemos pensar que tenemos una bicicleta en la que el HTML corresponde a las partes (cuerpo, ruedas, frenos, asiento) y el CSS a las características (color del cuerpo, grosor de las ruedas, potencia de los frenos, forma y altura del asiento).

Para colocar estilos a nuestro sitio, una de las formas más sencillas es usar la etiqueta <style>, dentro de la cual colocaremos nuestro código.

Hagamos la prueba modificando algunos elementos:

Para ver los resultados, abrimos nuestro index.html en un navegador.

Sintaxis de un CSS

En un CSS deben existir reglas, selectores, propiedades, valores y separadores.

Selectores

Los selectores definen zonas o elementos de nuestra página web que luego ubicaremos en el HTML.

En este caso, el selector body hace referencia a la etiqueta HTML del mismo nombre que se refiere a todo el cuerpo de nuestro sitio. Los selectores pueden referirse también a atributos id y class.

Trabajemos sobre otro archivo que llamaremos index2.html para hacer los cambios y ver cómo quedan.

Nota: podrás encontrar este archivo ejemplo aquí.

Tenemos una página simple sin ningún estilo a la que agregaremos un selector universal. Un selector universal aplica las reglas descritas dentro de él a todos los elementos que se encuentran dentro de nuestro HTML. Está representado con un asterisco (*).

Al aplicar un color dentro del selector universal, todos nuestros elementos deberían tomar ese color al menos que se indique lo contrario con otro selector.

Si queremos definir un estilo para cada categoría de elemento, nos conviene usar un selector de tipo. Este selector aplica diferentes estilos a diferentes elementos que debemos luego identificar en el HTML. Si queremos estilos diferentes para nuestros párrafos y títulos, simplemente usamos las referencias p y h1, h2, etc.

Siguiendo el código de arriba, nuestro site debería verse así:

También podemos definir el estilo de zonas específicas asignándoles una identificación mediante un hashtag (#). Para ello se utiliza el selector de id, en el que asignamos características más específicas para zonas únicas de nuestro sitio. Ejemplo: #seccion1

Observemos que la sección 1 se encuentra tanto en el CSS como en el HTML. Este sería el resultado:

Si queremos aplicar estilos aún más específicos para subdivisiones de nuestro website, podemos usar un selector de clases. Este selector nos permite trabajar con el atributo class y se indica con el uso de un punto (.). Ejemplo: .miarticulo

Copiamos y pegamos el mismo texto para simular la existencia de dos artículos diferentes. Pueden tratar cambiando las frases en su archivo para entender y apreciar mejor los cambios.

Habiendo entendido el funcionamiento de los selectores, podemos jugar un poco con las características para ver cómo cambia nuestro site.

Pseudo-clases

Una pseudo-clase se utiliza para definir un estado especial de un elemento. Para escribirlas necesitamos colocar el nombre del selector seguido por dos puntos (:) y el nombre de la pseudo-clase, de esta forma:

selector:pseudoclase { propiedad: valor; }
#selector:pseudoclase { propiedad: valor; }
.selector:pseudoclase { propiedad: valor; }

Por lo general, las pseudo-clases se utilizan para definir el estilo de un elemento cuando se enfoque, cuando un usuario pasa por encima de él (hace hover), o para marcar la diferencia entre un enlace visitado y no visitado.

Crearemos un archivo index3.html para trabajar por separado las pseudo-clases.

Siguiendo este código, en nuestro navegador podremos visualizar el siguiente sitio:

Empecemos por las pseudo-clases basadas en el historial del enlace, esta nos mostrará de forma predeterminada las etiquetas <a> de color azul cuando no hemos visitado esa página y de color morado cuando ya la visitamos (ver imagen anterior).

Para modificarlo, usaremos las pseudo-clases correspondientes :link (no visitado) y :visited (visitado).

Podemos definir los colores por nombre, pero para tonos más específicos debemos usar su código. Consigue aquí la lista de códigos de colores.

Si visitamos el enlace a davecast, veremos cómo cambia de color.

También existen pseudo-clases según el comportamiento del usuario (:hover, :active y :focus) que funcionan bajo las etiquetas legend e input.

Existen otras etiquetas que aunque no usemos es importante conocerlas:

  • Form: usada para contener formularios.
  • Fieldset: sirve para contener los elementos del formulario. Dentro de ella, usamos legend para los títulos e input para la información a introducir por el usuario.

La pseudo-clase :hover se refiere a cuando el usuario pasa por encima de una zona o enlace con el puntero. Si aplicamos el código anterior, nuestro enlace o texto debería cambiar de color.

La pseudo-clase :active hace referencia a la acción del clic. Cuando el usuario haga clic nuestro elemento cambiará de color por el tiempo de duración del clic.

Estas dos pseudo-clases se pueden colocar en cualquier elemento HTML.

La pseudo-clase :focus solo está permitida sobre los elementos que requieren el uso del teclado.

¡Hasta aquí llegamos en esta segunda parte del curso básico!

En la siguiente parte veremos más pseudo-clases y aprenderemos un poco sobre los pseudo-elementos, para luego aprender a combinar y asignar valores correctamente en nuestra hoja de estilo.

¡Hasta la próxima! 🙂

IMPULSA
TU COMPAÑÍA
David Castillo
LEE MAS DE
Desarrollador web en 1Entity. T.S.U en informatica, Ing. en Sistemas y futuro Diseñador Gráfico. Apasionado por la tecnología y programación en desarrollo web. Enamorado de la buena comida y en abundancia.
HAZ CRECER TU
NEGOCIO
Únete a nuestra newsletter y recibe gratis contenido exclusivo valorado en más de $107.
ebook ebook-mobile
x
HAZ CRECER TU NEGOCIO
ÚNETE A NUESTRO NEWSLETTER
Y RECIBE GRATIS
CONTENIDO EXCLUSIVO VALORADO EN MÁS DE $107
No, gracias. No quiero que mi negocio crezca.
( Cero spam, Lo odiamos tanto como tú. )