Embed Size (px)
Citation preview
Social Marketing that Performs
Fast Guide to Dominate CSS
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 with CSSHTML without CSS
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;
}
ComponentsA CSS rule consists of:
Selector {
Attribute: Value;
}
Selector: Is an element or contentThat 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!
ComponentsA CSS rule consists of:
Selector {
Attribute: Value;
}
Attribute: It is a property or characteristicthat 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!
ComponentsA 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.
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.
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!
Some Examples
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.
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.
Examples To change the position of a content:
Selector {
Position: relative;
Top: 50px;
Right: 200px;
}
Examples To change the color of a content:
Selector {
Color: #F781D8;
}
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;
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;
ExamplesTo apply a change to a specific screen of the app, add theprefix 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
Examples To write an internal note that serves as a reminder orexplanation:
/* Write your text between this signs */
