CSS Interview Questions Continue

Hope you enjoyed the read so far. We’ve more recommendations for you.

READ : jQuery Interview Questions and Answers 

READ : HTML5 interview Questions and Answers on DGlobaltech

READ : Front-end coding Question : Create function to reverse words in a sentence

9. What are some ways you might target IE (or IE6) only, without affecting other browsers?

Below are the example for browser specific Style Sheet, which targets defined browser.

Target ALL VERSIONS of IE

<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

Target everything EXCEPT IE

<!--[if !IE]><!-->
	<link rel="stylesheet" type="text/css" href="not-ie.css" />
 <!--<![endif]-->

Target IE 6 ONLY

<!--[if IE 6]>
	<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

READ : Difference between CSS and CSS3 : CSS2 vs. CSS3

READ : CSS Interview Questions and Answers for Experienced

READ : AJAX Interview Questions and Answers : 15 Commonly asked questions

READ : SQL Interview Questions and Answers : Commonly asked Questions

10. What’s the difference between an inline element and a block element?

A block-level element is an element that creates large blocks of content like  paragraphs or page divisions. They start new lines of text when you use them, and can contain other blocks as well as inline elements and text or data.

An inline element is an element that define text or data in the document like STRONG makes the enclosed text strongly emphasized and Q says the enclosed text is a quotation. They don’t start new lines when you use them, and they generally only contain other inline tags and text or data. Or they include nothing at all, like the BR tag.

Some properties that inline elements ignore include:

  • width and height
  • max-width and max-height
  • min-width and min-height

The CSS property display lets you change an inline property to block or a block to inline or either of them to not display at all.

display: block;
display:inline;
display:none;

    When to Change the Display Property

  • Horizontal list menus – Lists are block-level elements, but if you want your menu to display horizontally, you need to convert the list to an inline element, so that newlines aren’t added between each list item.
  • Headers in the text – Sometimes you might want a header to remain in the text, but have the HTML header values. Changing the h1-h6 values to inline will let the following text flow next to it.
  • Removing the element – And of course, if you want to remove the element completely from the document flow, you can set the display to none.

11. Explain how the CSS box model works. Draw a box and then explain what the border is, what the margin is, what the padding is, etc.? If you assign a width: or height: to something, what specifically does that refer to?

All HTML elements can be considered as boxes. In CSS, the term “box model” is used when talking about design and layout.

The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.

The box model allows us to place a border around elements and space elements in relation to other elements.

boxdim

Explanation of the different parts:

  • Margin – Clears an area around the border. The margin does not have a background color, it is completely transparent
  • Border – A border that goes around the padding and content. The border is affected by the background color of the box
  • Padding – Clears an area around the content. The padding is affected by the background color of the box
  • Content – The content of the box, where text and images appear

Here is the snippet to draw box model to your web page.

<head>
<style>
div.test
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>

<body>

<div class=”test”>The picture above is 250px wide. The total width of this element is   also 250px.</div>

</body>

12. Explain vertical margin collapsing.

Top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the margins combined into it, a behavior known as margin collapsing.

Margin collapsing occurs in three basic cases:

Adjacent siblings
The margins of adjacent siblings are collapsed (except when the later sibling needs to be cleared past floats). 
Parent and first/last child
If there is no border, padding, inline content, or clearance to separate the margin-top of a block with the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block with the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.
Empty blocks
If there is no border, padding, inline content, height, or min-height to separate a block’s margin-top from its margin-bottom, then its top and bottom margins collapse.
vertical margins collapse between certain boxes.
To understand how vertical margins collapse lets start with a basic html and CSS example.

Adjacent Elements With Positive Margin

Vertical adjoining margins collapses. If two elements has positive vertically adjoining margin than only the maximum of both will take effect.

CSS Code

1
2
3
#parent{ background-color:yellow; width:300px; }
#red {background-color:red; height:50px; margin-bottom:30px;}
#blue {background-color:blue; height:50px; margin-top:20px;}

Browser Result

Margins of floating and absolutely positioned elements never collapse.

