¿Qué es el CSS y cómo se utiliza?

Hoy vamos hablar de que es el CSS, para qué sirve, cómo usarlo, precauciones, etc. pero antes, demos paso al patrocinador!!!:

Ya está disponible la nueva gama de altavoces inteligentes de Amazon desde 35,99€

Tienes 4 modelos diferentes. A mi, personalmente, el Echo Spot me tiene enamorado por la pantalla que incorpora. Te permite controlar por voz la reproducción de música en Amazon Music y Spotify, las emisoras de radio en TuneIn, las secciones de noticias y mucho más: todo ello sin mover un dedo.

Si ya eres Prime, tienes Prime Music, que te permite escuchar en streaming más de 2 millones de canciones de los artistas más populares del momento, sin anuncios ni ningún coste adicional.

Amazon Music Unlimited te ofrece acceso a más de 50 millones de canciones, entre las que se incluyen los últimos lanzamientos, por solo 3,99 € al mes para un dispositivo Echo. Amazon Music Unlimited es gratis durante 14 días tras configurar por primera vez el dispositivo Echo. Una vez termine este periodo, puedes conseguir una prueba de 30 días gratis.

Informate de todo en pampua.es/amazon

¿Qué es CSS, realmente?

Como el HTML, el CSS no es realmente un lenguaje de programación. Es un lenguaje de hojas de estilo, es decir, te permite aplicar estilos de manera selectiva a elementos en documentos HTML. Por ejemplo, para seleccionar todos los elementos de párrafo en una página HTML y volver el texto dentro de ellos de color verde, has de escribir este CSS:

p {
  color: green;
}

Anatomía de una regla CSS

Observemos al CSS de antes, un poco más a detalle:

p {
  color: green;
}

La estructura completa es llamada regla predeterminada (pero a menudo “regla” para abreviar). Nota también los nombres de las partes individuales:

Selector

El elemento HTML en el que comienza la regla. esta selecciona el(los) elemento(s) a dar estilo (en este caso, los elementos p ). Para dar estilo a un elemento diferente, solo cambia el selector.

Declaración

Una sola regla como color: green; especifica a cuál de las propiedades del elemento quieres dar estilo.

Propiedades

Maneras en las cuales puedes dar estilo a un elemento HTML. (En este caso, color es una propiedad del elemento p.) En CSS, seleccionas qué propiedad quieres afectar en tu regla.

Valor de la propiedad

A la derecha de la propiedad, después de los dos puntos (:), tenemos el valor de la propiedad, para elegir una de las muchas posibles apariencias para una propiedad determinada (hay muchos valores para color además de green).

Nota las otras partes importantes de la sintaxis:

• Cada una de las reglas (aparte del selector) deben estar encapsulada entre corchetes ({}).
• Dentro de cada declaración, debes usar los dos puntos (:) para separar la propiedad de su valor.
• Dentro de cada regla, debes usar el punto y coma (;) para separar una declaración de la siguiente.

Así que para modificar varios valores de propiedad a la vez, solo necesitas escribirlos separados por punto y coma (;), así:

p {
  color: green;
  width: 500px;
  border: 1px solid black;
}

Seleccionando varios elementos

También puedes seleccionar varios elementos y aplicar una sola regla a todos ellos. Incluye varios selectores separados por comas(,). Por ejemplo:

p,li,h1 {
  color: green;
}

Diferentes tipos de selector

Existen muchos tipos diferentes de selectores. Antes, solo hemos visto los selectores de elementos, los cuales seleccionan todos los elementos de un tipo dado en los documentos HTML. Sin embargo podemos hacer selecciones más específicas que esas. Estos son algunos de los tipos de selectores más comunes:

Nombre del selector	Que selecciona?	Ejemplo
Selector de elemento (llamado algunas veces selector de etiqueta o tipo)	Todos los elementos HTML del tipo especificado.	p Selecciona <p>
Selector de identificación (ID)	El elemento en la página con el ID especificado  (en una página HTML dada, solo se permite un unico elemento por ID).	#my-id Selecciona <p id=”my-id”>y <a id=”my-id”>
Selector de Clase (el que más suelo usar)	Los elementos en la página con la clase especificada (una clase puede aparecer varias veces en una página).	.my-class Selecciona <p class=”my-class”> y <a class=”my-class”>
Selector de atributo	Los elementos en una página con el atributo especificado.	img[src] Selecciona <img src=”myimage.png”> pero no <img>
Selector de Pseudo-clase	Los elementos especificados, pero solo cuando esté en el estado especificado, por ejemplo cuando el puntero esté sobre él.	a:hover Selecciona <a>, pero solo cuando el puntero esté sobre el enlace.

Existen muchos más selectores y miles de opciones de propiedades y valores para esas propiedades, así que para los que queráis ampliar conocimientos, os dejo en las notas un PDF creado por @Manz con los que más se usan.

Y ahora…

EL PODCAST DE LA SEMANA

Hoy quiero recomendaros “Quédate con el cambio, sabandija asquerosa” una especie de “mastermind” en el que Dave y Álvaro comparten sus devenires por este mundo del emprendimiento y aportan su peculiar visión. Son episodios de 1h de duración que aportan muchísimo valor con un toque de humor. Muy recomendable.

Como siempre, los puedes escuchar en iTunes, iVoox, Spotify, Youtube, etc.

Y esto ha sido todo por hoy, si ya conocías el CSS y has echado algo en falta, cuéntamelo! O si te ha quedado alguna duda o te gustaría que tratase algún tema en concreto pásate por pampua.es y déjame un mensaje; estaré encantado de comentarlo contigo.

O si lo prefieres en los comentarios de iVoox, en twitter @pampua, o en nuestra página de Facebook: facebook.com/pampua

Si te ha gustado este episodio compártelo al menos con una persona a la que pueda resultarle interesante. Por whatsapp, por mail, por  Facebook, twitter o incluso por SMS, como quieras, pero compártelo! Recuerda que puedes escucharlo y suscribirte en iTunes, iVoox, Spotify, Youtube y desde la web de pampua.es/podcast.

Y por último estaré inmensamente agradecido si me dejas una reseña de 5 estrellas en iTunes o un me gusta y un comentario en iVoox. Puedes ver cómo dejar una reseña en www.pampua.es/resena

El jueves que viene seguiremos con el tema del CSS, y os explicaré como personalizar un theme usando CSS.

Muchísimas gracias por escuchar hasta el final, por comentar, por tus “Me gusta” y reseñas. Nos escuchamos la semana que viene llueva, nieve o truene!