Skip to content

Commit d19365b

Browse files
khan4019khan4019
committed
major reordering of the contents
1 parent d9d9915 commit d19365b

File tree

1 file changed

+85
-81
lines changed

1 file changed

+85
-81
lines changed

‎css.html‎

Lines changed: 85 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -311,8 +311,13 @@ <h2>6. display vs visibility</h2>
311311
<p>if u want to say it smartly, <code>display:none</code> cuases DOM reflow where is <code>visibility:hidden</code> doesn't. btw, what is reflow? answer. sorry i wont tell you, google it.</p>
312312
<p>ref: <a href="http://www.vanseodesign.com/css/visibility-vs-display/">visibility vs Display</a></p>
313313
</div>
314+
<div id="inline_block">
315+
<h2>7. inline block</h2>
316+
<p><strong>Question:</strong> What are the differences between inline, block and inline-block</p>
317+
<p><strong>Answer: </strong></p>
318+
</div>
314319
<div id="mark">
315-
<h2>7. box model</h2>
320+
<h2>8. box model</h2>
316321
<p><strong>Question:</strong> What are the properties related to box model?</p>
317322
<p><strong>Answer:</strong> everything in a web page is a box where you can control size, position, background, etc. Each box/content area is optionally surrounded by padding, border and margin. When you set height and width of an element, you set content height and width.</p>
318323
<p>Technically, height, width, padding and border are part of box model and margin is related to it.</p>
@@ -325,51 +330,8 @@ <h2>7. box model</h2>
325330
</div>
326331
</div>
327332
</div>
328-
<div id="http_request">
329-
<h2>8. specificity </h2>
330-
<p><strong>Question:</strong> What is specificity? How do u calculate specificity?</p>
331-
<p><strong>Answer:</strong> is a process of determining which css rule will be applied to an element. it actually determines which rules will take precedence. </p>
332-
<p>inline style usually wins then ID then class value (or pseudo-class or attribute selector), unversal selector (*) has no specificity.</p>
333-
<p>ref: <a href="http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/">css specificity: things you need to know</a>, <a href="http://www.standardista.com/css3/css-specificity/">specifishity</a>, <a href="http://specificity.keegan.st/">specificiyt calculator</a></p>
334-
</div>
335-
<div id="standard_quirks">
336-
<h2>9. shadow DOM</h2>
337-
<p><strong>Question:</strong> What is shadow DOM?</p>
338-
<p><strong>Answer:</strong> encapsulate part of a DOM. hide subtree. you can have same ID in different shadow DOM. Polymers uses it. This way your DOM becomes reusable and u dont have to do iframe. if interviewer is not happy with your answer give him the links and tell him to spend a weekend on reading.</p>
339-
<p>ref: <a href="http://www.w3.org/TR/shadow-dom/#introduction">W3: shadow-DOM</a>, <a href="http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/">html5rock: shadow DOM</a></p>
340-
</div>
341-
<div id="semantic_html">
342-
<h2>10. transition</h2>
343-
<p><strong>Question:</strong> What do u know about tranisition?</p>
344-
<p><strong>Answer:</strong> transition allows to add an effect while changing from one style to another. You can set the which property you want to transition, duration, how u want to transit (linear, ease, ease-in, ease-out, cubic-bezier) and delay when transition will start. you can transition more than one property by comma seperation</p>
345-
<div>
346-
<button id = "transition" type="button" class="toggleExample btn btn-primary">show example</button>
347-
<div id="transitionExample" class="hide">
348-
<pre><code>
349-
.transition {
350-
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
351-
}
352-
.element {
353-
width: 50px;
354-
background-color:purple;
355-
transition: width 2s linear 0.5s, background-color 2s linear 0.5s;
356-
}
357-
358-
.element:hover {
359-
width: 100px;
360-
background-color:red;
361-
}
362-
</code></pre>
363-
<p>Hover over the purple box and wait.</p>
364-
<div class="element"></div>
365-
<p><strong>Advanced:</strong> you can check transfrom: <a href="http://www.sitepoint.com/advanced-css3-2d-and-3d-transform-techniques/">css 2D 3D transform</a>, <a href="http://css3.bradshawenterprises.com/flip/">flip an image</a></p>
366-
</div>
367-
</div>
368-
<p>ref: <a href="http://blog.alexmaccaw.com/css-transitions">all you need to know about css transition</a>, <a href="http://css3.bradshawenterprises.com/transitions/">transition: tutorial</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">css transition</a>, <a href="http://www.html5rocks.com/en/tutorials/3d/css/">transition and 3D</a></p>
369-
370-
</div>
371333
<div id="svg_canvas">
372-
<h2>11. overflow</h2>
334+
<h2>9. overflow</h2>
373335
<p><strong>Question:</strong> Does overflow: hidden create a new block formatting context?</p>
374336
<p><strong>Answer:</strong> yes</p>
375337
<p><strong>Extra:</strong> overflow property deals with the content if content size exceeds the allocated size for the content. You can make extra content visible, hidden, scroll or auto (viewport default behavior).</p>
@@ -397,7 +359,7 @@ <h2>11. overflow</h2>
397359
</div>
398360

