Formatting Content with CSS on a Templated Site

Noobie question

[Livenomadic]

I have a site that uses a CMS. This CMS uses one template for all its pages. The template uses an external css file to format the page. I am trying to make the page xhtml transitionally valid

However, if I want to change the color of a section or text, or bold some text I cannot do it when I am entering the document into the CMS's WYSIWYG editor because it just pages <b> and color= valids into the documents which makes it not a valid page.

I have to edit the templates external CSS file and add classes for each effect I want .red .blue .green .yellow .bold etc...

There has to be a better way, any suggestions.

[vkaryl]

Ah.... well, I was waiting to see if someone HAD that better way....

Doesn't look like there's a real simple fix for this. I really think you're going to have to bite the bullet and rewrite the CSS from scratch (well, not entirely - you can no doubt maintain what's there already....), AND strip the deprecated tags etc. out of the html.

Stripping the deprecated tags/styling instructions is what's icky and time consuming. I used to have to do it by hand, which is enough to give one a migraine just considering it! Then I got my current editor which has a function specifically for this. It's not perfect, but it does give you a big head start in the right direction.

In fact, sometimes it's easier to let your head stay wrapped around deprecated html to begin with (especially f'rinstance when I'm deep into "create" mode and changing gears into CSS will trash my focus....), then have the editor "fix" it for you.... This editor is a nice piece of work, very useful for "back and forth" between the two....

[createErrorMsg]

Livenomadic, obviously, you are going to have to make some changes to the CMS stylesheet. However, it can be a one time thing if you think ahead a little.

(Disclaimer: what I'm about to say does NOT an efficient css file make. It will add bulk to the stylesheet (probably no more than a kilobyte,, if even that, but still) and make it more complex. Furthermore, it may unnecessarily litter your source code with spans and divs and class names, but it WILL make updating the stylesheet easier. Pick your evil.)

One way to avoid making a hundred minute (MI-noot) CSS changes is to make a list of all the possible stylings you might want to apply to individual elements in the course of writing content to your CMS. The list might include...

italics
bold
all caps
underline
overline
line-through
right align
left align
center
justify
display inline
display block
red text
blue text
green text

Make a section in the stylesheet for these little changes and create a class for each one...
/*---MINOR CONTENT STYLES---*/
.italics{font-style:italic;}
.bold{font-weight: bold;}
.allcaps{font-variant:small-caps;}
.underline{text-decoration:underline;}
.overline{text-decoration:overline;}
.crossedout{text-decoration:line-through;}
.right{text-align:right;}
.left{text-align:left;}
.center{text-align:center;}
.justify{text-align:justify;}
.inline{display:inline;}
.block{display:block;}
.red{color:red;} /*obviously, use HEXDEC colors, not keywords*/
.blue{color:blue;}
.green{color:green;}

Once this is done, you can drop these classnames into any element in your content to style it the way you want.

Obviously, the more efficient way is to identify elements that you know you will want displayed a certain way and style those elements directly in the CSS, but for on the fly article styling, this method works at the cost of a slightly larger cSS file and content occasionally littered with <span class="italic red">.

cEM

[Livenomadic]

Thanks guys, I know what I'm gonna do now.

I'm gonna take what you guys said. I realized i dont need to many styles,

Bold
Italics
etc...

The hidden benefit of this is that all my pages (stylistically) will look the same.