There are other situations where elements do not have their margins collapsed:

  • inline-block elements
  • elements with overflow set to anything other than visible (They do not collapse margins with their children.)
  • cleared elements (They do not collapse their top margins with their parent block’s bottom margin.)
  • the root element

13. How do you float an element, and what does that mean? What’s Clearing?

With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it.

Float is very often used for images, but it is also useful when working with layouts.

Elements are floated horizontally, this means that an element can only be floated left or right, not up or down.

A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element.

Below is the example, which shows using css float property you can set image to the right of your web page.

<head>
<style>
img
{
float:right;
}
</style>
</head>

<body>

<p>

<img src=”logocss.gif” width=”95″ height=”84″ />

This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>

14. What’s the difference between position: relative, position: fixed & position: absolute?

Here, I’ve listed basic difference between css positioning properties.

Position-Relative. This type of positioning is probably the most confusing and misused. What it really means is “relative to itself”. If you set position: relative;on an element but no other positioning attributes (top, left, bottom or right), it will no effect on it’s positioning at all, it will be exactly as it would be if you left it as position: static; But if you DO give it some other positioning attribute, say, top: 10px;, it will shift it’s position 10 pixels DOWN from where it would NORMALLY be.

Position-Absolute. This is a very powerful type of positioning that allows you to literally place any page element exactly where you want it. You use the positioning attributes top, left bottom and right to set the location. Remember that these values will be relative to the next parent element. If there is no such parent, it will default all the way back up to the <html> element itself meaning it will be placed relatively to the page itself.

Position-Fixed. This type of positioning is fairly rare but certainly has its uses. A fixed position element is positioned relative to the viewport, or the browser window itself. The viewport doesn’t change when the window is scrolled, so a fixed positioned element will stay right where it is when the page is scrolled.

15. What does z-index do? 

The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

Here is the Example, where using z-index property you can display in front of image.

<head>
<style>
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>

<body>
<h1>This is a heading</h1>
<img src=”w3css.gif” width=”100″ height=”140″ />
<p>Because the image has a z-index of -1, it will be placed behind the text.</p>
</body>

READ : How to prepare for a job interview : Successful face to face interview tricks and tips

READ : JavaScript Interview Questions and Answers on DGlobaltech


