Advanced CSS information questionas

1. www.YoYoBrain.com - Tools to Memorize and Learn
Questions for Advanced CSS Information
Category: General - (12 questions)
When using multiple style sheets, Any <link> tag with both a title and rel="stylesheet" will be
how do you indicate which stylesheet considered the preferred style sheet
should be the preferred style sheet. ex: <link title="Main Stylesheet" rel="stylesheet"
type="text/css">
When using <link> tags, what is the they are classified as persistant and always used as the
effect of not using title attribute display of the document
How can you select all items within a #mydiv * {
given <div id="mydiv" > tag with CSS /* rules */
selector }
What is the order that CSS rules for :link, :visited, :hover, and :active
link styles should be put in stylesheet mnemonic is LoVe/HAte (got from Pro CSS Techniques by
Croft, Lloyd, and Rubin)
What is the star HTML hack for CSS in IE version prior to 7, IE would recognize a html element
selectors that no other browser recognizes so you can make a rule
that only 6 sees
* html .........
What is the problem with using floats if there is any declaration that adds to the width, such as, a
across the page with width that add border of 1 pixel, then the right most element will drop below
to 100% the line
What version of IE adds support for IE 7
max- / min-width / height
What is the Phark method for 2 main declaration
replacing text with image in a way background-image: xxxxx;
that preserves accessability text-indent: -5000px;
the text indent moves the text off the page but is still there
for people using a reader
How do you cite the source in a use the cite attribute
<blockquote> HTML element <blockquote cite="http:somewhere.com/page">Great
quote</blockquote>
What is the CSS3 property - filter: used to apply visual effects to an element, such as visual
blending or alpha transparency
only supported by IE at this time
CSS syntax to create a beveled border-style: inset; border-style: outset
(button) edge on a border
3 types of CSS stylesheet links and persistent - rel="stylesheet" and no title set preferred -
how to specify rel="stylesheet title="mytitle" alternate - rel="alternate"
title="alternate1"
Category: IE 6 issues - (17 questions)

2. How can you similute a CSS child div h1 {font-weight: bold;}
selector that IE 6 can use: div * h1 {font-weight: normal;}
Suppose you want to boldface any h1 This throws a selector for all h1 then reverses for any further
element that's a child of a div, but no below by using universal in second rule.
others. Technique comes from Eric Meyer's blog.
How can you insert a stylesheet that use the conditional comment syntax to embed it:
only IE 6 or earlier will see <!--[if lte IE 6]>
<link rel="stylesheet" .....
<![endif]-->
What is the problem with IE 6's it include's padding, border and margin in the width
implementation of the box model calculation
compliant browsers calculate the width as just the content
What is the behavior of IE 6 with png it can only display binary transparent backgrounds not alpha
files channel transparency
How can you switch IE 6 into a more by using DOCTYPE that is strict
CSS compliant mode
What is the IE 6 issue with the :hover it can only be defined for anchor elements
CSS pseudo-class
What is the IE 6 issue with CSS it does not support fixed and will set the position to static
property position instead
What is the IE double float margin when a left float item is in a container box and the
bug margin-left property is set, IE doubles the margin over
stated value
CSS: How do you fix the add adisplay: inline;property which will be ignored by
double-margin float bug in IE 6 compliant browsers
What happens on IE 6 when it treats them like width statement
max-width and min-width CSS
properties are used
What is the 3 pixel jog bug in IE 6? IE 6 applies 3 pixels to any inline element next to a float,
even if those elements are contained by a block level
element
What is the bug in IE6 with absolute if relative element does not have a height assigned the
positioning of an element contained absolute positioned element is positioned with respect to
by a relative positioned element page and not containing element
What is the list whitespace bug in IE6 if there is any whitespace between <li> items in an
unordered list - IE 6 will render the whitespace instead of
ignoring like other browsers
CSS: How can you get IE 6 to use use the AlphaImageLoader
PNG with alpha transparency
Filterfilter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='......png');

