Re: a little html help?
Hi Wendy,
Im not sure about your knowledge of css but the C stands for cascading.
Say this is the html
<link to style sheet 1>
<link to style sheet 2>
in sheet 1 we have
.class{ color:red; }
in sheet 2 we have
.class{color: blue;}
THe color of any elements with the .class class will be blue. Because the 2nd sheet takes precedence.
So in this case
<alpha style sheets>
<reset.css>
<style.css>
THe alpha style sheets are used.
The reset.css resets margin/padding on certain items.
The style.css has custom css and any overrides to alpha.
For example in my style.css I may define something like:
.OliveDataTD{
font-size:12px;
}
(Basically I add CSS entries with the same names as the css entries defined by alpha so that my entries in style.css override the others)
So for example above if the alpha stylesheet has
.OliveDataTD{
font-size:10000px;
}
Alphas will be processed (font-size is now 100000px), then the reset.css (which wouldnt change anything in this specific case), then the style.css. (font-size is now 12px).
You need to watch out for specifity as well. If alpha defines the style .OliveDataTable .OliveDataTD{} and you define .OliveDataTD{} - the alpha one will be used because it is considered more specific. I usually use firebug and right click>inspect element to see exactly where styles are coming from. (which is good in your case - you dont need to document).
http://getfirebug.com/ Here is firebug - I cant imagine doing any sort of css without it - its a great tool. Just right click anything on the page and inspect..also, use the leftside source window to click on different elements so you can inspect their css in the rightside pane.
The reset.css is just there to reset certain items (because different browsers have different defaults, the reset.css helps with cross browser css issues) - here is the one i use:
http://meyerweb.com/eric/tools/css/reset/
Originally posted by WendyWelton
View Post
Im not sure about your knowledge of css but the C stands for cascading.
Say this is the html
<link to style sheet 1>
<link to style sheet 2>
in sheet 1 we have
.class{ color:red; }
in sheet 2 we have
.class{color: blue;}
THe color of any elements with the .class class will be blue. Because the 2nd sheet takes precedence.
So in this case
<alpha style sheets>
<reset.css>
<style.css>
THe alpha style sheets are used.
The reset.css resets margin/padding on certain items.
The style.css has custom css and any overrides to alpha.
For example in my style.css I may define something like:
.OliveDataTD{
font-size:12px;
}
(Basically I add CSS entries with the same names as the css entries defined by alpha so that my entries in style.css override the others)
So for example above if the alpha stylesheet has
.OliveDataTD{
font-size:10000px;
}
Alphas will be processed (font-size is now 100000px), then the reset.css (which wouldnt change anything in this specific case), then the style.css. (font-size is now 12px).
You need to watch out for specifity as well. If alpha defines the style .OliveDataTable .OliveDataTD{} and you define .OliveDataTD{} - the alpha one will be used because it is considered more specific. I usually use firebug and right click>inspect element to see exactly where styles are coming from. (which is good in your case - you dont need to document).
http://getfirebug.com/ Here is firebug - I cant imagine doing any sort of css without it - its a great tool. Just right click anything on the page and inspect..also, use the leftside source window to click on different elements so you can inspect their css in the rightside pane.
The reset.css is just there to reset certain items (because different browsers have different defaults, the reset.css helps with cross browser css issues) - here is the one i use:
http://meyerweb.com/eric/tools/css/reset/
Comment