Este documento ofrece una guía rápida para dominar el lenguaje de hojas de estilo en cascada (CSS), explicando que CSS se usa para dar estilo y diseño al HTML, cómo funcionan las reglas CSS y sus componentes básicos como selectores, atributos y valores, y proporcionando ejemplos de cómo cambiar la apariencia de elementos mediante CSS.

1. Social Marketing that Performs

2. Guía Rápida para dominar el CSS

3. ¿Para qué sirve? El CSS se usa para darle estilo al HTML
es decir
El CSS se usa para definir la apariencia (diseño) del HTML
HTML con CSSHTML sin CSS

4. ¿Cómo funciona?
Para cada cambio que quieras hacer en la apariencia
de tu HTML debes crear una regla en CSS
Una regla de CSS consiste en:
Selector {
Atributo: Valor;
}
Lo cual se traduce a:
DONDE hacer el cambio {
QUE cambio hacer: CUANTO cambio hacer;
}

5. Componentes
Una regla de CSS se compone de:
Selector {
Atributo: Valor;
}
Selector:
Es un elemento o contenido
que se encuentra en tu HTML
Puede ser un texto, una imagen, un video, un botón,
¡lo que sea que haya configurado en la pantalla!

6. Componentes
Una regla de CSS se compone de:
Selector {
Atributo: Valor;
}
Atributo:
Es una propiedad o característica
que posee el contenido seleccionado.
Puede ser el tamaño, la posición, el color, la
tipografía, el fondo, ¡o incluso la presencia misma
de un contenido, siendo que tienes la posibilidad
de eliminarlo de la pantalla!

7. Componentes
Una regla de CSS se compone de:
Selector {
Atributo: Valor;
}
Valor:
Es la medida en la cual se especifica un atributo.
Esta definición se puede expresar como una
medida de porcentaje, una cantidad de pixels,
una combinación hexadecimal, una url web, u
otra dependiendo del atributo seleccionado.

8. ¿Cómo lo aplico en
TFM? En el paso “Marca blanca”
(“Whitelabel”), en la sección
“Hoja de estilos de la aplicación”
haz click sobre el ícono de pantalla
completa para visualizar el
contenido cargado en cada
pantalla de tu app y así poder
seleccionarlo para escribir tus
propias reglas de CSS.

9. ¿Cómo lo aplico en
TFM?
Simplemente haz click sobre un elemento, y entonces el selector y el esqueleto
de la regla de CSS aparecerán automáticamente en tu panel izquierdo para que
los completes con los atributos y valores que desees.
Una vez que los definas, haz click sobre el ícono de guardar ¡y podrás observar
los cambios en pantalla!

10. Algunos Ejemplos

11. Ejemplos Para eliminar un contenido:
Selector {
Display: none;
}
Atención:
Al aplicar este cambio todo el contenido que se
encontraba debajo del selector eliminado será
desplazado hacia arriba.

12. Ejemplos Para ocultar un contenido:
Selector {
Visibility: hidden;
}
Atención:
Al aplicar este cambio todos los contenidos
mantendrán sus posiciones originales dado que el
selector ocultado, si bien ya no será visible en
pantalla, aún se le respetará el espacio que
ocupaba.

13. Ejemplos Para cambiar la posición de un contenido:
Selector {
Position: relative;
Top: 50px;
Right: 200px;
}

14. Ejemplos Para cambiar el color de un contenido:
Selector {
Color: #F781D8;
}

15. Ejemplos Para cambiar el tamaño de la tipografía:
Selector {
Font-size: 50px;
}
A esta regla se le puede agregar también:
Font-family: Courier New;
Font-weight: bold;
Text-align: center;
Text-transform: uppercase;

16. Ejemplos Para cambiar el fondo de un contenido:
Selector {
Background:
url(http://tfmadmin.s3.amazonaws.com/Demo/LogoTFM.png);
}
A esta regla se le puede agregar también:
Background-repeat: no-repeat;
Background-size: 50%;
Background-position: 100px 200px;

17. Ejemplos
Para aplicar un cambio a una pantalla específica de la
aplicación, agrega el prefijo que corresponda:
.home.registered Selector {
Atributo: Valor;
}
Prefijos por Pantalla:
Preview: .comingPromos
Home: .home
Variantes del home:
Home - Antes de Participar: .home.start
Home - Luego de Participar: .home.registered
Home - Finalizada la Acción: .home.finished
Registro: .register
Ranking de Participaciones: .viewentries
Participación Específica: .entry

18. Ejemplos Para escribir una aclaración o dejar una nota interna
que sirva de recordatorio:
/* Escribe tu texto de esta forma */

19. Para más información, contacta:
soporte@thefanmachine.com