Skip to content

Commit 1c8e7f8

Browse files
committed
Merge pull request #3 from khan4019/master
give me latest
2 parents cd3959d + 849cc37 commit 1c8e7f8

File tree

2 files changed

+137
-101
lines changed

2 files changed

+137
-101
lines changed

css.html

Lines changed: 113 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -148,97 +148,131 @@ <h2>3. preprocessor</h2>
148148
</div>
149149

150150

151-
<!-- <div id="bdo">
152-
<h2>4. bdo</h2>
153-
<p><strong>Question:</strong> How can u change direction of html text?</p>
154-
<p><strong>Answer:</strong> use bdo (bidirectional ovverride) element of html.</p>
151+
<div id="bdo">
152+
<h2>4. case sensitive</h2>
153+
<p><strong>Question:</strong> Does css properties are case sensitive?</p>
154+
<p><strong>Answer:</strong> no.</p>
155155
<pre><code>
156-
&lt;!-- Switch text direction --&gt;<br/>&lt;p&gt;&lt;bdo dir=&quot;rtl&quot;&gt;This text will go right to left.&lt;/bdo&gt;&lt;/p&gt;
156+
//add an example here
157157
</code></pre>
158-
<strong>result:</strong>
159-
<p><bdo dir="rtl">This text will go right to left.</bdo></p>
160-
<p><strong>extra:</strong> rtl: right to left. and alternatively you can use, ltr: left to right.</p>
161-
</div> -->
162-
<!-- <div id="mark">
163-
<h2>5. mark</h2>
164-
<p><strong>Question:</strong> How can u highlight text in html?</p>
165-
<p><strong>Answer:</strong> use mark element.</p>
166-
<pre><code>
167-
&lt;p&gt;Some part of this paragraph is &lt;mark&gt;highlighted&lt;/mark&gt; by using mark element.&lt;/p&gt;
168-
</code></pre>
169-
<p><strong>result:</strong>Some part of this paragraph is <mark>highlighted</mark> by using mark element.</p>
170-
</div> -->
171-
<!-- <div id="scopped">
172-
<h2>6. scoped</h2>
173-
<p><strong>Question:</strong>Can u apply css rule to a part of html document?</p>
174-
<p><strong>Answer:</strong> yes. by using "scopped" in the style tag.</p>
175-
ref <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style">MDN: style</a>
176-
</div> -->
177-
<!-- <div id="http_request">
178-
<h2>7. http requst </h2>
179-
<p><strong>Question:</strong> Does the following trigger http request at the time of page load?</p>
180-
<pre><code>
181-
&lt;img src=&quot;mypic.jpg&quot; style=&quot;visibility:hidden&quot; alt=&quot;My photo&quot;&gt;<br/>
182-
</code></pre>
183-
<p><strong>Answer:</strong> yes</p>
158+
</div>
159+
<div id="mark">
160+
<h2>5. margin/padding inline</h2>
161+
<p><strong>Question:</strong> Does margin-top or margin-bottom has effect on inline elemet?</p>
162+
<p><strong>Answer:</strong> no.</p>
163+
<p><strong>Question:</strong> Does padding-top or padding-bottom has effect on inline elemet?</p>
164+
<p><strong>Answer:</strong> no.</p>
165+
</div>
166+
<div id="scopped">
167+
<h2>6. rem</h2>
168+
<p><strong>Question:</strong>If you have a &lt;p&gt; element with font-size: 10rem, will the text be responsive when the user resizes / drags the browser window?</p>
169+
<p><strong>Answer:</strong> no.</p>
170+
Note: google it and read about it.
171+
ref:
172+
</div>
173+
<div id="http_request">
174+
<h2>7. David Shariff </h2>
175+
<p><strong>Question:</strong> The pseudo class :checked will select inputs with type radio or checkbox, but not &lt;option&gt; elements.</p>
176+
<p><strong>Answer:</strong> False</p>
177+
<p><strong>Question:</strong> In a HTML document, the pseudo class :root always refers to the &lt;html&gt; element.</p>
178+
<p><strong>Answer:</strong> True</p>
179+
<p><strong>Question:</strong> The translate() function can move the position of an element on the z-axis.</p>
180+
<p><strong>Answer:</strong> False</p>
181+
<p><strong>Question:</strong></p>
182+
<p><strong>Answer:</strong></p>
183+
<p><strong>Question:</strong></p>
184+
<p><strong>Answer:</strong></p>
185+
<p><strong>Question:</strong></p>
186+
<p><strong>Answer:</strong></p>
187+
<p>ref: <a href="http://davidshariff.com/quiz/">David Shariff: quiz</a></p>
188+
</div>
189+
<div id="download_order">
190+
<h2>8. applied rule</h2>
191+
<p><strong>Question:</strong> What is the color of text sausage for he following rule?</p>
192+
<strong>html:</strong>
184193
<pre><code>
185-
&lt;div style=&quot;display: none;&quot;&gt;<br/> &lt;img src=&quot;mypic.jpg&quot; alt=&quot;My photo&quot;&gt;<br/>&lt;/div&gt;
194+
&lt;ul class=&quot;shopping-list&quot; id=&quot;awesome&quot;&gt;<br/> &lt;li&gt;&lt;span&gt;Milk&lt;/span&gt;&lt;/li&gt;<br/> &lt;li class=&quot;favorite&quot; id=&quot;must-buy&quot;&gt;&lt;span class=&quot;highlight&quot;&gt;Sausage&lt;/span&gt;&lt;/li&gt;<br/>&lt;/ul&gt;
186195
</code></pre>
187-
<P><strong>Answer:</strong> yes</P>
188-
<p>ref: <a href="http://davidshariff.com/quiz/">David Shariff: quiz</a></p>
189-
</div> -->
190-
<!-- <div id="download_order">
191-
<h2>8. download order</h2>
192-
<p><strong>Question:</strong> Does style1.css have to be downloaded and parsed before style2.css can be fetched?</p>
196+
<strong>a.</strong>
193197
<pre><code>
194-
&lt;head&gt;<br/> &lt;link href=&quot;style1.css&quot; rel=&quot;stylesheet&quot;&gt;<br/> &lt;link href=&quot;main2.css&quot; rel=&quot;stylesheet&quot;&gt;<br/>&lt;/head&gt;
198+
&lt;style&gt;<br/> ul {<br/> color: red;<br/> }<br/> li {<br/> color: blue;<br/> }<br/>&lt;/style&gt;
195199
</code></pre>
196-
<p><strong>Answer:</strong> No</p>
197-
<p><strong>Question:</strong> Does main2.css have to be downloaded and parsed before Paragraph 1 is rendered on the page?</p>
200+
<p><strong>Answer:</strong> blue</p>
201+
<br>
202+
<p><strong>b.</strong></p>
198203
<pre><code>
199-
&lt;head&gt;<br/> &lt;link href=&quot;main1.css&quot; rel=&quot;stylesheet&quot;&gt;<br/>&lt;/head&gt;<br/>&lt;body&gt;<br/> &lt;p&gt;Paragraph 1&lt;/p&gt;<br/> &lt;p&gt;Paragraph 2&lt;/p&gt;<br/> &lt;link href=&quot;main2.css&quot; rel=&quot;stylesheet&quot;&gt;<br/>&lt;/body&gt;
204+
&lt;style&gt;<br/> .shopping-list .favorite {<br/> color: red;<br/> }<br/> #must-buy {<br/> color: blue;<br/> }<br/>&lt;/style&gt;
200205
</code></pre>
201-
<p><strong>Answer:</strong> yes</p>
202-
206+
<p><strong>Answer:</strong> blue</p>
207+
<br>
208+
<strong>c.</strong>
209+
<pre><code>
210+
&lt;style&gt;<br/> ul#awesome {<br/> color: red;<br/> }<br/> ul.shopping-list li.favorite span {<br/> color: blue;<br/> }<br/>&lt;/style&gt;
211+
</code></pre>
212+
<p><strong>Answer:</strong> blue</p>
213+
<br>
214+
<strong>d.</strong>
215+
<pre><code>
216+
&lt;style&gt;<br/> ul#awesome #must-buy {<br/> color: red;<br/> }<br/> .favorite span {<br/> color: blue!important;<br/> }<br/>&lt;/style&gt;<br/>
217+
</code></pre>
218+
<p><strong>Answer:</strong> blue</p>
219+
<br>
220+
<strong>e.</strong>
221+
<pre><code>
222+
&lt;style&gt;<br/> ul.shopping-list li .highlight {<br/> color: red;<br/> }<br/> ul.shopping-list li .highlight:nth-of-type(odd) {<br/> color: blue;<br/> }<br/>&lt;/style&gt;<br/>
223+
</code></pre>
224+
<p><strong>Answer:</strong> blue</p>
225+
<br>
226+
<strong>f.</strong>
227+
<pre><code>
228+
&lt;style&gt;<br/> #awesome .favorite:not(#awesome) .highlight {<br/> color: red;<br/> }<br/> #awesome .highlight:nth-of-type(1):nth-last-of-type(1) {<br/> color: blue;<br/> }<br/>&lt;/style&gt;<br/>
229+
</code></pre>
230+
<p><strong>Answer:</strong> red</p>
203231
ref: <a href="http://davidshariff.com/quiz/">David Shariff: quiz</a>
204-
</div> -->
205-
<!-- <div id="optional_tag">
206-
<h2>9. self closing tag</h2>
207-
<p><strong>Question:</strong> What are optional closing tag? and why would u use it?</p>
208-
<p><strong>Answer:</strong> p, li, td, tr, th, html, body, etc. you dont have to provide end tag. whenever browser hits a new tag it automatically ends the previous tag. However, you have to be careful to escape it.</p>
209-
<p><strong>reason:</strong> you can save some byte and reduce bytes needs to be downloaded in a html file.</p>
232+
</div>
233+
<div id="optional_tag">
234+
<h2>9. applied rule-2</h2>
235+
<p><strong>Question:</strong> What will happen to the position of #example?</p>
210236
<pre><code>
211-
&lt;p&gt;Some text<br/>&lt;p&gt;Some more text<br/>&lt;ul&gt;<br/> &lt;li&gt;A list item<br/> &lt;li&gt;Another list item<br/>&lt;/ul&gt;
237+
&lt;style&gt;<br/> #example {<br/> margin-bottom: -5px;<br/> }<br/>&lt;/style&gt;<br/>&lt;&lt;p id=&quot;example&quot;&gt;Hello&lt;/p&gt;p id=&quot;example&quot;&gt;Hello&lt;/p&gt;
212238
</code></pre>
213-
<p> the above html will be parsed as the following blocks.</p>
239+
<p><strong>Answer:</strong> All elements succeeding #example will move 5px updward.</p>
240+
<p><strong>reason:</strong> .</p>
214241
<pre><code>
215-
&lt;p&gt;Some text&lt;/p&gt;<br/>&lt;p&gt;Some more text&lt;/p&gt;<br/>&lt;ul&gt;<br/> &lt;li&gt;A list item&lt;/li&gt;<br/> &lt;li&gt;Another list item&lt;/li&gt;<br/>&lt;/ul&gt;
216-
</code></pre>
217-
<p>ref: <a href="http://www.w3.org/TR/REC-html40/index/elements.html">W3.org: index of elements</a> </p>
218-
</div> -->
242+
&lt;style&gt;<br/> #example {<br/> margin-left: -5px;<br/> }<br/>&lt;/style&gt;<br/>&lt;&lt;p id=&quot;example&quot;&gt;Hello&lt;/p&gt;p id=&quot;example&quot;&gt;Hello&lt;/p&gt;
243+
</code></pre>
244+
<p><strong>Answer:</strong> #example will move 5px left.</p>
245+
<p>ref: <a href="">David Shariff</a> </p>
246+
</div>
219247

