Subject: [css-d] reset all applied styles for selector?

From: rick at starskiweb.co.uk (Rick Hurst)
Date: Mon, 28 Apr 2003 19:26:41 +0100

Is there a way to clear/reset all styles applied to a selector without 
having to specifically overide them?

We are doing some work on a content management system interface where 
styles have already been applied to selectors such as <p> and we want to 
  "reset" them for certain situations without editing the default 
stylesheet.

e.g. if the styles already applied in the default stylesheet are 
something like:-

p {font-size:2em;color:red;margin:20px;}

and in our custom interface we want to use something like

#mystyle p {(ignore all styles already applied to p without overiding 
them one by one)}

---

From: ckestes at bewb.org (Jason Estes)
Date: Mon, 28 Apr 2003 13:51:15 -0500

> having to specifically overide them?

You can use the specificity in CSS to override the values.  So if the values
are originally set with p {declarations}
you can use body p{declarations} which has a higher specificity.  You can
replace body with whatever the parent selector is.

Jason Estes
The BEWB
www.bewb.org

---

From: svendtofte at svendtofte.com (Svend Tofte)
Date: Mon, 28 Apr 2003 21:01:35 +0200

You'd still have to override all the individual rules, no? Otherwise they
would cascade in.

---

From: ckestes at bewb.org (Jason Estes)
Date: Mon, 28 Apr 2003 14:19:31 -0500

> You'd still have to override all the individual rules, no? Otherwise they

In the original email he said they were set up as

p {declarations}

and wanted something like

#mysite p {declarations}

but instead of applying an ID which would require modifying the markup, he
could just use a selector like

#wrapper p {declarations} where #wrapper is already the <div> surrounding
the content area. of if he wanted to apply the styles to all the p's then he
could use

body p {declarations} which would apply to all the p's on the page.

It's hard to account for specific circumstances of inheritance without
seeing the code though.  Maybe Rick could provide us some sample of what
he's got.

Jason Estes
The BEWB
www.bewb.org

---

From: steve at mrclay.org (Steve Clay)
Date: Mon, 28 Apr 2003 15:16:29 -0400

Monday, April 28, 2003, 2:26:41 PM, Rick Hurst wrote:
RH> Is there a way to clear/reset all styles applied to a selector without 
RH> having to specifically overide them?

No, *however*, you can use a copy of Mozilla's HTML.css file (the
browser's default stylesheet) as a guide to help you return properties
to their original values.  If you know a property was set and that
property can have a value of "inherit", set it to inherit.

RH> We are doing some work on a content management system interface where
RH> styles have already been applied

If a stylesheet is out of your control, it's out of your control.  You
can disable a stylesheet with javascript, but this isn't a solution.
Your situation is similar to writing a user stylesheet - In your case
the author is your CMS.  The only way is to redefine all the properties
you need control over.

This is another good reason to write stylesheets to take advantage of
inheritance.  It easier for everyone to write stylesheets to extend
the existing one.

Steve
-- 
http://mrclay.org

---

From: rick at starskiweb.co.uk (Rick Hurst)
Date: Tue, 29 Apr 2003 07:01:46 +0100

> and wanted something like

I probably wasn't being specific enough - i'll explain the set-up:-

There are two templates involved - one CMS admin template which already 
has a stylesheet attached (and needs to stay attached), and we have 
attached our own additional stylesheet and one public site template 
which has just our style sheet. Within the admin template you create 
"inner templates" such as "news item" which are inserted into the public 
site template, but the problem is when you try to preview these inner 
templates within the admin template, they also inherit the global styles 
from the admin style sheet.

The admin style sheet has rules defined for p, h1, h2 etc and so does 
our public style sheet, and although we can redefine each of these rule 
by rule, this means we would need to add loads of extra rules to our 
public style sheet to catch everything.

I was trying to find a way to stop the inheritance for everything within 
a particular div without having to overide the styles one by one.

Hope thats clearer!

---

From: steve at mrclay.org (Steve Clay)
Date: Tue, 29 Apr 2003 07:11:39 -0400

Tuesday, April 29, 2003, 2:01:46 AM, Rick wrote:
RH> when you try to preview these inner templates within the admin
RH> template, they also inherit the global styles from the admin style
RH> sheet.

Ooooh, you're preview environment is basically corrupted by an admin
CSS file that won't be there for the user, but you need /some/ of the
admin rules to keep the CMS "chrome" nice during preview.  Here are a
couple ideas for which you'll need a partial admin.css file with what
you don't want stripped out:

1) Write a bookmarklet that disables link to admin.css and adds link
to partialAdmin.css  You'd have to run this with every preview

2) Temporarily replace admin.css with partialAdmin.css on the server.
Try to tie the code to do this into the preview function of your CMS.

If partialAdmin.css can't be created, your dev team would just have
to live with the admin "chrome" being unstyled during preview.  Just
/move/ or disable admin.css temporarily.

HTH,
Steve
-- 
http://mrclay.org/

---

From: malaja at malaja.f9.co.uk (malaja)
Date: Tue, 29 Apr 2003 13:24:48 +0100

I hope some kind folk can help with a site check... please!

Given recent discussions on this list, especially regarding em's v % and
browser compatibility/hacks, I decided to create global templates that
address some regular issues. My aim is to create some sort of "Standard", a
good starter for people to use which also explains how the page builds from
beginning to final design.

The first of these templates is for a 3 column, cross-browser, cross
platform, standards compliant, table-less, fluid page. The first-draft home
page is at
http://www.china-and-west.com/cssTemps/layout1_3col/three_col_home.htm and
its layout is at
http://www.china-and-west.com/cssTemps/layout1_3col/three_col_testbasic.htm
. The layout test page is a bit messy but there so the code is seen at the
place of relevance in the layout.

I would appreciate site checks on as many platforms as possible. To save
cluttering the list with replies I would appreciate a direct reply unless
there are issues which may be of design relevance to all.

One intention is to fully comment both the CSS and page, so commentary is as
important as design competence.

I need the type of templates I am designing. At the same time I considered
they should be available to all, thus saving re-invention and enabling
designers (especially those new to CSS) to grasp some issues constantly
discussed on the list. I am happy to act as a conduit (do the work) to
benefit others. If, when finished, someone wants to put these templates on
their own CSS-help sites or in publications then okay, so long as this helps
towards good design standards.

When this one's complete I intend to produce fully commented templates for
2-column, photo album, and E-book pages. I'll add more if I'm not totally
exhausted after that!

Many thanks!

Mike A
Edinburgh, Scotland
[email-masked] (preferred for this subject)
[email-masked]
T. 00 44 31 664 6604