CSS and Text
Everything on this page is intended to help you with CSS and text. There is so much to learn and try with text and CSS,
so I hope you'll get something out of this tutorial!
Font Families
Unless you specify a different font family for your CSS to use, it will use whatever the browser uses as a default font.
By specifying what font family, or tyle of font you want, you have more control over the look and feel of your text.
When using CSS you will put the font in the body section of CSS, like so;
body
{
The Information will go here.
}
Now, there are many kinds of fonts you can use, but use discression! Make sure you pick one that is easy to read.
Also, make sure you don't pick a font that you downloaded. Not everyone has that font, so when they go to your site,
they won't see that font but something else. Commonly used fonts are Times, Arial, Verdana, Tahoma, Trebuchet, and Trebuchet MS.
Time to implement the font now. Going to your code, but this inside the body section;
body
{
font-family: [your font here];
}
Example;
body
{
font-family: Tahoma;
}
There is a lot more to font families, so I reccomend researching it on your own time. But let's move on to more exciting things!
Font Size
When changing your font size, be careful. You don't want to have font that is too big or too small, which would make it awkward to
read either way. Along with that, there are different ways to specify what size you want your font to be. I will only
teach you one way, because that is the most practical way. I suggest reading this link
for more info on font sizes!
body
{
font-family: Tahoma;
font-size: 10px;
}
As you can see, along with the family, I've now added what size. Decide on a number and put px after it. Anything below about 9 or 10 pixels is
probably too small. Anything above 12 is probably too big.
Font Color
I'm sure you're getting the hang of things now. Changing font colors is as easy as changing size and family! There are two and a half ways to change
font color. I'll show you in examples, because they are pretty self explanitory.
body
{
font-family: Tahoma;
font-size: 10px;
font-color: #000000;
}
Or...
body
{
font-family: Tahoma;
font-size: 10px;
font-color: black;
}
Now for the half way. In way of saying "Font-color" you can just say color, like this...
body
{
font-family: Tahoma;
font-size: 10px;
color: black;
}
Other Text Tricks
Here are some random things I've learned that also add to the coolness of text. Don't overuse them though! The most important
thing in regards to text is that it is easy to read.
Increase or decrease space between lines of text;
body
{
line-height: 10px;
}
Make all text capital;
body
{
text-transform: uppercase;
}
Make all text lowercase;
body
{
text-transform: lowercase;
}
Put spacing in letter, or decrease spacing. Simply put + or - accordingly with a number.
body
{
letter-spacing: +2px;
}
Adding a text-decoration. Options; underline, overline, line-through, none. Tip! By putting text-decoration: none; the
line underneath links is removed.
body
{
text-decoration: none;
}
|