1 Comments

  1. I simply want to mention I am new to blogs and absolutely liked your page. Most likely I’m going to bookmark your website . You actually have superb articles. Bless you for revealing your webpage.

  2. I’m amazed, I have to admit. Rarely do I come across a blog that’s equally educative and interesting, and let me tell you, you have hit the nail on the head. The issue is something which not enough people are speaking intelligently about. I am very happy I found this in my search for something relating to this.

  3. I’m impressed, I have to admit. Seldom do I encounter a blog that’s both educative and engaging, and let me tell you, you’ve hit the nail on the head. The problem is an issue that not enough people are speaking intelligently about. Now i’m very happy that I stumbled across this during my hunt for something regarding this.

  4. Oh my goodness! Amazing article dude! Thanks, However I am going through difficulties with your RSS. I don’t understand the reason why I cannot subscribe to it. Is there anybody else getting identical RSS problems? Anyone who knows the solution can you kindly respond? Thanx!

  5. I’m impressed, I must say. Seldom do I encounter a blog that’s equally educative and interesting, and let me tell you, you have hit the nail on the head. The problem is an issue that not enough men and women are speaking intelligently about. I am very happy that I came across this in my search for something regarding this.

  6. You actually make it appear really easy along with your presentation but I find this topic to be actually one thing which I think I’d by no means understand. It sort of feels too complicated and very large for me. I am having a look forward on your next submit, I’ll attempt to get the hold of it!

  7. When I initially left a comment I appear to have clicked the -Notify me when new comments are added- checkbox and from now on every time a comment is added I receive four emails with the exact same comment. Is there an easy method you are able to remove me from that service? Thank you.

  8. Wonderful work! This is the type of info that are meant to be shared across the web. Shame on the seek engines for no longer positioning this submit upper! Come on over and seek advice from my web site . Thanks =)

  9. Thanks for giving your ideas. Something is that college students have an option between federal student loan along with a private education loan where it’s easier to opt for student loan consolidation than over the federal education loan.

  10. Pretty nice post. I just stumbled upon your weblog and wanted to say that I’ve really enjoyed surfing around your blog posts. After all I’ll be subscribing to your rss feed and I hope you write again very soon!

  11. I together with my buddies came studying the great secrets found on your web site and then immediately I had a terrible suspicion I had not thanked you for those strategies. The young boys came absolutely very interested to learn all of them and have in effect seriously been using those things. Thank you for indeed being very considerate and also for deciding on such outstanding subject areas millions of individuals are really desperate to be aware of. Our sincere regret for not expressing appreciation to earlier.
    (sildenafil citrate

  12. I just couldn’t depart your website prior to suggesting that I actually enjoyed the standard information a person provide for your visitors? Is gonna be back often in order to check up on new posts

  13. Oh my goodness! Amazing article dude! Thank you, However I am encountering troubles with your RSS. I don’t understand the reason why I am unable to subscribe to it. Is there anybody else having the same RSS problems? Anyone that knows the solution can you kindly respond? Thanks.

  14. Having read this I thought it was very enlightening. I appreciate you spending some time and effort to put this information together. I once again find myself personally spending a lot of time both reading and leaving comments. But so what, it was still worth it!

  15. (BuzzFeed News) – You may check the calories in a cheap viagra, steps captivated today and even your main part agglomeration measure but too sundry of us don’t cognizant of the condition estimation that could save our lives – blood pressure. Dubbed the silent lallapalooza, sybaritic blood vexation (BP) infrequently has symptoms in the future it causes 80% of strokes and 32% of mettle attacks, according to Blood Pressure UK. It’s little as numerous as 4 million people are undiagnosed and command only unearth old hat theirs is too foremost when they suffer with a pluck strike at or stroke.
    November 31, 2019 10:12

  16. (NBC) – Turbulent blood strength, also known as hypertension, is the most vulgar cardiovascular disease. Huge blood difficulties does not as a rule engender symptoms at start with, but if outrageous blood load is even across circumstance, it can damage your arteries and extension hazard quest of vital medical conditions such as basic nature attacks and non prescription viagra alternative, strokes, and kidney disease. White-coat hypertension refers to patients who have weighty blood straits when reasoned in the doctor’s house but normal blood difficulties when studied limit of medical settings.
    Updated: January 15, 2019 13:14

  17. (NBC) – Nonpharmacologic interventions to compress BP comprehend: preponderancy waste recompense overweight or abdominous patients with a resolution healthy slim, sodium provision, and potassium supplementation within the abstain; and increased incarnate activity with a structured exercise program. Men should be restrictive to no more than 2 and women no more than 1 conventional fire-water and need viagra without a doctor prescription tope(s) per day. The same impact of each lifestyle transformation is a 4-5 mm Hg fall off in SBP and 2-4 mm Hg decrease in DBP; but diet base-born in sodium, saturated roly-poly, and perfect well-fed and distend in fruits, vegetables, and grains may run out of steam SBP past close to 11 mm Hg.
    Updated: December 19, 2019 13:45

  18. Age-related infertility – Infertility problems commonly enter someone’s head in people who have passed a unfluctuating age. Most often, women who are 35 or heavens and men after 40, take longer to conceive. Often, women assume that if they calm are having their usual cycles, their fertility is superior, but, how to buy viagra online is to some extent true. Discretion is a large particular that impacts egg prominence and quantity. Despite that, if your fellow-dancer is older to you, require five years, this supplemental becomes a difficulty, thus, also increasing the gamble of fertility problems after 35. June 30, 2019 12:13

  19. It’s really very complex in this active life to listen news
    on Television, so I simply use internet for that reason, and obtain the hottest
    information.

  20. So, when you pay off good cheap medical insurance may sooner be utilitarian exchange for treatment of ill-timed ejaculation. As a question of fact, if this really works, viagra ibuprofen determination be underdeveloped ejaculators who succeed in wrong — they inert advocate their erection, but take home to have more orgasms!

  21. Fantastic beat ! I would like to apprentice at the same time as you amend your web site, how could i subscribe for a
    weblog site? The account helped me a applicable deal.
    I had been a little bit acquainted of this your broadcast offered vivid transparent idea

  22. Definitely imagine that that you stated. Your favorite reason appeared to
    be at the net the simplest thing to understand of.
    I say to you, I definitely get irked whilst other folks consider concerns that they just
    do not understand about. You controlled to hit the nail upon the top and
    also outlined out the entire thing without having side-effects
    , people could take a signal. Will probably be again to get more.
    Thank you

  23. Hi! Do you know if they make any plugins to assist with SEO?
    I’m trying to get my blog to rank for some targeted keywords but I’m not
    seeing very good gains. If you know of any please share.
    Kudos!

  24. Thousands to tens of millions and billions of chikungunya or dengue tests into one.
    Performing assessments sorting and Analyzing and this route is designated as
    nice assist. Antique iron banks provide a big selection of
    examine and then to help. The Canyon the Dragoon Corridor
    by which rim-to-rim helicopter flights can be found to help.
    The most important firms are international health day
    is a pink line at investigating. Predictably health care costs skyrocketed.
    It’s already identified only to notify the candidates in regards to the
    human body for example. Many candidates give in and allowed return to medical doctors for each time.

    Video surveillance any locking systems that make up the applying from with obligatory requirement for candidates.
    Today due to be self dominated that States might
    move their own belief programs. Government selected to make cash when you
    are under the impression that. In 2013 Zika re-emerged
    in the aforementioned examine which found that the propaganda
    arm they are.

  25. I simply want to mention I am very new to weblog and actually liked your web-site. Very likely I’m planning to bookmark your blog . You surely have exceptional articles and reviews. With thanks for sharing with us your webpage.

  26. Stock side effects of this drug are: flushing, balmy dizziness, problem, nasal congestion, diarrhea, fogginess dream, itching, etc. There is nothing to trouble roughly them and have taking the a. These symptoms purpose disappear in some time. Yes, but if they persist in search elongated one day witness your doctor. Nasty side effects of good rx pharmacy are: chest pain, unnatural heartbeat, swelling of legs, shortness of soup‡on astound, unfeeling dizziness, prolonged erection representing more than 4 hours, soreness, numbness, courage berate, whack, changes in blood sway, and so on.

  27. You are so awesome! I don’t believe I’ve read anything like this before. So great to find someone with a few original thoughts on this issue. Seriously.. thank you for starting this up. This website is one thing that is needed on the web, someone with a bit of originality.

  28. I truly love your site.. Great colors & theme. Did you create this amazing site yourself? Please reply back as I’m looking to create my own website and would love to find out where you got this from or exactly what the theme is called. Many thanks!

  29. I just want to mention I am beginner to blogs and actually loved this blog. Probably I’m want to bookmark your blog post . You absolutely have remarkable writings. Kudos for sharing with us your web site.

  30. Hello There. I found your blog using msn. This is an extremely well written article. I will be sure to bookmark it and return to read more of your useful information. Thanks for the post. I’ll definitely return.

  31. A person essentially help to make seriously articles I would state. This is the first time I frequented your web page and thus far? I amazed with the research you made to create this particular publish extraordinary. Fantastic job!

  32. Thank you a bunch for sharing this with all folks you really recognise what you are speaking approximately! Bookmarked. Kindly also seek advice from my web site =). We could have a hyperlink alternate agreement between us!

  33. I enjoy you because of all your hard work on this website. Ellie takes pleasure in getting into research and it’s really easy to understand why. Many of us know all relating to the lively form you convey very helpful ideas via this blog and as well inspire response from others on the idea plus our favorite girl is in fact starting to learn a whole lot. Take advantage of the remaining portion of the year. Your conducting a tremendous job.

  34. I am very pleased to discover this web page. I want to tell you thx for your effort in providing this amazing read! I certainly enjoyed it and I have you book-marked to follow new issues you post.

  35. I genuinely enjoy looking through on this web site, it has got good content. “One should die proudly when it is no longer possible to live proudly.” by Friedrich Wilhelm Nietzsche.

  36. I’ll immediately grasp your rss feed as I can’t to find your e-mail subscription hyperlink or newsletter service. Do you’ve any? Kindly let me understand so that I may just subscribe. Thanks.

  37. Greetings from Idaho! I’m bored to tears at work so I decided to browse your website on my iphone during lunch break. I love the knowledge you present here and can’t wait to take a look when I get home. I’m amazed at how fast your blog loaded on my cell phone .. I’m not even using WIFI, just 3G .. Anyways, excellent blog!

  38. Normally I do not read post on blogs, however I would like to say that this write-up very compelled me to take a look at and do it! Your writing style has been amazed me. Thank you, very nice post.

  39. I don’t even know the way I finished up here, however I assumed this put up was once good. I don’t realize who you’re but definitely you are going to a famous blogger if you are not already Cheers!

  40. certainly like your website but you need to take a look at the spelling on quite a few of your posts. Several of them are rife with spelling problems and I to find it very troublesome to tell the reality on the other hand I will definitely come back again.

  41. Nice post. I discover something more challenging on diverse blogs everyday. It will always be stimulating to read content from other writers and employ a little from their site. I’d choose to use some together with the content in this little blog regardless of whether you do not mind. Natually I’ll provide a link on the internet weblog. Appreciate your sharing.

  42. Wow, wonderful blog structure! How long have you been blogging for?
    you made running a blog look easy. The whole glance of
    your site is wonderful, let alone the content material!

  43. Wonderful goods from you, man. I have consider your stuff previous to and you are simply too wonderful. I really like what you have bought here, certainly like what you’re stating and the best way during which you are saying it. You’re making it entertaining and you continue to take care of to keep it sensible. I can’t wait to learn far more from you. This is actually a terrific web site.

  44. (Health News) – over the counter viagra, consumption may cause slight dizziness, consequently it is suggested not to act any machinery looking for 4 to 6 hours after alluring it to escape accident. Acquire up slowly after taking this benumb to keep away from giddiness. Long in the tooth men should run after it exclusively after getting tolerance from doctor. Alcohol consumption should be root shunned while intriguing what education is needed to become a physician. If erection sustains for the benefit of more than 4 hours seek medical heed immediately. Do not become set to penegra nearby attractive every in these times and then. October 31, 2016 19:52

  45. Greetings, I think your web site may be having web browser compatibility problems. When I take a look at your blog in Safari, it looks fine however when opening in I.E., it has some overlapping issues. I simply wanted to provide you with a quick heads up! Aside from that, excellent blog!

  46. I’m not sure why but this weblog is loading very slow for me. Is anyone else having this issue or is it a issue on my end? I’ll check back later on and see if the problem still exists.

  47. Hey, I think your site might be having browser compatibility issues. When I look at your blog site in Ie, it looks fine but when opening in Internet Explorer, it has some overlapping. I just wanted to give you a quick heads up! Other then that, excellent blog!

  48. My wife and i felt so joyous when John managed to complete his inquiry through your precious recommendations he got through the web page. It is now and again perplexing to simply continually be giving out points that many the rest may have been selling. And we figure out we have you to appreciate for that. The entire explanations you made, the easy web site navigation, the relationships you make it possible to foster – it’s mostly awesome, and it’s aiding our son and our family imagine that that article is enjoyable, which is exceptionally indispensable. Thanks for everything!

  49. Excellent beat ! I would like to apprentice while you amend your site, how could i subscribe for a blog website? The account helped me a acceptable deal. I had been tiny bit acquainted of this your broadcast provided bright clear idea

  50. It’s perfect time to make some plans for the future and it’s time to be happy. I’ve read this post and if I could I wish to suggest you some interesting things or suggestions. Perhaps you could write next articles referring to this article. I want to read even more things about it!

  51. Hi! I could have sworn I’ve been to this web site before but after looking at a few of the articles I realized it’s new to me. Nonetheless, I’m certainly happy I stumbled upon it and I’ll be book-marking it and checking back often.

  52. Do you have a spam issue on this website; I also am a blogger, and I was wanting to know your situation; many of us have created some nice practices and we are looking to swap techniques with other folks, be sure to shoot me an email if interested.

  53. Wow, marvelous blog format! How long have you ever been blogging for? you made blogging look easy. The total glance of your web site is wonderful, as neatly as the content material!

  54. My brother suggested I would possibly like this blog. He was totally right. This put up truly made my day. You cann’t consider simply how a lot time I had spent for this information! Thanks!

  55. Your style is very unique compared to other people I have read stuff from. I appreciate you for posting when you have the opportunity, Guess I will just book mark this site.

  56. My wife and i ended up being quite excited when Jordan could deal with his reports through your ideas he gained through the web page. It is now and again perplexing to just be freely giving techniques which the others might have been trying to sell. Therefore we remember we’ve got the website owner to be grateful to because of that. The main explanations you’ve made, the simple website navigation, the relationships your site make it easier to engender – it’s got everything impressive, and it is aiding our son and the family recognize that this topic is cool, which is certainly highly essential. Thank you for all the pieces!

  57. Thanks for your concepts. One thing I have noticed is the fact banks and financial institutions are aware of the spending patterns of consumers while also understand that most people max away their cards around the breaks. They properly take advantage of this real fact and start flooding ones inbox and also snail-mail box with hundreds of no interest APR card offers shortly after the holiday season concludes. Knowing that when you are like 98% of all American community, you’ll get at the chance to consolidate card debt and switch balances to 0 annual percentage rates credit cards.

  58. Can I just say what a relief to uncover someone that really knows what they are discussing online. You definitely know how to bring an issue to light and make it important. More people must read this and understand this side of the story. I was surprised you’re not more popular given that you definitely have the gift.

  59. This is the right website for everyone who wants to understand this topic. You realize a whole lot its almost tough to argue with you (not that I really will need to…HaHa). You definitely put a brand new spin on a subject which has been discussed for a long time. Wonderful stuff, just excellent.

  60. Hello! I know this is somewhat off topic but I was wondering which blog platform are you using for this site? I’m getting sick and tired of WordPress because I’ve had problems with hackers and I’m looking at options for another platform. I would be fantastic if you could point me in the direction of a good platform.

  61. I used to be more than happy to seek out this web-site.I wished to thanks on your time for this glorious read!! I undoubtedly enjoying every little little bit of it and I have you bookmarked to take a look at new stuff you blog post.

  62. I like what you guys are up also. Such smart work and reporting! Keep up the excellent works guys I have incorporated you guys to my blogroll. I think it will improve the value of my web site :).

  63. I precisely had to thank you so much once more. I am not sure what I might have made to happen in the absence of the type of solutions documented by you concerning such a concern. This has been an absolute troublesome setting for me, nevertheless looking at this specialized tactic you processed the issue forced me to jump with joy. I’m just thankful for your service and then pray you comprehend what a powerful job that you’re getting into teaching the mediocre ones thru your web page. Most probably you have never met any of us.

  64. Nice post. I learn something new and challenging on websites I stumbleupon on a daily basis. It’s always useful to read through articles from other writers and use something from other websites.

  65. I’m really inspired with your writing talents and also with the layout on your weblog. Is this a paid subject or did you customize it your self? Either way stay up the excellent high quality writing, it is rare to peer a nice weblog like this one nowadays..

  66. hello!,I like your writing very much! percentage we communicate more about your post on AOL? I need an expert in this area to solve my problem. Maybe that’s you! Having a look forward to see you.

  67. I’m amazed, I have to admit. Seldom do I come across a blog that’s both educative and amusing, and let me tell you, you’ve hit the nail on the head. The problem is something too few folks are speaking intelligently about. I am very happy that I came across this during my hunt for something relating to this.