FYI: Posts will be sparse around here until I replace my laptop.... Coming back to work after Christmas break apparently was too hard and it quit on me!

13 September 2011

Tuesday's Tips -CSS Basics Text

I've posted many tutorials on how to create different things for your blog. In each of those tutorials I've mentioned ways that you can customize the object. I've gotten several questions asking for more ways to customize the CSS. So I'm going to start a little series on CSS Basics. Some of the topics will include backgrounds, borders, text styles, links, and more. That way you'll have a better understanding of what CSS codes you can add to customize the tutorials. =)
Last week I covered borders, and this week's topic is on text.

Font-Family
font-family:Century Gothic, Verdana, "Arial", Sans-Serif;
this section picks which font the text is in, simply put the quotation marks around the font you wish to be used

Font-Size
font-size:110%;
font-size: 20px;
this section determines the size of the text, you can choose a specific size in pixels or by percentage 

Font-Style
font-style: italic;
this section determines whether your text is italic, bold, underlined, or none

Font-Color
font-color:#BAB9B3;
this section determines the color your text is, use the html color code ([here] is an online color picker, use the number at the top)

Spacing
letter-spacing:2px;
this determines how far apart the letters are, they can be positive or negative numbers

Alignment
text-align:left;
this determines where the text is aligned; left, right, or center

Transformation
text-transform:none;
this determines if the text is transformed to uppercase, lowercase, or none


The Big Picture
This is an example of what a finished section of html for text would be:
font-family: "Courier", Century Gothic, Verdana, Arial, System;
font-size: 100%;
font-color:#000000;
font-style:none;
letter-spacing:0px;
text-align:left;
text-transform:none;

This is another example:
font-family: "Century Gothic", Arial, Times New Roman;
font-size:120%;
font-color:#f5dc4c;
font-style: none;
letter-spacing: -1px;
test-align:left;
text-transform: none;

If you have any questions, let me know.
Also if you have any suggestions for a topic for me to cover for Tuesday's Tips--I'd love to hear it!
Have a wonderful day!

Love in Christ,

2 comments:

Ruby J. Plank

You are so helpful! You have the BEST tutorils!

Ruby J. Plank

P.S. Please check out my HTML-ified blog (blockqoutes, Navebar remove, Date and Post, header (not rotating), button, ETC!)

Post a Comment

Leave your thought...