Recently I discovered something very cool in CSS while working on the new template of my college website. My college website uses the Pragyan CMS v2, which was written from scratch by the members of Delta Force ( or the Central Webteam of NITT ). Our college is one among those few institutions in the world which uses a home developed CMS for its website, all others use the free CMS like Mambo, Joomla, Drupal, etc. Now that is something which makes you proud of being in Delta, but not to forget every good things comes with some sacrifices. In this case, the Pragyan CMS uses a WYSIWYG editor that enables anyone anywhere in the world to change the content of each and every page of my website if he has the necessary permissions. The main problem which I faced because of this was while designing the template of the faculty pages. Every faculty of my college has been given permissions to edit the content of his webpage in the college website. Ofcourse this sounds reasonable, but the problem is that not all faculty members has a good sense of professional looking website designing. So they end up using odd colours, underlining, changing the text height and weight and font in order to make it more attractive. This is surely not acceptable in a professional website as all the pages needs to be uniform in styling as well as in content. So I pondered upon how to tackle this problem and wow! I got the solution.
What faculty members, or infact any user with permissions who uses the WYSIWYG editor for modifying the contents of the website, controls is the source code of that particular page while I control the main CSS stylesheet. So all I needed to ensure that even if they put tags like <font> and inline styling attributes like style=””, they shouldn’t work! And yes there is a way to do it. All you need to do is to make sure that your CSS settings override the inline stylings. This can be done by putting the !important tag next to the CSS attribute which you want to be permanent.
In cases like defining CSS for font and span tags where you dont want any specific pre-defined attribute to be used always, all you can do is to use the inherit option in place of the value of the attribute. This will make sure that whenever these tags are used inline in the HTML code, there styling is overridden by whatever styling there parent has. So even if you put a <font> tag inside the <h1> tag, then no matter what you specify in the font tag, the styling will always be done according to the CSS of the h1 tag. Ofcourse since you are also overridding the inline styling you also need to put the !important tag. Hence overall the code becomes :
font, span
{
font-family : inherit !important;
color : inherit !important;
text-weigth : inherit !important;
font-size : inherit !important;
text-decortation : inherit !important;
}
and to make sure that your CSS styles for h1,h2,h3,a,p,etc cannot be changed by inline styling, just use !important. For e.g.
h1
{
font-family : calibri, arial, verdana !important;
color : #000000 !important;
text-weigth : normal !important;
font-size : 1em !important;
text-decortation : none !important;
}
Now this will make sure that all the beautiful inline stylings done by faculty and staff members with no sense of webdesigning gets overriden. This is surely going to make some of them bang their heads as they wont be able to know why there tags aren’t working ! 🙂
@abhishekdelta - on life, universe and everything 