Three selectors: h1, .warning and #footer, what they do ?
CSS Interview Questions and Questions
(Continued from previous question...)
9. Three selectors: h1, .warning and #footer, what they do ?
An element points at a HTML-tag somewhere on your page. In the example above we want to style the <h1>-tag. Note that using an element like that affects all tags with that name, so using p { margin-left: 100px; } gives all <p>-tags a left-margin.
Using a class is just as simple. When writing .your_class you style all tags with a class with the name “your_class”. In the example above we have .warning which will style e.g. <div class="warning"> and <em class="warning">, that is, any element with the class warning. Classes are used when you want to style just a few of your tags in a way, perhaps you want some of your links red? Add a class to all those links.
You need one more building block: the id. This time you style an element with the attribute “id” set to the id you have chosen. Ids work exactly like classes except for one thing; you can only have one id with a certain name in each of your HTML documents. In the example above we style <div id="footer">. If you look at the example it does make sense: a HTML document may contain several warnings but only one footer. Ids should be used when you want to style just one specific tag.
Using those three building blocks will take you far but when you get to more advanced layouts you might want to combine the building blocks into more advanced selectors. Just to give you two examples of what you can do: em.warning to style only those <em>-tags with the class .warning set. You can also use #footer a to style only the links that are nested inside the tag with id “footer.
Each of the selectors has a set of declarations tied to them. Each declaration has a property, describing what we want to change and a value, what we should change it to. An example: a { color: Blue; font-size: 3em; }. You have the selector a there, so all links in your document will be styled. We have two declarations: color: Blue and font-size: 3em;. Lastly each declaration consists of two parts: the property color and the value Blue.
there is a LOT of things you can style and play with. Additionally (close to) all tags are equal in CSS, so you can set e.g. borders and colors of any element just like you could with a table if you used only HTML.
(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 ?
|