Inline styles are those that you add with the text editor interface.

Inline styles have to be changed individually. If your client decides that he/she wants purple paragraph text instead of grey or a different font for the headlines, you would have to open up every article and change these settings manually if you are using inline styles.

Inline styles can really mess up a responsive web design. Images won't reduce in size, text may hang out over the edges, all sorts of bad things can happen.

Inline styles can not be overwritten with styles from style sheets.

How does a person put in inline styles?

When you go and change the font or the color or the size with the icons on the editor, this creates an inline style.

If you use the image icon to insert an image then add a float, width, height and margins using the dialog box, this is inline styling,

If you create a table and make it 500px wide with the text editors settings, this is inline styling.

How can I tell if inline styles were already used?

There are a couple of ways to tell if an article has inline styles for specific elements.

Use Firebug or other Web Developer Tool

There are web development tools available for each of the main browsers, Firefox, Chrome, Internet Explorer and Safari. These tools allow you to look under the hood of a live website and see the underlying HTML structure. They also allow you to select an element on the page and see exactly what styles are being applied, down to what style sheet and what line on the style sheet.

If something has inline styles, you will see that in the column showing the styles as well. It will show something like this:

element.style {
    font-family: "arial black","avant garde";
}

If you look at this element in the HTML side of Firebug, you will see this:

<span style="color: #99cc00; font-size: 18pt;font-family: 'arial black', 'avant garde';">

What is highlighted in the example above are inline styles.

What should I use instead of inline styling?

You should use class names instead of inline styling in most cases. Some styling, like making something bold, is acceptable to a point. Extensive use of inline styling can be a nightmare to fix.

Set up classes in your style sheet. You then apply the class to the various elements in the text editor. Class names allow you to easily change things through out your web site with minor edits to the class in the style sheet. Class names allow you to change the layout for elements for narrow screens. You may want the images to float left for wide screens, but then have the text below the image on narrow screens.

Instruct your contributors to use these class names instead of the icons that add inline styles in the text editor.

If you use the JCE Editor extension, you can set it up so it links to your style sheet and all existing class names show up in the Styles drop down menu.

What can I do to get rid of existing inline styling?

If you open up the article or Custom HTML module in a text editor, you can toggle the editor and see the underlying HTML for the content. You can go in and edit out the inline styles manually. You can also add the class names this way, too.

If you have the JCE Editor extension installed, there is a little pink and white eraser icon in the tool bar. If you drag your cursor through all your content, then click on this little icon, it will remove all inline styles, but keep the basic tags in place. You can also select specific items in the text editor and use this icon for removing the inline styles for just that one item. JCE Editor has many places to add class names to replace the inline styles.

Other sources for inline styling

It could be that the inline styles are being added by JavaScript.

For instance, your slideshow images are hanging out beyond the screen on smaller devices. This is usually because the slideshow program adds inline height and width to the image with JavaScript. This is a common problem. Look for a slideshow extension that works with responsive websites. You can't change these settings with styles in your style sheet.

 


Has BJ.Zemplate.com helped you with understanding Joomla?

If you would like to make a small contribution to help fund this resource, that would be great, but do not feel obligated in any way.

Donation Amounts


Still not finding a special topic?

Use Google's Search function below for search the content of bj.zemplate.com.