Why CSS?

Posted by Bang sgg | 12:25 PM | | 0 comments »

The old way of changing the way your text looks in HTML has been outdated. The new way to do it is by using style sheets. Learning CSS (Cascading Style Sheets) is really worth the effort. One main reason is for consistency - you don't have to remember every single detail of how each font is set up. There is also a factor of readability when you are looking at the raw code. It also saves a lot of work. Instead of having to type all the font attributes each time you need to change the formatting, all you have is a simple "span" or "p" tag. And all that is needed to change the look of your fonts site-wide is simply change the attributes in the Cascading Style Sheet

Basic CSS text style definitions:

The style definition starts with a dot (.) then a name for the style. Make it descriptive and easy to remember. (Built-in tags such as H1 tags, etc. do not start out with a dot.)
The definition is surrounded by curly braces { and } and the individual attributes are separated by a semicolon (;)

To set the font family, size and weight:

.smalltext {"Times New Roman", Times, serif;
font-size: 10px;
font-weight: normal;
}

You can change the color and make it bold:

.redtext {"Times New Roman", Times, serif;
font-size: 12px;
font-weight: bold;
color: #FF0000;
}

You can make it a san-serif font and increase the spacing between the lines:

.spacedtext {
font-size: 12px;
font-weight: bold;
line-height: 150%;
color: #000000;
}

You can make it look like it was typewritten:

.couriertext {"Courier New", Courier, monospace;
font-size: 14px;
font-style: normal;
line-height: 100%;
font-weight: normal;
}

To make it italic and underlined:

.underlineditalic {
font-size: 12px;
text-decoration : underline;
text-decoration : italic;
color: #000000;
}

To make a line through the text use:

text-decoration: linethrough;

You can center the text, left or right-justify:

text-align:left
text-align:right
text-align:center
text-align:justify

To apply the styles to your text, you can start the paragraph off with the "p" tag (p class="normaltext") for example, interrupt the format in mid-sentence if you wish with the "span" tag (span class="redtext") then resume the regular font by simply closing the span tag. Note: The tags above are surrounded by the greater than sign (<) and the less-than sign (>) but there is no way to display them properly in this article.

Hint If you wish to make a habit of changing font attributes in-line, you'll want to be sure to keep your font sizes, line height, etc. consistent.

Allen Howard is the senior Technical Support Representative for InfoServe Media, LLC. InfoServe Media is a full service business Website design company in Houston, TX.

Custom Web design is our specialty.

In addition to exceptional website design that even a new business can afford, we also offer hosting and domain names. We can design a site that you can easily make minor changes to, yourself - and you won't have to worry about using style sheets. We can build just about any site from a full-blown e-commerce site to a small "Presence" website. See our website for complete website design and hosting solutions including website promotion, Search Engine Optimization (SEO) services, and more.

helolololo

0 comments