When you install the free 3rd party extension JCE Editor and enable it under Global Configuration, you will see that you have many more options for creating and styling content.

The dashboard for JCE Editor contains numerous icons that are actually modifying the HTML language that the editor is creating in the background as you type. See the joom3 article on HTML basics to help you understand what is happening as you create your content. Understanding the basic concepts can help you troubleshoot issues with your content if it is not appearing as you wish on your web page.

In some cases the icon will create the HTML code for that attribute, other times is will create style="" for that element. Either way, using the icons to style your text is what is called "inline" styling. This will override any styles set up with your stylesheet. Using the pulldown selector for styles will utilize the styling in your stylesheets, but you must first link your stylesheets to JCE Editor in order for those classes to appear in the pulldown selector.

Keep in mind, that you may want to utilize CSS stylesheets and using classes for styling your text elements. This keeps a consistent look throughout your site, makes for faster styling with the text editor and makes global changes to your site's styling much faster and easier.

The JCE Editor Dashboard

The JCE Editor text editor for Joomla

ICONEXPLANATIONHTML TAGS
help Help: Clicking on this will take you to the JCE Editor Help Documentation  
newdocument This will clear out all the contents in the text editor window.  
undo This will undo the last thing that you did. You can go back several steps with this button. You can also undo the last steps by using the keystroke of CNTL + Z  
redo The will redo the last thing in which you used undo  
bold This will make the text bold. You can click on this icon, then type, then unclick the icon or you can drag your cursor across existing text, click on this icon, and just bold the text that is highlighted. <strong></strong>
italic This will make the text italicised (slanted) <em></em>
underline This will underline the selected text. <span style="text-decoration: underline;">
strikethru This will put a line through the text. <span style="text-decoration: line-through;">
justify This sets the text to be justified on both the right and the left. Letter spacing will widen to make each line fit. style="text-align: justify;"
justifycenter This sets the text to be centered. style="text-align: center;"
justifyleft This sets the text to be left justified.  This is the default value for HTML, but there are times that you may need this to overwrite other styling for that element.  style="text-align: left;
justifyright This sets the text to be right justified.   style="text-align: right;
blockquote This sets the text to be in a <blockquote> tag which will set it apart from the other text. The blockquote can be then styled using CSS - but by default it is indented from the body of the content on both sides. Quotation marks are not put into the text by the browser.  <blockquote></blockquote>
format This pulldown selector will allow you to select what sort of formatting tag you wish to use for the text. The default settings for JCE Editor is to place the content into <p> paragraph tags unless specified otherwise.  
paragraph This pulldown selector will allow you to select what sort of tag you wish to use for the text. The default settings for JCE Editor is to place the content into <p> paragraph tags unless specified otherwise. <p> </p>
div

If for some reason you need a section of your content set apart into a containing <div> tag for styling purposes, you may do that here.

If you highlight a certain portion of text then select the Div from the pulldown slector, it will replace the current containing tags - so be a little careful.

Once you have set this apart with the <div> tags , you can either style it using a predetermined CSS style from the style pulldown selector or you can add inline styling by using the icon with the purple and blue As. 

<div> </div>
heading HTML has elements that are called heading tags <h1> through <h6>. These should be used rather that taking paragraph text and styling it to be bold, a different font, etc. Search engines see the heading tags as more important for SEO purposes. <h1> </h1>
thru
<h6> /<h6>
span A span tag will allow you to add special styling to a small section of text within a separate tag. You won't see the portion of text change until you add the styling. Styling for <span> tags may aslo be added in the CSS. The <span> tag will be added at each end of the selected text.  <span> </span>
styles The styles pulldown selector will allow you to select from existing styles in any CSS sheets that have been assigned to JCE Editor in it's configuration setup. Click here for the joom3 article on How to link a CSS Stylesheet to JCE Editor. class=""
removeformatting This will remove any special formatting that has been applied. For example if you had made a certain of section bold and want to remove that formatting, highlight that section of text and click on this icon.  
fontfamily You can manually change the font for a selection of text.  This will add inline styling with a <span> tag for that selection. Inline styling will override and CSS styles for that text.  It is suggested to use CSS styling over inline styling whenever possible. You may add/remove fonts to the default font list within the JCE Editor Configuration section. <span style="font-family: verdana,geneva;">
fontsize  You can manually change the font size for a selection of text.  This will add inline styling with a <span> tag for that selection. Inline styling will override and CSS styles for that text.  It is suggested to use CSS styling over inline styling whenever possible. You may add/remove font sizes to the default font size list within the JCE Editor Configuration section. <span style="font-size: 14pt;">  </span>
fontcolor  This will change the color of the text.  You can select the color before entering the text and the following text will all be the chosen color until you change to something else, or you can highlight a section of existing text and change its color that way. You can select from standard colors or from colors designated by your template with the Colour Picker by selecting More Colors. You may also add your own standard colors in the JCE Editor Global Configuration. <span style="color: #ff0000;">  </span>
backgroundcolor  This will add a background color to the selected text. <span style="background-color: #339966;"> </span>
cut  This will cut the highlighted text and make it available for pasting elsewhere. This is not available in some browsers, but you can use CNTL+X to cut highlighted text.  
copy  This will copy the highlighted text and make it available for pasting elsewhere. This is not available in some browsers, but you can use CNTL+C to copy highlighted text.  
paste  This pulldown selector gives you options for pasting the text that you just cut or copied. The selections are to paste the text with the identical formatting or to paste it as plain text. You will get a clipboard dialog pop up where you select CNTL+V to paste then insert the text.  
 indent This will indent the line of text by 30px. It adds an inline style of margin-left. If you use it twice it will add a margin-left of 60px. style="margin-left: 30px; 
