Published on

Advanced CSS information questionas

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. - Tools to Memorize and LearnQuestions for Advanced CSS InformationCategory: General - (12 questions)When using multiple style sheets, Any <link> tag with both a title and rel="stylesheet" will behow do you indicate which stylesheet considered the preferred style sheetshould 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 theeffect of not using title attribute display of the documentHow 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 :activelink 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 elementselectors 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, aacross the page with width that add border of 1 pixel, then the right most element will drop belowto 100% the lineWhat version of IE adds support for IE 7max- / min-width / heightWhat is the Phark method for 2 main declarationreplacing 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 readerHow do you cite the source in a use the cite attribute<blockquote> HTML element <blockquote cite="">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 timeCSS syntax to create a beveled border-style: inset; border-style: outset(button) edge on a border3 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. 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 furtherelement thats a child of a div, but no below by using universal in second rule.others. Technique comes from Eric Meyers 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 6s it includes padding, border and margin in the widthimplementation of the box model calculation compliant browsers calculate the width as just the contentWhat is the behavior of IE 6 with png it can only display binary transparent backgrounds not alphafiles channel transparencyHow can you switch IE 6 into a more by using DOCTYPE that is strictCSS compliant modeWhat is the IE 6 issue with the :hover it can only be defined for anchor elementsCSS pseudo-classWhat is the IE 6 issue with CSS it does not support fixed and will set the position to staticproperty position insteadWhat is the IE double float margin when a left float item is in a container box and thebug margin-left property is set, IE doubles the margin over stated valueCSS: How do you fix the add adisplay: inline;property which will be ignored bydouble-margin float bug in IE 6 compliant browsersWhat happens on IE 6 when it treats them like width statementmax-width and min-width CSSproperties are usedWhat 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 elementWhat is the bug in IE6 with absolute if relative element does not have a height assigned thepositioning of an element contained absolute positioned element is positioned with respect toby a relative positioned element page and not containing elementWhat 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 browsersCSS: How can you get IE 6 to use use the AlphaImageLoaderPNG with alpha transparency Filterfilter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=......png);
  3. 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 Macnames? can get confusedWhat DOM elements ignore z-index <select><object> you can fix this by setting display: noneproperties in IE6 (showing up overelements that are supposed to floaton top)Category: hasLayout - (4 questions)CSS: What is the hasLayout it is an IE only property that affects how the browser treatsproperty and how does it affect an object. Some tags have it by default, and others only gainrendering it if a height or width is applied to object like a div tagCan cause IE to treat a tag very differently than CSS standardsWhat properties can be set that width or height - any value other than autotrigger hasLayout = true for IE 6 up float: left | right display: inline-block position: absoluteWhat new CSS properties triggers overflow: hidden | scroll | autohasLayout=true in IE 7 that didnt in overflow-x |-y: hidden | scroll | autoIE 6 position: fixed min-width | max-width | min-height | max-height : any value other than noneWhat is issue with inline-replaced height and width set hasLayout=true only in quirks modeelements and hasLayout=true for IE 6Category: Typography - (14 questions)How many weights does the up to 9 weightsOpenType 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, 900OpenType to style specification.What happens if the OpenType font There are a complex set of rules that map the availableselected has fewer than 9 weights weights onto the numbers starting with 400, moving downand user specifies using numbers then up.100 to 900?What is the typical font size that a 16 pixelsbrowser specifies as the default
  4. 4. When setting font size using the it varies among browsersabsolute-size keywords (medium, CSS 1, specified 1.5 scaling going up and .66 factor scalingsmall, x-small, etc.) how does downbrowser 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 bypixels 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 pixelssize to 10 pixels (which makes using as default, this scales it down to 10em scaling easier) what is theRichard Rutter 62.5 hack?CSS way of capitalizing first letter of text-transform: capitalize;each wordDefinition for typographic term: the length of a single line of textmeasureCSS: what units should be used em - which is proportional to the font size of text in thewhen specify the width of paragraphs paragraphand other text blocksWhat is rule of thumb for optimal between 45-75 characters wideparagraph width which equals between 30 and 50 emsHow 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 anystyle not indenting the opening paragraph following another paragraph */paragraph but then indenting theones that follow;What is browser support for content IE does not support including IE 7generation in CSS using content:declarationWhat is sIFR? Scalable Inman Replacement - way of placing rich typography into a web page using JavaScript and FlashCategory: Tables - (4 questions)CSS: What html attribute can be abbr attributeused in tables to provide moreinformation on individual cells forscreen readers for people withdisabilitiesHtml attribute that associates a td or scope attributeth element to a particular header this is mainly useful in complex / nested tablesWhere should the tfoot table element at the top with thead - the browser will display the tfootappear in a table properly at the bottom
  5. 5. CSS: What attribute should be used summary - goes in the table elementin a table to describe the table -useful for non-visual readersCategory: Forms - (1 questions)What are 2 ways to associated label 1. wrap around form element <label>Phone:<inputelements 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 doesnt recognize thissyntax to use stylesheet for anothermedia type:<style type="text/css">@import url("print_stylesheet.css")print</style>How do you add media/print put @media or @print in frontspecifications to CSS declarations in @print p { color: blue; }stylesheetWhat is good first step when building resetting all layout mechanisms that involve screen such asa print layout stylesheet position absolute, padding, and marginsCategory: Layout - (7 questions)CSS: How do you center a div within use automarginsmargin: 0 auto;the containerCSS technique for getting a span to float to right or left which then makes it a display: block andrecognize the width property width is picked upWhat 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 topnegative margin to static elements of the element(no float) on right or bottomRails: What is the effect of apply a the element is stretched in both directions if it doesnt havenegative margin to both right and left a widthof a static element (no float)What is the effect of applying a it decreases the size of the element causing the secondnegative margin to a floated element element to overlap the firstnext to another floated element
  6. 6. CSS: When using negative margins add:position: relativewith older browsers: what can fix thefollowing problems:Making linksunclickableText becomes difficult toselect