customize your text
CRASH COURSE TUTORIALS — learn how to code!span
font-family
font-size
color
text-transform
letter-spacing
background-color
you may notice that plain text in the AFF editor, with just the < p > tag and nothing else, gives you somthing like this:
Hi. This text looks quite plain and simple. It's alright for a story, but for a layout, it needs a little more OOMPH!
pretty boring, right? in this tutorial I'm going to teach you how to make your text more attractive, like the text you're reading right now. to begin editing your text, first choose a font and size in the editor. you can also choose a highlight color and font color.
i'll do font Verdana, size 10, colored teal. let's compare the text with its source code.
Hi. This text looks quite plain and simple. It's alright for a story, but for a layout, it needs a little more OOMPH!
< p >< span style="font-family:verdana;" >< span style="font-size:10px;" >< span style="color:#008080;" >Hi. This text looks quite plain and simple. It's alright for a story, but for a layout, it needs a little more OOMPH!< /span >< /span >< /span >< /p >
this source code looks a bit messy; i like to clean it up a little bit by deleting all the text highlighted in blue. each attribute for the text is located in a span tag and separated by a semicolon. the font-familly attribute tells you the font. the font-size tells you the font size, and color tells you the color.
some other attributes you can try are:
letter-spacing: #px
text-transform: uppercase/lowercase
background-color: #hexcode
the generic text i use has the following attributes:
font-size: 11px
text-transform: lowercase
letter-spacing: 1px
font-family: arial
color: #000000
personally, i like to use arial in most of my layouts, with one px letter spacing. feel free to try out your own combinations and see what looks best for you!
thanks for checking out crash course tutorials! upvote and subscribe for more updates.
Comments