outdent  This will remove the indenting of margin-left by 30px. It will only be available if the style of a margin-left has already been applied.  
 orderedlist This will create a ordered list, or numbered list The numbering will continue until you hit enter or return twice.

<ol>
<li></li>
<li></li>
</ol>

 
unorderedlist 

This will create a unordered list, or bulleted list. The bullets will continue until you hit enter or return twice.

<ul>
<li></li>
<li></li>
</ul> 
 subscript This will make a subscript out of the highlighted text. <sub> </sub> 
superscript  This will make a superscript out of highlighted text. This can be used if you like to use 2nd rather than 2nd.  <sup> </sup> 
 casechange This will make the selected text all UPPER CASE, lower case, Sentence case or Camel Case. It actually changes the letters to the chosen case and does not impose inline styling. Sentence case will make the first letter of every sentence selected upper case. Camel Case will make the first letter of every word upper case.  
 symbols This is used for inserting certain symbols. A dialog box will appear with a chart of available symbols.  
 hrtag This will add a <hr/> tag which creates a horizontal line. <hr/> 
lefttoright This adds the parameter of dir="ltr". This means the text will read left-to-right. It is the default direction for Joomla, so it is not required to select this unless you are attempting to overwrite other styling. dir="ltr"
righttoleft This adds the parameter of dir="rtl" or right-to-left.  This may be required for certain languages to be read properly. dir="rtl"
 fullscreen This switches to a full screen editor for length content.   
preview  This allows you to preview the content - though it really isn't a true preview.  
htmleditor  This is a toggle that switches you to a source code editor where you can edit the HTML. It is different than the Toggle Editor selection as the source code editor will insert closing tags and show you line numbers as well as other editing tools.  
 print This will open up your browsers printer dialog box. You can then print to your printer of if it is available, it will be able to print to a .pdf document.  This is great for sending to a client for review. Note, it just prints the content of the text box, not the entire page or the web page that the content will be placed into.  
search  This will open up a dialog box with Search and Replace tabs if you want to find a certain string of text in you content.  
 replace This will open up a dialog box with Search and Replace tabs if you want to find a certain string of text in you content and replace it with something else.  It can work on all instances of that content or replace case by case.  
createtable 

This will create a table.  A dialog box will ope allowing you to select how many rows and columns you want the table to contain. Rows and columns may be added or removed later using other icons.

A series of boxes will appear - that may be very tightly spaced.  To insert text into the table, click inside the box. The boxes will all expand to fit the text.

Once the table exists on the page, other table icons will become available for adding and deleting rows and columns and spitting or merging cells.

<table border="0">
<tbody>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>

 link This will open up a dialog box for creating links to other web pages.  You may enter the URL for pages outside of your Joomla site, or you may select from pages within your site. This is a very powerful tool. joom3 has an article on Using JCE Editor's Link Features. <a href="/ "> </a> 
img This is used for inserting an image into your content.  It is a very powerful tool. joom3 has an article devoted to the multiple features of JCE Editor's Image Manager. <img src="/" alt="" />
spellcheck

This will run a spell check on your content. You can choose from a list of spell checking programs in the JCE Editor's Configuration under Editor Profiles. Click on Spell Checker and you can select the Engine for the spellchecker (ie GoogleSpell) and add multiple languages.

Misspelled words will have a red squiggly line below them.  If you click on the word, a dropdown selection will appear where you can choose from possible correct spellings.

 
readmore

This will enter a Read More break into the content. Use this if you have a teaser for the article in a Category Blog or Featured Article page. The words Read More... will appear at the bottom of the teaser and the user can click on that to read the entire article.

This does the same thing as the Read More button under the editor.

<hr id="system-readmore" />
pagebreak

This will enter a Page Break into the content. If you have a very long article that you wish to spread out into multiple pages, you can use this.  Depeding on your settings for Page Breaks, you may have pagination at the bottom of the page, a Prev and Next button and/or a menu of all the headings for the various sections of your articles.

This does the same thing as the large Page Break button under the text editor.

<hr class="system-pagebreak" title="" />
article-button

This will insert a link to another article on your Joomla site. It will prompt you to select from a list of all of the existing articles. It will use the title of the article for the link - but you can edit that if you wish.

Highlight the link text in the text editor and select the Link icon if you wish to change any of the parameters of the link.

<a href="/"> </a>
image-button This can be used to insert an image into your content. It uses the Joomla Media Manager interface.  I strongly recommend that you use the image icon in the JCE Editor's dashboard, it is much more powerfull and user friendly. <img src="/" alt="" />
pagebreak-button

This will enter a Page Break into the content. If you have a very long article that you wish to spread out into multiple pages, you can use this.  Depeding on your settings for Page Breaks, you may have pagination at the bottom of the page, a Prev and Next button and/or a menu of all the headings for the various sections of your articles.

This does the same thing as the large Page Break icon in the text editor dashboard.

 
readmore-button

This will enter a Read More break into the content. Use this if you have a teaser for the article in a Category Blog or Featured Article page. The words Read More... will appear at the bottom of the teaser and the user can click on that to read the entire article.

This does the same thing as the Read More icon in the text editor dashboard.