Podcast (episodios): Reproducir en una nueva ventana | Descargar
Suscríbete: Spotify | RSS | Más
¿Qué es CSS? Si quieres saber un poco más sobre fundamentos de la web, cómo están hechas las páginas web, conoceremos un poco más sobre CSS, el lenguaje que nos permite dar estilos a nuestra página web.
Noticias
Sacra nos comenta acerca de Tik Tok for Business lanza nuevas herramientas publicitarias enfocadas para las PYMES, y un Webinar realizado esta semana por Incyde de la Cámara de Comercio de Granada: Descubre TikTok para promover tu marca personal o empresa. Ponente: Pablo Sanmarco
David, nos avanza que las Stories llegan a la Web a través de un plugin para WordPress realizado por Google, que permite la creación de Stories, un formato de contenido efímero que puede ser una imagen fija o video corto que es muy popular en otras redes sociales como Instagram, que realmente tuvo ahí su origen.
Y Jesús, nos comenta que no entiende cómo se están haciendo populares las Stories, y comparte la noticia de Juan Hernando, que no las entiende.
¿Qué es CSS?
¿Para qué sirve el CSS?
Como hablamos en el programa anterior, dedicado al HTML, este «lenguaje» sirve para definir la estructura de la página. ¿Pero para qué sirve el CSS?
- Sirve para dar estilo a los elementos
- Funciona a base de selectores y propiedades
- Da color, tamaño y espacios a los elementos
- Explicaremos cómo se aplican estilos
- Hablaremos de la carga de estilos en style.css
- selector: define quien llevará el estilo
- propiedad: qué quieres cambiar
- valor de propiedad h1, h2, h3 { color: green; }
¿Qué son los selectores CSS?
Una vez que sabemos lo que son los selectores, hablaremos de los tipos de selectores que existen:
- Etiqueta HMTL
- Identificación
- Clase
- Pseudoclase
- Combinación
¿Cuáles son las propiedades CSS más habituales?
¿Y cuáles son las propiedades más habituales en CSS? A la hora de editar textos, hacer diseños, etc, hay que utilizar las propiedades CSS. Hemos estado comentando algunas de ellas y, sobre todo, cómo hay que trabajarlas correctamente. Algunas de ellas son las siguientes:
- font-style
- font-weight: 400;
- (500, 700)
- font-family: Open Sans;
- font-size: 14px;
- text-align: center;
- text-transform: uppercase
El modelo de caja
Una de los artificios más útiles a la hora de maquetar cualquier cosa en una web es el llamado modelo de Caja, un gran invento que permite hacer verdaderas virguerías, aunque conviene controlarlo muy bien si no queremos liarla parda. En el modelo de caja hay que tener en cuenta las siguientes propiedades y factores:
- height
- width
- margin
- padding
- Hacerlo adaptativo:
- min-height o min-width
Regla del reloj
La regla del reloj es fundamental a la hora de aplicar el modelo de caja. David cómo entender la regla del reloj como un ninja. En realidad es muy fácil, se trata de empezar por el lado superior y giramos en el sentido de las agujas del reloj. Aunque cuidado, porque hay excepciones. Aquí te dejamos algunos ejemplos, pero mejor que te escuches la explicación de David, que verás como ya no se te resiste.
- padding: 20px 30px 40px;
- padding-top: 20px;
- padding-right: 30px
- padding-bottom: 40px;
- padding-left: 30px;
Posición
Las cajas hay que colocarlas en alguna parte y de alguna manera con CSS, y para ello hay que utilizar algunas propiedades. No obstante, hay que seguir unas buenas prácticas que David nos cuenta, ya que a lo largo de los años, el CSS ha ido evolucionando y ya hay algunas cosillas que ya no se utilizan.
- clear
- float
- left
- top
- position
- z-index
Identificar clases
Los ninjas nos cuentan cómo identificar las clases CSS dentro de nuestra web. También nos cuenta cómo averiguar el ámbito de una clase o una propiedad: .clase1 .clase2 p { propiedad:valor }
¿Flexbox o CSS Grid?
¿A quién quieres más a Papá o a Mamá? Flexbox y CSS Grid son dos sistemas para maquetar con CSS, cuya diferencia es que el primero utiliza una dimensión (ya sea fila o columna), mientras que el segundo utiliza dos dimensiones. Se pueden hacer verdaderas virguerías, pero también tiene sus inconvenientes.
David nos cuenta cuál le gusta más, cuál utiliza habitualmente y dónde podemos encontrar la mejor documentación para aprender a utilizarlos.
Cómo cambiar estilos en WordPress
Una cosa es maquetar una página en HTML y CSS a pelo, pero otra es hacerlo para WordPress. Hay que tener en cuenta que las plantillas en WordPress tienen una estructura, están integradas dentro de una cola de carga de archivos que va integrada con los archivos que ya carga por sí mismo el propio WordPress.
Por este motivo hay que seguir unas buenas prácticas, para evitar perder el control y que luego no sepamos qué está ocurriendo en la web y por qué no aparecen los elementos como nosotros hemos definido.
Mejores prácticas
David nos cuenta cuáles son las mejores prácticas a la hora de maquetar un tema en WordPress. De eso sabe un montón porque tiene el culo pelao de crear temas a medida. ¿Cuáles son estas buenas prácticas?
- Utilizar temas hijo
- Utilizar siempre clases
- Definir el ámbito en el que queremos utilizar IMPORTANTE
- Heredar Clases: ahorrar en código
- No forzar espacios de cajas
- No usar !important;
Fuentes:
Si quieres saber un poco más, te dejamos aquí algunas fuentes para que amplíes información sobre este tema:
Charla Closemarketing: CSS para WordPress
El libro CSS Missing Manual