Lesson - 9

Fonts and Color - Adding Styles to your Announcements

WYSIWYG allows you the ability to add different Fonts, Sizes and Colors

As we covered earlier, discretion is needed in the use of too much color and too many different font faces and sizes. 

It is recommended that you use Coast Guard Auxiliary Standard colors on your site


Some colors JUST don't belong, can look very unprofessional  




Use Bold Fonts For Headlines ONLY


Highlighting Text 

You are able to use Fonts, Highlighting, Underlining, Strikethrough and much more. Just take time to sit back and look at your page in "preview", have another flotilla member review it before posting for public and or member view. 

To be able to Highlight Text   

  • After typing your sentence or paragraph
  • Select the sentence or paragraph you want to highlight
  • go to <li> at the bottom of the Text area (your icon may be different due to where you are at in your announcement, it could be <Div>, <p>, <ul>, <span>, <tab>
  • While you have your text selected, hover your cursor over the icons to see the effect it would have.

  •  Click the <"TAG"> you wish to use
  •  Click Highlight, choose the color you want to use. 


Changing Fonts

You can change fonts almost a easy as highlighting text

 The default CSS text is Arial 12 pixels. This can be changed by;

  • After you have entered your text, select the Sentence or paragraph you wish to change the font on.

  • Click on the <TAG> below, click on Properties
  • Select Style builder in the file tabs    

The System Font text box is a drop down menu with the following styles of font;

  • Caption
  • Icon Labels
  • Menu Text
  • Messagebox
  • Small Caption
  • Status Bar

The Font Family text box is a drop down menu with the following font faces;

  • Arial (default)
  • Veranda
  • Comic Sans MS
  • Courier
  • Georgia
  • Tahoma
  • Times New Roman
  • Wingdings -  


Style Builder allows you to "Decorate" your text; 

  • Underline
  • Overline
  • Strikethrough Text


You are able to "Style" your text;

  • Bold
  • Italic
  • Capitalization; Not Set, Uppercase, Lowercase, Initial Cap


You will have to choose the "Size" of your text;

  • Not Set
  • XX-Large
  • X-Large
  • Large
  • Small
  • X-Small
  • XX-Small
  • Larger
  • Smaller  
Or you are able to set Font Size By;


  • px - pixel
  • pt - point
  • pc - pica
  • cm - centimeter 
  • mm - millimeter
  • in - inch 



The relation between the absolute units is as follows: 1in = 2.54cm = 25.4mm = 72pt = 6pc

 CSS requires that 1 px must be exactly 1/96th of an inch in all printed output.



Changing Colors

WYSIWYG Announcement Editor the default (recommended) colors are WOW Red and WOW Blue

But there are however other colors available through the "Style Builder" and just like highlighting text or changing fonts, adding or changing color is just as easy.

  • After entering your text, select the sentence or paragraph you want to colorize
  • Click on the <TAG> below
  • Open the Style Builder File Tab
  • Click on Color
  • Choose the color you want for your font.

In Style Builder you are able to customize your announcement. Always preview you page prior to saving it. When you are finished building your page, SAVE,SAVE, SAVE! 






Exercise 9

  • Add a new announcement with four lines of text
  • Set each line to a different font Family
  • Set each line to a different font size
  • Set each line to a different color
  • Set each line to a different Style/Decoration (e.g., underline, strikethrough, bold, italic)

New Announcements can be added easily



Caution should be taken with use of color 



The use of more than two Font Faces is not recommended 



The recommendation is to use the Nation Standard colors