added placeholder for five elements

Author: khan4019

css.html

@@ -322,7 +322,7 @@ <h2>11. overflow</h2>
 </div>
 
 <div id="div_section_article">
-  <h2>13. media queries</h2>
+  <h2>12. media queries</h2>
   <p><strong>Question:</strong> How could you apply css rules specific to a media?</p>
   <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>
   <p><code>@media (max-width:700px) and (orientation: landscape){...}</code> will apply rules for media smaller than 700px and in landscape orientation.</p>
@@ -337,17 +337,45 @@ <h2>13. pseudo class</h2>
   <p><strong>Question:</strong> Whare are some peseudo classed u have used?</p>
   <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>
   <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>
-  <p>ref: <a href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/">How to use pseudo classes</a>, <a href="http://css-tricks.com/pseudo-class-selectors/">meet pseudo classes</a></p>
+  <p>ref: <a href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/">How to use pseudo classes</a>, <a href="http://css-tricks.com/pseudo-class-selectors/">meet pseudo classes</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes">list of pseudo classes</a></p>
+  <h4>pseudo elements</h4>
+  <p>pseudo elements helps you to add cosmetics contents. for example, you can add contents before/after of a content</p>
+  <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>
+</div>
+<div id="something">
+  <h2>14. text effect</h2>
+  <p><strong></strong></p>
+  <p><strong></strong></p>
+</div>
+<div id="filter">
+  <h2>15. filter</h2>
+  <p><strong>Question: </strong></p>
+  <p><strong>Answer: </strong></p>
+</div>
+<div id="something">
+  <h2>16. @import</h2>
+  <p><strong></strong></p>
+  <p><strong></strong></p>
+</div>
+<div id="something">
+  <h2>17. vertical alignment</h2>
+  <p><strong></strong></p>
+  <p><strong></strong></p>
+</div>
+<div id="something">
+  <h2>18. sprite</h2>
+  <p><strong></strong></p>
+  <p><strong></strong></p>
 </div>
 <div id="mtuli_lang">
-  <h2>14. pre processor</h2>
+  <h2>19. pre processor</h2>
   <p><strong>Question:</strong> Have you used any preprocessor? What are the reasons to use preprocessor?</p>
   <p><strong>Answer:</strong> learn sass or pass away.</p>
 
   ref: <a href="http://www.frontendjournal.com/most-common-technical-interview-question-for-frontend-developers/">most common interview questions</a>
 </div>
 <div id="download_order">
-  <h2>15. show & tell</h2>
+  <h2>20. show & tell</h2>
   <p><strong>Question:</strong> What is the color of text sausage for he following rule?</p>
   <strong>html:</strong>
   <pre><code>
@@ -432,6 +460,7 @@ <h2>temporary list of questions</h2>
   <li>:after and :before</li>
   <li>pseudo classes</li>
   <li>vertical align center</li>
+  <li>z-index, ask something about it</li>
 </ul>
   <h2>References</h2>
   <ul>