3. What is the IE CSS extension that expression( ..)
allows you to calculate a value for a width: expression(document.body.clientWidth - 50);
CSS declaration dynamically?
CSS: IE Mac bug that involves class If a class name is a substring of another classname IE Mac
names? can get confused
What DOM elements ignore z-index <select><object> you can fix this by setting display: none
properties in IE6 (showing up over
elements that are supposed to float
on top)
Category: hasLayout - (4 questions)
CSS: What is the hasLayout it is an IE only property that affects how the browser treats
property and how does it affect an object. Some tags have it by default, and others only gain
rendering it if a height or width is applied to object like a div tagCan
cause IE to treat a tag very differently than CSS standards
What properties can be set that width or height - any value other than auto
trigger hasLayout = true for IE 6 up float: left | right
display: inline-block
position: absolute
What new CSS properties triggers overflow: hidden | scroll | auto
hasLayout=true in IE 7 that didn't in overflow-x |-y: hidden | scroll | auto
IE 6 position: fixed
min-width | max-width | min-height | max-height : any value
other than none
What is issue with inline-replaced height and width set hasLayout=true only in quirks mode
elements and hasLayout=true for IE 6
Category: Typography - (14 questions)
How many weights does the up to 9 weights
OpenType font file format provide for?
How does CSS provide for you to Can use the numbers 100, 200, 300, 400, 500, 600, 700,
map the 9 possible font weights in 800, 900
OpenType to style specification.
What happens if the OpenType font There are a complex set of rules that map the available
selected has fewer than 9 weights weights onto the numbers starting with 400, moving down
and user specifies using numbers then up.
100 to 900?
What is the typical font size that a 16 pixels
browser specifies as the default

4. When setting font size using the it varies among browsers
absolute-size keywords (medium, CSS 1, specified 1.5 scaling going up and .66 factor scaling
small, x-small, etc.) how does down
browser scale the font. CSS 2 changed to a vague "between 1.0 and 1.2"
Why is it recommended to not use IE does not allow user to adjust font-size when specified by
pixels when setting font size pixels in page/stylesheet.
So people with reading difficuties are stuck.
If you want to set the baseline font body { font-size: 62.5%; }since most browsers use 16 pixels
size to 10 pixels (which makes using as default, this scales it down to 10
em scaling easier) what is the
Richard Rutter 62.5 hack?
CSS way of capitalizing first letter of text-transform: capitalize;
each word
Definition for typographic term: the length of a single line of text
measure
CSS: what units should be used em - which is proportional to the font size of text in the
when specify the width of paragraphs paragraph
and other text blocks
What is rule of thumb for optimal between 45-75 characters wide
paragraph width which equals between 30 and 50 ems
How would you create a rule that p { text-indent: 0; } /* this rule removes indent */
imitates the general typographical p + p { text-indent: 1.5em; } /* this rule puts it back for any
style not indenting the opening paragraph following another paragraph */
paragraph but then indenting the
ones that follow;
What is browser support for content IE does not support including IE 7
generation in CSS using content:
declaration
What is sIFR? Scalable Inman Replacement - way of placing rich
typography into a web page using JavaScript and Flash
Category: Tables - (4 questions)
CSS: What html attribute can be abbr attribute
used in tables to provide more
information on individual cells for
screen readers for people with
disabilities
Html attribute that associates a td or scope attribute
th element to a particular header this is mainly useful in complex / nested tables
Where should the tfoot table element at the top with thead - the browser will display the tfoot
appear in a table properly at the bottom

5. CSS: What attribute should be used summary - goes in the table element
in a table to describe the table -
useful for non-visual readers
Category: Forms - (1 questions)
What are 2 ways to associated label 1. wrap around form element <label>Phone:<input
elements with a form control type="text" id="phone" /> </label>
2. use for attribute <label for="phone" > Phone number:
<input type="text" id="phone" />
Category: Print & Media Styles - (3 questions)
What is the support for this import IE 6 and earlier doesn't recognize this
syntax to use stylesheet for another
media type:
<style type="text/css">
@import url("print_stylesheet.css")
print
</style>
How do you add media/print put @media or @print in front
specifications to CSS declarations in @print p { color: blue; }
stylesheet
What is good first step when building resetting all layout mechanisms that involve screen such as
a print layout stylesheet position absolute, padding, and margins
Category: Layout - (7 questions)
CSS: How do you center a div within use automarginsmargin: 0 auto;
the container
CSS technique for getting a span to float to right or left which then makes it a display: block and
recognize the width property width is picked up
What is the effect of a negative the element is moved in the direction of negative margin -
margin on top/left of a static element up or to the left
(no float)
CSS: What is the effect of applying pulls any succeeding elements over to the left or up on top
negative margin to static elements of the element
(no float) on right or bottom
Rails: What is the effect of apply a the element is stretched in both directions if it doesn't have
negative margin to both right and left a width
of a static element (no float)
What is the effect of applying a it decreases the size of the element causing the second
negative margin to a floated element element to overlap the first
next to another floated element

6. CSS: When using negative margins add:position: relative
with older browsers: what can fix the
following problems:Making links
unclickableText becomes difficult to
select