What are CSS Styles?

While text can be made different colors, as well as justified and made bold, etc, within the WebManager page content window - some users find a need to make the font larger, or the space between lines bigger, or utilize justified alignment, etc.

With CSS styles, you can also apply a text style that is easily made available on all of your pages, rather than having to customize text colors or weights on each page.

The following text examples utilize CSS styles:

Standard Web Manager Text
{font-size:69.5%;font-family:"Lucida Grande", Verdana, Helvetica, sans-serif;}

Custom CSS Text for Content
{font: 12px/20px Arial, Helvetica, sans-serif; color: #333333; text-align:left; }

Custom CSS Text for Headlines
{font: 14px Georgia, "Times New Roman", Times, serif; color: #CC0000; }

Custom CSS Text for Subheadlines
{font: bold 12px Arial, Helvetica, sans-serif; color: #003366; }


Choosing a CSS Style

This is best done by taking steps to plan out your CSS styles. If you have lots of headings and titles, it makes sense to create a few headline-type styles. If you have paragraphs of text, it is important to create a style with an appropriate line-spacing. It usually isn't a good idea to utilize too many different types of fonts or colors, as this can create a confusing site.

A great resource for planning your CSS style can be found at www.csstypeset.com - this is a tool which enables you to make on-the-fly adjustments to text, while viewing what it will look like. It also supplies the finished CSS code for you.


Types of FontsSerifs and Sans Serifs

There are two types of fonts available - Serif and Sans-Serif. Serif fonts have small characters at the end of the strokes, while Sans-Serif fonts do not. For reading on a computer monitor, studies have shown that paragraphs are more easily viewed when using a Sans-Serif font. Serif fonts may be reserved for headlines or single lines of text.

Another thought to consider is that there are only a few universal fonts which are appropriate for use on the web. While many computers have a large number of fonts, not all of them display well across different operating systems, browsers or monitors. The following article on the "Top 10 (Web Safe) Blogging Fonts" is a handy visual reference.


Incorporating your own CSS Stylesheets

If you have the resources to create your own .css style sheets, it is possible to incorporate these into your site. This can enable you to customize < hr / > tags, < strong > tags, < div > layouts, etc. You can either:

Incorporate a reference to an externally hosted stylesheet by pasting the following code into the beginning of an individual page's HTML code:
< link href="YOUR STYLE SHEET.css" rel="stylesheet" type="text/css" />


or

If you are an administrator for your site and wish to use a custom stylesheet across all of your pages, you can include the reference code from above in your Website Settings page. Paste it directly into the "Custom Javascript" box and click Save. This will automatically apply your style sheet to all of your pages.

Please take care if choosing either of these routes, and be sure to check your page in more than one browser! 

 


Print version





Search

Enter your search terms below and hit the 'go' button



Site Map Site Map

Find a Center

Enter your zip code to find your nearest Salvation Army

Donate

Donate

Events

December, 2014
SMTWTFS
 01 02 03 04 05 06
07 08 09 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31

Email Newsletters

Subscribe to our email newsletters.