How to style content of pages without adding css class to element?

Question

I use CMS for client and client doesn't know CSS he use WYSIWYG editor to put content in pages. Client adds Paragraphs, images, images in paragraph (left or right floated), ordered and unordered list, Tables. Problems comes when he want to add images in paragraph (left or right floated). and without adding css class it's not possible. And i don't want to add <div> in content because WYSIWYG editor can't manage div and client works in WYSIWYG mode.

How to style content of pages without using css class?

Answer 1

You can try using element selectors or ID selectors to add styles to HTML elements without referencing CSS class in them.

Element selector would add border to all images on the page:

img { border:1px; }

ID selector would do the same only to image with ID 'image1':

img #image1 { border:1px; }

Still you will need to reference the stylesheet from your page.

Answer 2

There are lots of different ways you can make CSS Selectors that don't require CSS classes. For example, to make a rule that applies to all img tags inside p tags, you could write this:

p img { float: left; }

But how are you hoping to determine which images need to be right-aligned and which images need to be left aligned? Does that data exist in the document in any machine readable format?

Answer 3

You will need your user to add a css class/style attribute to the image somehow - without adding something to the image to tell it to float right or left it won't float right or left.

If your question is how the client can add the class without having to manually edit the html I reckon the only way is to dive into the wysiwyg editor's javascript and write something a bit like this towards the end of the image adding process:

var alignment = prompt("Type l to align the picture to the left, and r to align the picture to the right","l").strToLower();
if(alignment == 'r')
{
   //line of code to add class "right" to the image tag
} else {
   //line of code to add class "left" to the image tag
}

What the code to add the classes should be will depened on how the wysiwyg editor works

Answer 4

A WYSWYG should have "align" property for an image (at least those I have seen). You can then use CSS attribute selector img [align=left] { float:left; } or img [align=right] {float:right;} This wont work on IE 6,7 though, you can use JavaScript to mimic this for those browsers.