|
What is cascading order?
CSS Interview Questions and Questions
(Continued from previous question...)
74. What is cascading order?
Cascading order is a sorting system consisting of rules by which declarations are sorted out so that there are not conflicts as to which declaration is to influence the presentation. The sorting begins with rule no 1. If a match is found the search is over. If there is no match under rule no 1 the search continues under rule no 2 and so on.
1.
Find all declarations that apply to a specific selector/property
and
Declare the specified style if the selector matches the element
if there isn't any
Let the element inherit its parent property
if there isn't any
Use initial value
2.
Sort by weight (! important)
Increased weight take precedence over normal weight
3.
Sort by origin
Rules with normal weight declared in author's style sheet will override rules with normal weight declared in user's personal style sheets
Rules with increased weight declared in user's personal style sheet will override rules with normal weight declared in author's style sheet
Rules with increased weight declared in author's style sheet will override rules with increased weight declared in user's personal style sheets
Author's and user's rules will override UA's default style sheet.
4.
Sort by selector's specificity
More specific selector will override less specific one:
ID-selector (most specific), followed by
Classified contextual selectors (TABLE P EM.fot)
Class selectors (EM.fot)
Contextual selectors - the "lower down" the more weight, (TABLE P EM), (TABLE P EM STRONG) - STRONG has more weight than EM.
5.
Sort by order specified
If two rules have the same weight, the latter specified overrides ones specified earlier. Style sheets are sorted out as follows:
The STYLE attribute (inline style) overrides all other styles
The Style element (embedded style) overrides linked and imported sheets
The LINK element (external style) overrides imported style
The @import statement - imported style sheets also cascade with each other in the same order as they are imported
(Continued on next question...)
Other Interview Questions
- What is CSS?
- What are Cascading Style Sheets?
- How do I center block-elements with CSS1?
- If background and color should always be set together, why do they exist as separate properties?
- What is class?
- What is grouping
- What is external Style Sheet? How to link?
- Is CSS case sensitive?
- Three selectors: h1, .warning and #footer, what they do ?
- What are Style Sheets?
- What is CSS rule 'ruleset'?
- 'Fixed' Background?
- What is embedded style? How to link?
- What is ID selector?
- What is contextual selector?
- How do I have a background image that isn't tiled?
- What does \ABCD (and \ABCDE) mean?
- Why do style sheets exist?
- What are the advantages/disadvantages of the various style methods?
- What is inline style? How to link?
- What is imported Style Sheet? How to link?
- What is a Style Sheet?
- What is alternate Style Sheet? How to link?
- How can you set a minimum width for IE?
- Which browsers support CSS?
- How do I place text over an image?
- what CSS is, why not start coding??
- Why does my content shift to the left on some pages (in FF)?
- How do I combine multiple sheets into one?
- What is attribute selector?
- What is parent-child selector?
- How can I specify background images?
- How do I have a fixed (non-scrolling) background image?
- What are inline, block, parent, children, replaced and floating elements?
- Which set of definitions, HTML attributes or CSS properties, take precedence?
- How do I eliminate the blue border around linked images?
- why call the subtended angle a "pixel", instead of something else (e.g. "subangle")?
- Why was the decision made to make padding apply outside of the width of a 'box', rather than inside, which would seem to make more sense?
- How to use CSS to separate content and design ?
- Can CSS be used with other than HTML documents?
- Can Style Sheets and HTML stylistic elements be used in the same document?
- What are pseudo-classes?
- How do I design for backward compatibility using Style Sheets?
- As a reader, how can I make my browser recognize my own style sheet?
- How do I get rid of the gap under my image?
- Why use Style Sheets?
- What does the "Cascading" in "Cascading Style Sheets" mean?
- What is CSS rule 'at-rule'?
- What is selector?
- What is CLASS selector?
- What is CSS declaration?
- What is 'important' declaration?
- What is cascade?
- Are Style Sheets case sensitive?
- How do I have a non-tiling (non-repeating) background image?
- CSS is clearly very useful for separating style from content ...
- I always wanted to have "included" substyles or "aliases" in my CSS definition, to save redundancy ...
- Styles not showing?
- How do I quote font names in quoted values of the style attribute?
- Why is my external stylesheet not working ?
- What can be done with style sheets that can not be accomplished with regular HTML?
- How do I make my div 100% height?
- What is property?
- How do I write my style sheet so that it gracefully cascades with user's personal sheet ?
- What are pseudo-elements?
- As a developer who works with CSS every day ...
- How can I make a page look the same in e.g. NS and MSIE ?
- Is there anything that CAN'T be replaced by Style Sheets?
- Can I include comments in my Style Sheet?
- What is the difference between ID and CLASS?
- How to make text-links without underline?
- How do you make a tooltip that appears on hover?
- Which characters can CSS-names contain?
- What is cascading order?
- What browsers support style sheets? To what extent?
- Why shouldn't I use fixed sized fonts ?
- How do you make a whole div into a link?
- How do I have links of different colours on the same page?
- What is shorthand property?
- How to use CSS building a standards based HTML template?
- What is value?
- What is initial value?
- How frustrating is it to write a specification knowing that you're at the browser vendors' mercy?
- How far can CSS be taken beyond the web page--that is, have generalized or non-web specific features for such things as page formatting or type setting?
- How To Style Table Cells?
- How To Style Forms?
- How do I get my footer to sit at the bottom...?
- Can I attach more than one declaration to a selector?
- Border around a table?
- How do you target a certain browser?
- How does inheritance work?
- What is the percentage value in 'font-size' relative to?
- What is wrong with font-family: "Verdana, Arial, Helvetica"?
- How do I centre my page?
- Must I quote property values?
- Do any WYSIWYG editors support the creation of Style Sheets? Any text-based HTML editors?
- Which style specification method should be used? Why?
- Justified Text?
- Why can @import be at the top only?
- Colored Horizontal Rule?
- Do URL's have quotes or not?
- To what are partial URLs relative?
- What's the difference between 'class' and 'id'?
- I made a 10px-high div, but IE makes it 20px high...
- How do I place two paragraphs next to each other?
- Can you use someone else's Style Sheet without permission?
- I want my page fonts to look the same everywhere as in...
- When is auto different from 0 in margin properties?
- How do I move the list bullet to the left/right?
- How does a simple CSS style rule look ?
- Why are there gaps above and below my form in IE?
- If one were to set Text and Link colors using a style sheet, should one also define the background colors for these elements as well?
- How do you override the underlining of hyperlinks?
- How do you show which page you're on (in a menu)?
- How can I specify two different sets of link colors?
- How can I place multiple blocks next to each other?
- Document Style Semantics and Specification Language (DSSSL)?
- What is Extensible Stylesheet Language (XSL)?
- Which font names are available on all platforms ?
- Why does Netscape lose my styles ?
- Why is it my ':hover' declaration for links does not work ?
| 