399361
<div id="div_section_article">
400-
<h2>12. media queries</h2>
362+
<h2>10. media queries</h2>
401363
<p><strong>Question:</strong> How could you apply css rules specific to a media?</p>
402364
<p><strong>Answer: </strong> <code>@media (max-width:700px){...}</code> means you want to apply rules to those media whose max-width is 700 px. this means every samller device will have this rule.</p>
403365
<p><code>@media (max-width:700px) and (orientation: landscape){...}</code> will apply rules for media smaller than 700px and in landscape orientation.</p>
@@ -408,7 +370,7 @@ <h2>12. media queries</h2>
408370
<p>ref: <a href="http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/">how to use media queries</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries">css media queries</a>, <a href="http://www.w3.org/TR/css3-mediaqueries/#media0">W3: media queries</a></p>
409371
</div>
410372
<div id="div_span">
411-
<h2>13. pseudo class</h2>
373+
<h2>11. pseudo class</h2>
412374
<p><strong>Question:</strong> What are the some peseudo classed u have used?</p>
413375
<p><strong>Answer: </strong> pseudo class tells you specific state of an element. allow to style element dynamically. The most popular one is <code>:hover</code>. Besides i have used <code>:visited</code>, <code>:focus</code>, <code>:nth-child</code>, <code>nth-of-type</code>, <code>:link</code>, etc.</p>
414376
<p>pseudo classes is better if you dont want to mess up with javascript however, pesudo-classes is slow to process and apply rules.</p>
@@ -429,37 +391,7 @@ <h4>pseudo elements</h4>
429391
<p>ref: <a href="http://nicolasgallagher.com/an-introduction-to-css-pseudo-element-hacks/">intro to css pseudo element</a>, <a href="http://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/">:before :after</a>, <a href="http://css-tricks.com/css-content/">css content</a>, <a href="http://www.w3.org/TR/CSS21/generate.html">W3: generate content</a></p>
430392
</div>
431393
<div id="something">
432-
<h2>14. optimize selector</h2>
433-
<p><strong>Question:</strong> How do you optimize css selectors?</p>
434-
<p><strong>Answer: </strong> This is very open and depend on what you are trying to achieve. If i order selectors interms of render speed it would be like id, class, tag, siblings, child, descendent, universal, attribute, pseudo. Speed of ID and class is very close. However your code should be readable, maintainable and DRY along with highly performant.</p>
435-
<p>The best practices in general are: avoid universal selectors, don't repeat yourself, remove redundant selectors, be as specific as possible, and keep learning.</p>
436-
<p>ref: <a href="http://realityonweb.com/cascading-style-sheet-css/performance-improvement-by-writing-efficient-css-selector/">Efficient CSS selectors</a>, <a href="http://css-tricks.com/efficiently-rendering-css/">efficently rendering</a></p>
437-
</div>
438-
<div id="filter">
439-
<h2>15. filter</h2>
440-
<p><strong>Question:</strong> What are the different css filter you can use?</p>
441-
<p><strong>Answer:</strong> css filter allows u to render DOM element, image, or video. u can choose from: grayscale, blur, opacity, brightness, contrast.</p>
442-
<div>
443-
<button id = "filter" type="button" class="toggleExample btn btn-primary">show example</button>
444-
<div id="filterExample" class="imageContainer hide">
445-
<div class="imageHolder"><img class="" src="images/flower.jpg" alt=""><p>Original</p></div>
446-
<div class="imageHolder"><img class="imgGray" src="images/flower.jpg" alt=""><p>grayscale(100%)</p></div>
447-
<div class="imageHolder"><img class="imgBright" src="images/flower.jpg" alt=""><p>brightness(200%)</p></div>
448-
<div class="imageHolder"><img class="imgBlur" src="images/flower.jpg" alt=""><p>blur(3px)</p></div>
449-
<div class="imageHolder"><img class="imgOpacity" src="images/flower.jpg" alt=""><p>opacity(30%)</p></div>
450-
<div class="imageHolder"><img class="imgInvert" src="images/flower.jpg" alt=""><p>invert(100%)</p></div>
451-
</div>
452-
</div>
453-
<p>ref: <a href="http://www.html5rocks.com/en/tutorials/filters/understanding-css/">Understanding css filter effect</a></p>
454-
</div>
455-
<div id="something">
456-
<h2>16. @import</h2>
457-
<p><strong>Question:</strong> How can you load css resources conditionally?</p>
458-
<p><strong>Answer:</strong> @import allows you to load/import stylesheet by using a prth (uri) representing the location of the file. You can define one or more media by comma seperation for which you want to load the stylesheet. If browser dont support the media stylesheet will not be loaded.</p>
459-
<p>ref: be careful while using @import (<a href="http://www.stevesouders.com/blog/2009/04/09/dont-use-import/">don't use @import</a>)</p>
460-
</div>
461-
<div id="something">
462-
<h2>17. vertical Center</h2>
394+
<h2>12. vertical Center</h2>
463395
<p><strong>Question:</strong> How do you align a p center-center inside a div?</p>
464396
<p><strong>Answer:</strong> <code>text-align:center</code>will do the horizontal alignment but <code>vertical-laign:middle</code> will not work here. there are couple of different ways to solve this problem and one of them are positioning. You make the parent as relative position and child as absolute positioning. And then define all position parameter as sero and width 50% and height 30% (sounds messy look at the example and read ref) </p>
465397
<div>
@@ -477,21 +409,93 @@ <h2>17. vertical Center</h2>
477409
<p>ref: <a href="http://www.vanseodesign.com/css/vertical-centering/">6 methods for vertical center</a>, <a href="http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/">Absolute horizontal and vertical centering</a></p>
478410
</div>
479411
<div id="something">
480-
<h2>18. sprite</h2>
412+
<h2>13. optimize selector</h2>
413+
<p><strong>Question:</strong> How do you optimize css selectors?</p>
414+
<p><strong>Answer: </strong> This is very open and depend on what you are trying to achieve. If i order selectors interms of render speed it would be like id, class, tag, siblings, child, descendent, universal, attribute, pseudo. Speed of ID and class is very close. However your code should be readable, maintainable and DRY along with highly performant.</p>
415+
<p>The best practices in general are: avoid universal selectors, don't repeat yourself, remove redundant selectors, be as specific as possible, and keep learning.</p>
416+
<p>ref: <a href="http://realityonweb.com/cascading-style-sheet-css/performance-improvement-by-writing-efficient-css-selector/">Efficient CSS selectors</a>, <a href="http://css-tricks.com/efficiently-rendering-css/">efficently rendering</a></p>
417+
</div>
418+
<div id="something">
419+
<h2>14. @import</h2>
420+
<p><strong>Question:</strong> How can you load css resources conditionally?</p>
421+
<p><strong>Answer:</strong> @import allows you to load/import stylesheet by using a prth (uri) representing the location of the file. You can define one or more media by comma seperation for which you want to load the stylesheet. If browser dont support the media stylesheet will not be loaded.</p>
422+
<p>ref: be careful while using @import (<a href="http://www.stevesouders.com/blog/2009/04/09/dont-use-import/">don't use @import</a>)</p>
423+
</div>
424+
<div id="something">
425+
<h2>15. sprite</h2>
481426
<p><strong>Question:</strong> Why would you use sprites?</p>
482427
<p><strong>Answer:</strong> When you have multiple images/icons, browser makes seperate call to the server for each one of them. sprite is a technique to combine all of them (usually similar one in terms of type of image. For example, you will put jpg in one sprite) in one image. you can later optimize the image. To display the icon you set height, width and background position.</p>
483428
<p>popular libraries like bootstrap use this technques. If you repeat the image. want to scale you have to be careful with sprite.</p>
484429
<p>ref: <a href="http://coding.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/">css sprites</a>, <a href="http://css.spritegen.com/">generate sprites</a></p>
485430
</div>
431+
<div id="http_request">
432+
<h2>16. specificity </h2>
433+
<p><strong>Question:</strong> What is specificity? How do u calculate specificity?</p>
434+
<p><strong>Answer:</strong> is a process of determining which css rule will be applied to an element. it actually determines which rules will take precedence. </p>
435+
<p>inline style usually wins then ID then class value (or pseudo-class or attribute selector), unversal selector (*) has no specificity.</p>
436+
<p>ref: <a href="http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/">css specificity: things you need to know</a>, <a href="http://www.standardista.com/css3/css-specificity/">specifishity</a>, <a href="http://specificity.keegan.st/">specificiyt calculator</a></p>
437+
</div>
438+
<div id="standard_quirks">
439+
<h2>17. shadow DOM</h2>
440+
<p><strong>Question:</strong> What is shadow DOM?</p>
441+
<p><strong>Answer:</strong> encapsulate part of a DOM. hide subtree. you can have same ID in different shadow DOM. Polymers uses it. This way your DOM becomes reusable and u dont have to do iframe. if interviewer is not happy with your answer give him the links and tell him to spend a weekend on reading.</p>
442+
<p>ref: <a href="http://www.w3.org/TR/shadow-dom/#introduction">W3: shadow-DOM</a>, <a href="http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/">html5rock: shadow DOM</a></p>
443+
</div>
444+
<div id="semantic_html">
445+
<h2>18. transition</h2>
446+
<p><strong>Question:</strong> What do u know about tranisition?</p>
447+
<p><strong>Answer:</strong> transition allows to add an effect while changing from one style to another. You can set the which property you want to transition, duration, how u want to transit (linear, ease, ease-in, ease-out, cubic-bezier) and delay when transition will start. you can transition more than one property by comma seperation</p>
448+
<div>
449+
<button id = "transition" type="button" class="toggleExample btn btn-primary">show example</button>
450+
<div id="transitionExample" class="hide">
451+
<pre><code>
452+
.transition {
453+
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
454+
}
455+
.element {
456+
width: 50px;
457+
background-color:purple;
458+
transition: width 2s linear 0.5s, background-color 2s linear 0.5s;
459+
}
460+
461+
.element:hover {
462+
width: 100px;
463+
background-color:red;
464+
}
465+
</code></pre>
466+
<p>Hover over the purple box and wait.</p>
467+
<div class="element"></div>
468+
<p><strong>Advanced:</strong> you can check transfrom: <a href="http://www.sitepoint.com/advanced-css3-2d-and-3d-transform-techniques/">css 2D 3D transform</a>, <a href="http://css3.bradshawenterprises.com/flip/">flip an image</a></p>
469+
</div>
470+
</div>
471+
<p>ref: <a href="http://blog.alexmaccaw.com/css-transitions">all you need to know about css transition</a>, <a href="http://css3.bradshawenterprises.com/transitions/">transition: tutorial</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">css transition</a>, <a href="http://www.html5rocks.com/en/tutorials/3d/css/">transition and 3D</a></p>
472+
</div>
473+
<div id="filter">
474+
<h2>19. filter</h2>
475+
<p><strong>Question:</strong> What are the different css filter you can use?</p>
476+
<p><strong>Answer:</strong> css filter allows u to render DOM element, image, or video. u can choose from: grayscale, blur, opacity, brightness, contrast.</p>
477+
<div>
478+
<button id = "filter" type="button" class="toggleExample btn btn-primary">show example</button>
479+
<div id="filterExample" class="imageContainer hide">
480+
<div class="imageHolder"><img class="" src="images/flower.jpg" alt=""><p>Original</p></div>
481+
<div class="imageHolder"><img class="imgGray" src="images/flower.jpg" alt=""><p>grayscale(100%)</p></div>
482+
<div class="imageHolder"><img class="imgBright" src="images/flower.jpg" alt=""><p>brightness(200%)</p></div>
483+
<div class="imageHolder"><img class="imgBlur" src="images/flower.jpg" alt=""><p>blur(3px)</p></div>
484+
<div class="imageHolder"><img class="imgOpacity" src="images/flower.jpg" alt=""><p>opacity(30%)</p></div>
485+
<div class="imageHolder"><img class="imgInvert" src="images/flower.jpg" alt=""><p>invert(100%)</p></div>
486+
</div>
487+
</div>
488+
<p>ref: <a href="http://www.html5rocks.com/en/tutorials/filters/understanding-css/">Understanding css filter effect</a></p>
489+
</div>
486490
<div id="mtuli_lang">
487-
<h2>19. pre processor</h2>
491+
<h2>20. pre processor</h2>
488492
<p><strong>Question:</strong> What are the reasons to use preprocessor?</p>
489493
<p><strong>Answer:</strong> you write css in high level with some special syntax (declaring variable, nested syntax, mathmetical operations, etc.) and that is compiled to css. Preprocessor helps you to speed up develop, maintain, ensure best practices and also confirms concatenation, compression, etc.</p>
490494

491495
ref: <a href="http://css-tricks.com/musings-on-preprocessing/">css preprocessor</a>, <a href="https://developers.google.com/chrome-developer-tools/docs/css-preprocessors">working with preprocessor</a>
492496
</div>
493497
<div id="download_order">
494-
<h2>20. show & tell</h2>
498+
<h2>21. show & tell</h2>
495499
<p><strong>Question:</strong> What is the color of text sausage for he following rule?</p>
496500
<strong>html:</strong>
497501
<pre><code>

0 commit comments

Comments
 (0)