220-
<!-- <div id="div_span">
221-
<h2>10. span vs div</h2>
222-
<p><strong>Question:</strong> What is the difference between span, div?</p>
223-
<p><strong>Answer:</strong> div is a block element and span is inline element.</p>
224-
<p><strong>Extra:</strong> it is illegal to put block element inside inline element. div can have a p tag and a p tag can have a span. However, span can't have a div or p tag inside.</p>
225-
<p>ref: <a href="http://stackoverflow.com/questions/183532/what-is-the-difference-between-html-tags-div-and-span">Stackoverflow: div vs span</a> </p>
226-
</div> -->
227-
<!-- <div id="div_section_article">
228-
<h2>11. div, section & article</h2>
229-
<p><strong>Question:</strong> When should i prefer div over section and vice versa?</p>
230-
<p><strong>Answer:</strong> <br>&lt;section&gt; means that the content inside is grouped (i.e. relates to a single theme), and should appear as an entry in an outline of the page. A section normally has a heading (title) and maybe a footer too. It’s a chunk of related content, like a subsection of a long article, a major part of the page (eg the news section on the homepage), or a page in a webapp’s tabbed interface.</p>
231-
<p>&lt;div&gt;, on the other hand, does not convey any meaning, aside from any found in its class, lang and title attributes.</p>
232-
<p>&lt;article&gt;, represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.</p>
233-
<p><strong>Good Summary:</strong><a href="http://oli.jp/2009/html5-structure1/">div, section & article</a></p>
234-
<p><strong>Extra:</strong> Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.</p>
235-
<p>ref: (copied from) <a href="http://dev.w3.org/html5/spec-author-view/the-section-element.html#the-section-element">W3C: section</a>, <a href="http://dev.w3.org/html5/spec-author-view/the-div-element.html#the-div-element">W3C: div</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-article-element">W3c: article</a> </p>
236-
</div> -->
237-
<!-- <div id="svg_canvas">
238-
<h2>12. svg vs canvas</h2>
239-
<p><strong>Question:</strong> What are the difference between svg and canvas?</p>
240-
<p><strong>Answer:</strong> <a href="http://www.sitepoint.com/how-to-choose-between-canvas-and-svg/">Read this one.</a> (I am tired of copy-pasting)</p>
241-
</div> -->
248+
<div id="div_span">
249+
<h2>10. download resources</h2>
250+
<p><strong>Question:</strong> On page load, will mypic.jpg get downloaded by the browser?</p>
251+
<pre><code>
252+
&lt;style&gt;<br/> #test1 {<br/> display: none;<br/> }<br/> #test2 {<br/> background-image: url('mypic.jpg');<br/> visibility: hidden;<br/> }<br/>&lt;/style&gt;<br/>&lt;div id=&quot;test1&quot;&gt;<br/> &lt;span id=&quot;test2&quot;&gt;&lt;/span&gt;<br/>&lt;/div&gt;
253+
</code></pre>
254+
<p><strong>Answer:</strong> No.</p>
255+
<p><strong>reason:</strong> .</p>
256+
<p>ref: <a href="">might add css question 18 in david shariff</a> </p>
257+
</div>
258+
<div id="div_section_article">
259+
<h2>11. only</h2>
260+
<p><strong>Question:</strong> What is the use of only?</p>
261+
<pre><code>
262+
&lt;style&gt;<br/> @media only screen and (max-width: 1024px) {<br/> margin: 0;<br/> }<br/>&lt;/style&gt;<br/>
263+
</code></pre>
264+
<p><strong>Answer:</strong> Stops older browsers from parsing the remainder of the selector</p>
265+
<p><strong>Question:</strong> Does the screen keyword apply to the device's physical screen or the browser's viewport?</p>
266+
<p><strong>Answer:</strong> Browser's Viewport</p>
267+
</div>
268+
<div id="svg_canvas">
269+
<h2>12. overflow</h2>
270+
<p><strong>Question:</strong> Does overflow: hidden create a new block formatting context?</p>
271+
<pre><code>
272+
&lt;style&gt;<br/> div {<br/> overflow: hidden;<br/> }<br/> p {<br/> float: left;<br/> }<br/>&lt;/style&gt;<br/>&lt;div&gt;<br/> &lt;p&gt;I am floated&lt;/p&gt;<br/> &lt;p&gt;So am I&lt;/p&gt;<br/>&lt;/div&gt;<br/>
273+
</code></pre>
274+
<p><strong>Answer:</strong> yes</p>
275+
</div>
242276
<!-- <div id="mtuli_lang">
243277
<h2>13. multiple languages</h2>
244278
<p><strong>Question:</strong> How to serve a page content in multiple languages?</p>
@@ -290,6 +324,7 @@ <h2>References</h2>
290324
<li><a href=""></a></li>
291325
<li><a href=""></a></li>
292326
</ul>
327+
293328
</div>
294329

295330
<!-- div>h2+p+pre>code -->

0 commit comments

Comments
 (0)