How to Change Text Formatting Using CSS Stylesheet Classes

The simple steps below apply to any website, except for Step 7.

Use Firefox and Firebug plugin to change Text Formatting Using CSS

1. Download the Firefox Browser

Firefox has a plugin that will allow you to view the CSS Class that formats text in your website.  Other browsers, like Internet Explorere, Crome, Safari, etc to not offer this plugin.

Download Firefox and Firebug plugin

2. Down the Firefox plugin called Firebug

You can skip this step if you have already installed the firebug plugin.  You will need to restart your browser after you install the firebug plugin.  

Open Firefox and Firebug plugin to view CSS on your page

3. Open the Firebug plugin

Go to the page where you want to edit the formatting of your text.

Click the icon in the lower right portion of your browser to launch firebug.  Then click the Inspect Element button in the toolbar

Select the text area on the page you want to change

4. Select the Text Area you want to change

As you hover over parts of your page, you will see selectable areas that are highlighted with blue boarders, as you hover over them.  Technically speaking, each of these areas reprents a DIV tag.  The style you will be changing is applied to that DIV tag.

Select the section of text you want to edit. 

Practice Changing Font and Size settings. See results instantly.

5. Adjust the Text Settings (font, size, etc)

You can play with any of the settings and instantely see the results in your browser.  These changes are not saved, they only let you see the impact of changing the settings.

Copy CSS Class text

6. Copy the CSS Class into your computer's memory

Once you have the new settings the way you want, copy the CSS Class into your browser's memory.

From your SiteNinja Admin/Settings/Advanced screen, add CSS Text

7. Add the CSS Text to the Additional Styles field

If you do not have a SiteNina CMS website, you will need to apply this step using the correct method for your website.

Log into your SiteNinja Admin/Settings/Advanced page and Paste your copied CSS text into the Additional Styles field.  Scroll to the bottom of the page to save your new settings.

Enjoy the new changes to your website

8. Enjoy your new Text Formatting