CSS Text Design Tutorial ~ CarautGraphics ~ ♥

CSS text design tutorial

Fonts made using CSS coding styles are capable of many things. They're easier to use than HTML font styles, and are able to do a lot more.

First, you will need to understand how a basic CSS font style sheet works, the parts of it, and how you can manipulate them. Later you'll learn how to add detail and different styles to your font.

        The white areas of the example are things you cannot change within your CSS style sheet. Starting and ending style tags, as with any style sheet, are required for the style sheet to work properly.
        The blue areas of the example is what section of text on your web page that the style sheet will be affecting. "td,p,body" is your main or automatic font. It will alter all the text on your web page without you adding any tags to the text.
        The pink areas of the example are areas that you can change or alter.

        There are three other forms of "main text" that you can alter within a CSS font style sheet. You can change the bold text, underlined text, and italic text on your web page as well. This is an example of a CSS style sheet containing all four:

The bold parts are the four different types of "main text" that you can customize. "u" stands for "underline", "i" stands for "italic" and "b" stands for "bold."

You can also add different extra font styles to your code. The nice thing about these is that you can add as many as you want. "h1", "h2", "h3" and so on are additional font styles that you can add onto your CSS font style sheet if you desire. This is what a CSS font style sheet looks like with the extra font styles:

Now that you know about the CSS font style sheets and how they work, you can start learning about the decorative styles that you can add to your style sheet.

Style Name	What It Does	Example Coding
color	Changes the color of your text.	color:#363636;
font	Changes the size and font of your text.	font:8pt verdana;
font-weight	changes the "weight" (boldness) of your text.	font-weight:normal;
background	Adds a colored background to your text.	background:#363636;
border-bottom	Adds a border to the bottom of your text.	border-bottom: #363636 5px dashed;
border-top	Adds a border to the top of your text.	border-top: #363636 5px dashed;

Here is what a CSS font style sheet with some mix and matched properties from the above table look when all together in an actual style sheet or code:

Now we're going to take the properties from the table and focus on each of them in their own section.

Changing the Color of Your Text

You can add in common colors such as black, white, green, red, yellow, or pink to change the color of your text, however, it is recommended that you use a color chart. Color charts have all the colors listed along with their color codes, so you can easily find any shade of any color you want. This one happens to be a personal favorite.

Changing the Font Properties of Your Text

      The size of your text ("8pt" as it is in the example) can vary, so add in whatever number you want. If you want really small text, try "7pt", if you want giant text, try "75pt", and if you want in between sized text try somewhere around "20pt".
       As for the font of your text, you can also use any font you would like. However, keep in mind that some fonts that you have on your computer others do not have on theirs. Some safe fonts are: Verdana, Arial, Impact, Georgia, Terminal, Courier New, Century Gothic, and Monotype Corsiva.

Changing the Font-Weight of Your Text

The font-weight property is one that can be somewhat hard to mess with, so I recommended only using the three basic properties of "normal" for not normal, not bold text, "bold" for bold text, and "lighter" for text that is lighter or thinner than normal text. However, you can also put in values such as 100, 200, 300, ect., all the way up to 700.

Changing the Background of Your Text

Just as for changing the color of your text, you can put in any color you'd like for the background of your text.

Changing the Border-Bottom/Top of Your Text

      As previously, you can change the color to whatever you would like. You can also change the size (5px in the example) to any size you would like, but I -highly- recommended not using giant sizes. It may distort your text/page and make it look a little "too much".
       Something new that you can change is the "dashed" part of this code. It's the pattern that the bottom or top boarder will be. You can change it to dashed, dotted, solid, and a few other properties, however, the other ones sometimes do not work on all browsers, so I do not recommended using them.

      You've completed the CSS font tutorial. Congratulations!

back to top ->
back to caraut graphics main ->