CSS is used to style and design HTML elements by applying rules that specify selectors, attributes, and values. CSS rules consist of a selector that identifies the element to style, an attribute to modify like color or size, and a value for the attribute. CSS can be applied on TFM by clicking elements to auto-generate rules and make live changes to previewed content. Examples demonstrate how to modify display, visibility, position, colors, fonts, backgrounds, and target specific app screens.

1. Social Marketing that Performs

2. Fast Guide to Dominate CSS

3. What does it do? CSS is used to give style to an HTML
this means
CSS is used to define the appearance (design) of an HTML
HTML without CSS HTML with CSS

4. How does it work?
For each change that you wish to do to the
appearance of your HTML you must create a rule on
CSS
A CSS rule consists of:
Selector {
Attribute: Value;
}
Which can be translated to:
WHERE to make the change {
WHAT change make: HOW MUCH change make;
}

5. Components
A CSS rule consists of:
Selector {
Attribute: Value;
}
Selector:
Is an element or content
That can be found on your HTML
It can be a text, an image, a video, a button,
anything that you have set on your screen!

6. Components
A CSS rule consists of:
Selector {
Attribute: Value;
}
Attribute:
It is a property or characteristic
that the selected content has.
It can be the size, the position, the color, the font,
the background, or even the very same presence
of the content, since you have the possibility of
removing it from the screen!

7. Components
A CSS rule consists of:
Selector {
Attribute: Value;
}
Value:
Is the meassure in which a value is specified.
This definition can be expressed as a
percentage, an amount of pixels, a hexadecimal
combination, a url, or any otherone depending on
which was the selected attribute.

8. How do I apply it
on TFM? On the “Whitelabel” step, on the
“Application style sheet” step,
click on the full screen icon to
visualize the loaded content on
each scren of your app and
therefore be able to select it to
write your own CSS rules.

9. How do I apply it
on TFM?
Just click over an element, and then the selector and the structure of the CSS
rule will automatically appear on your left panel so you can complete them with
the attributes and values that you wish.
Once you define them, click on the save icon and you’ll be able to watch the
changes on the screen!

10. Some Examples

11. Examples To remove a content:
Selector {
Display: none;
}
Attention:
When applying this change all the content that
was written under the deleted selector will be
moved upwards.

12. Examples To hide a content:
Selector {
Visibility: hidden;
}
Attention:
When applying this change all the contents will
remain on their original positions since the hidden
selector, that is no longer visible on screen, will
still occupy its designated space.

13. Examples To change the position of a content:
Selector {
Position: relative;
Top: 50px;
Right: 200px;
}

14. Examples To change the color of a content:
Selector {
Color: #F781D8;
}

15. Examples To change the size of a typography:
Selector {
Font-size: 50px;
}
You can also add to this rule:
Font-family: Courier New;
Font-weight: bold;
Text-align: center;
Text-transform: uppercase;

16. Examples To change the background of a content:
Selector {
Background:
url(http://tfmadmin.s3.amazonaws.com/Demo/LogoTFM.png);
}
You can also add to this rule:
Background-repeat: no-repeat;
Background-size: 50%;
Background-position: 100px 200px;

17. Examples
To apply a change to a specific screen of the app, add the
prefix that corresponds:
.home.registered Selector {
Attribute: Value;
}
Prefixes by Screen:
Preview: .comingPromos
Home: .home
Home Variants:
Home – Before Entering: .home.start
Home – After Entering: .home.registered
Home – Ended Action: .home.finished
Register: .register
Ranking: .viewentries
Specific Participation: .entry

18. Examples To write an internal note that serves as a reminder or
explanation:
/* Write your text between this signs */

19. For more information, contact:
support@thefanmachine.com