Styles.CSS and ASP.NET Newbie Questions

sstory · September 25th, 2003, 04:48 PM

Please help me understand how to use Styles.CSS with my ASP.NET pages.

I see
BODY
and other items in the file. Is BODY a class?

Doesn't a class name need to start with a period like .MyClass?

How can I best use it to define something for all of my labels?

Like NormalLabel {}
SmallLabel{}

Just put those in the styles.css?
Then do I need to put the class name in every label controls cssclass?

Using a . or just the name?

If so when do I use the default items and how?

Will results show up immediately in the IDE in VSnet 2003?

Please don't assume much when it comes to CSS used with ASP.NET.
What is the best practice and how? I haven't found one site that showed me what I was looking for.

Thanks,

Shane

planoie · September 25th, 2003, 05:55 PM

Take a look at the W3C Recommendation for cascading stylesheets. It's long and complicated but it's really not that bad. Sections to focus on are:
Basic concepts
and
Pseudo-classes and pseudo-elements

The first thing I do when I add a stylesheet to my ASP.Net projects is removed everything in it then write what I want. Get familiar with how the styles are applied to tags.

To answer your question: any word you see that is not preceded by a "." or "#" is a tag type. A style that follows one of these will apply to ALL occurences of that tag. So the BODY style at the beginning of the stylesheet sets the style for all <body> tags in the document (but of course, there is only one body tag). Usually, you'd put your "global" styles in the BODY tag style. That's where I put my font settings. One bit of advice however: there is some glitch with I.E. I think that causes the TD to not inherit a style defined for BODY. It seems every other tag properly inherits BODY's styles except for TD. So I always make my first "global" style "BODY, TD{...}" ("," serves to group styles. See below).

Here are a few examples of styles and what they match to:

.ClassName{} <-- Matches any tag that has <...class="ClassName">
TD.ClassName{} <-- Matches TD tag with <...class="ClassName">
TR.Header TD{} <-- Matches ANY TD tag that lives under a TR tag with <...class="Header"> (This is an example of Contextual selectors. You can pretty much go as deep as you want with the context. VERY handy for datagrids!)
TR.Header TD, TR.Footer TD{} <-- Matches a TD that lives in a TR with either "Header" OR "Footer" as its class.

Hope this is enough to get your started.

Peter

sstory · September 25th, 2003, 07:06 PM

Thanks Peter,

This is great info. I finally just experimented and see now that elements are page elements and you place a dot in front of Class names and use classes to define for heterogenous items.

After doing this and placing a class name in the cssclass property in the VSNET ide, my page actually used it in the IDE! Wow! This is very powerful.

I am starting to side with some folks who wrote a page that said, stop programming pages for the lowest common denominator like IE 4, and force people to upgrade their browsers. --of topic, but I think it is a good idea and would ensure that we can use newer technologies.

One last question please...

I have a user control Header.ascx. It has some links in it.
I won't those links to have a black color and different hover and visited colors than the ones in the normal page.

I know how to define the a:link in styles.css, but how do I make this exception in the user control.

Thanks for your help.

I am right on the edge of finally getting all of this. :)

I've been out of the loop for 3 years and I am playing a little catch up.

THanks,

Shane

Shane

planoie · September 25th, 2003, 07:23 PM

Assuming that you have a generic style set up for the links you just need to add something to make the ones in the user control different. It really depends on what you have for HTML in your user control. Long story short, if you have one tag container that surrounds the links in the user control (table?) all you'd need to do is add a context selector that's specific to that user control. If you don't have a master tag already, you could just throw in a div around everything in the user control. Seeing as the master tag you eventually use will most likely just be static HTML you could use the ID of the tag instead of the class because this would kind of conform to some hierarchy (i.e. there's only one div/table called "HeaderUC").

So your regular links are "A:link{}" and all the "A:??{}" variations while your user control styles will be "DIV#HeaderUC A:??{}". Because this definition is more specific than the first it should override correctly regardless of where it is in the stylesheet (before or after the standard "A:??{}").

Peter

viveku · September 29th, 2004, 06:30 AM

Hi,

Can i request a furture explanation and help to this as i too have a similar problem.

i have a body tag
<body id="clsbody" bottomMargin="6" onbeforeunload="checkFormStatus(document.winEquipI nfo)" topMargin="7" onload="doOnBodyLoad()" class="clsbody">

the id tag points to style #clsboxy in in stylesheet file.

now i want to change the bgcolor at runtime depending upon some condition.
if i change it to id="clsbody1" and then write a javascript in the page load it With Script
                        .Append("<script language='javascript'>")
                        .Append("document.bgColor = '#ffe6aa';")
.Append("</script>")
                    End With

RegisterStartupScript("Bgcolorl", Script.ToString())

this works but the font setting is distrurbed.
how can i resolve this ?
pls suggest an alternative.

Thanks & Regards,

Vivek Chandrakant Kulkarni
Project Engineer (E-Enabling Solutions)
Wipro Technologies
Tel:+91-80-8520408; 51221111 Extn:80221
Mobile:9886378935
vivek.kulkarni@wipro.com
www.wipro.com