• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar al pie de página
Pampua

Pampua

Diseño web y marketing online

  • Servicios
    • Diseño web
    • Marketing digital
    • Mantenimiento web
  • Portfolio
  • Sobre mi
  • Blog
  • Contacto

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

Hoy vemos una breve introducción al CSS, qué es exactamente, para qué sirve, cómo se utiliza. Todo lo más sencillo posible para que no te pierdas.

01/11/2018 Por Ramón 2 comentarios

https://roptex.com/podcast/podcast37.mp3

Apple Podcasts | Google Podcasts | Spotify | Pandora | RSS

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

Hoy te voy a contar:

  • ¿Qué es CSS, realmente?
  • Anatomía de una regla CSS
    • Selector
    • Declaración
    • Propiedades
    • Valor de la propiedad
    • Seleccionando varios elementos
    • Diferentes tipos de selector
  • EL PODCAST DE LA SEMANA

¿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 un PDF creado 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!

Quizá te interese:

Análisis web de una empresa de regalos
Los 18 errores más comunes en diseño web
Los 18 errores más comunes en una página web
buyer persona
Porque debería definir hoy mismo mi buyer persona

Publicado en: Podcast Etiquetado como: css, diseñoweb, web, wordpress

Interacciones con los lectores

Comentarios

  1. Alvaro dice

    01/11/2018 a las 12:46

    Siempre he soñado con aportar valor, como tú en este post, pero en podcast. Gracias por la recomendación.

    P.D. Si alguien escucha el podcast, podría verse involucrado en asuntos legales.

    Responder
    • Ramón dice

      01/11/2018 a las 12:48

      Jejeje 😂 Pues seguiremos haciendo lo posible por aportar valor. Y si no, siempre nos quedará el chocolate “Valor”

      Responder

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Footer

Contacta conmigo

De L a V de 9:00 – 21:00
Av. Maisonnave, 5, 8D, 03003 Alicante
Aviso legal - Privacidad
© 2002–2023 Ramón Prats

Podcast

En los 122 episodios del podcast "Diseño Web" he ido compartiendo un montón de consejos para que puedas optimizar tu web fácilmente.

Newsletter

Apúntate y accede a contenido exclusivo gratis con el que quincenalmente te ayudaré a mejorar tu presencia online.

Blog

Lee las últimas publicaciones del blog o mejor aún, suscríbete por RSS. Dicen que de vez en cuando publico algo interesante ;-)

Uso las dichosas cookies para darte una mejor experiencia en esta web.

Puedes informarte más sobre qué cookies uso o desactivarlas en los AJUSTES.

Powered by  GDPR Cookie Compliance
Resumen de privacidad

Utilizo las cookies en mi web para poder ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a visitar la web o ayudarme a comprender qué secciones de la web encuentras más interesantes y útiles.

Cookies estrictamente necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.

Cookies de terceros

Esta web utiliza Google Analytics para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

Dejar esta cookie activa nos permite mejorar nuestra web.

¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!