Top 11 Popular CSS Interview Questions

CSS, Cascading Style Sheets, is a style sheet language that is simple and easy to learn. It is basically about how to represent HTML elements on the screen. It is mainly used for adding styles to web pages. It is one of the favorites of developers and designers for adding styles to web pages. So, today we will be talking about the 11 most asked questions on CSS. 11 Most Asked Questions On CSS 1. How to disable text selection highlighting? Answer: According to , the is currently supported in all browsers except Internet Explorer 9 and earlier versions (but sadly needs a vendor prefix). All of the correct CSS variations are: Can I use user-select still .noselect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* iOS Safari */ /* Safari */ /* Konqueror HTML */ /* Old versions of Firefox */ /* Internet Explorer/Edge */ /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */ . . p Selectable text p p class noselect Unselectable text p Note that it’s a (i.e. not a part of any specification). It is not guaranteed to work everywhere, and there might be differences in implementation among browsers, and in the future browsers can drop support for it. More information can be found in . non-standard feature Mozilla Developer Network documentation Alternative Answer: In most browsers, this can be achieved using proprietary variations on the CSS property, and now proposed in : user-select originally proposed and then abandoned in CSS 3 CSS UI Level 4 * { : none; : none; : none; : none; : none; } .unselectable -moz-user-select -khtml-user-select -webkit-user-select /* Introduced in Internet Explorer 10. See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/ */ -ms-user-select user-select For Internet Explorer div id "foo" unselectable "on" class "unselectable" div Sadly this property isn’t inherited, meaning you have to put an attribute in the start tag of every element inside the . If this is a problem, you could instead use JavaScript to do this recursively for an element’s descendants: { (node.nodeType == ) { node.setAttribute( , ); } child = node.firstChild; (child) { makeUnselectable(child); child = child.nextSibling; } }

makeUnselectable( .getElementById( )); ( ) function makeUnselectable node if 1 "unselectable" "on" var while document "foo" This tree traversal needs to be rerun whenever a new element is added to the tree, but it seems that it is possible to avoid this by adding a event handler that sets on the target of the event. See for details. This still doesn’t cover all possibilities. mousedown unselectable http://jsbin.com/yagekiji/1 While it is impossible to initiate selections in unselectable elements, in some browsers (Internet Explorer and Firefox, for example) it’s still impossible to prevent selections that start before and end after the unselectable element without making the whole document unselectable. 2. How to horizontally center a within another using CSS? You can apply this CSS to the inner : Answer: #inner { : %; margin: auto; } width 50 0 Of course, you don’t have to set the to . Any width less than the containing will work. The is what does the actual centering. width 50% margin: 0 auto If you are targeting (and later), it might be better to have this instead: Internet Explorer 8 #inner { : table; margin: auto; } display 0 It will make the inner element center horizontally and it works without setting a specific . width Working example here: #inner { : table; margin: auto; border: px solid black; }

#outer { : px solid red; width: % } display 0 1 border 1 100 div id "inner" div /div> Alternative Answer: If you don’t want to set a fixed width on the inner you could do something like this: div { : ; : center; } { : inline-block; } #outer width 100% text-align #inner display div id "inner" div /div> That makes the inner into an inline element that can be centered with . div text-align 3. How to change an HTML5 input’s placeholder color with CSS? Answer: There are three different implementations: pseudo-elements, pseudo-classes, and nothing. WebKit, Blink (Safari, Google Chrome, Opera 15+) and Microsoft Edge are using a pseudo-element: . [ ] ::-webkit-input-placeholder Ref Mozilla Firefox 4 to 18 is using a pseudo-class: ( colon). [ ] :-moz-placeholder one Ref Mozilla Firefox 19+ is using a pseudo-element: , but the old selector will still work for a while. [ ] ::-moz-placeholder Ref Internet Explorer 10 and 11 are using a pseudo-class: . [ ] :-ms-input-placeholder Ref April 2017: Most modern browsers support the simple pseudo-element [ ] ::placeholder Ref Internet Explorer 9 and lower does not support the attribute at all, while any CSS selector for placeholders. The discussion about the best implementation is still going on. Note the pseudo-elements act like real elements in the . placeholder Opera 12 and lower do not support Shadow DOM A on an will not get the same background color as the pseudo-element. User agents are required to ignore a rule with an unknown selector. padding input CSS selectors See : Selectors Level 3 a of selectors containing an invalid selector is invalid. group So we need separate rules for each browser. Otherwise, the whole group would be ignored by all browsers. ::-webkit-input-placeholder { color: # ; } :-moz-placeholder { color: # ; opacity: ; } ::-moz-placeholder { color: # ; opacity: ; } :-ms-input-placeholder { color: # ; } ::-ms-input-placeholder { color: # ; }

::placeholder { color: # ; } /* WebKit, Blink, Edge */ 909 /* Mozilla Firefox 4 to 18 */ 909 1 /* Mozilla Firefox 19+ */ 909 1 /* Internet Explorer 10-11 */ 909 /* Microsoft Edge */ 909 /* Most modern browsers support this now. */ 909 input placeholder Stack Snippets are awesome Usage notes Be careful to avoid bad contrasts. Firefox’s placeholder appears to be defaulting with reduced opacity, so need to use here. opacity: 1 Note that placeholder text is just cut off if it doesn’t fit – size your input elements in and test them with big minimum font size settings. Don’t forget translations: some languages for the same word. em need more room Browsers with HTML support for but without CSS support for that (like Opera) should be tested too. placeholder Some browsers use additional default CSS for some types ( , ). These might affect the rendering in unexpected ways. Use the and to change that. Example: input email search properties -webkit-appearance -moz-appearance [type= ] { -moz-appearance: textfield; -webkit-appearance: textfield; appearance: textfield; } "search" Alternative Answer: *::-webkit-input-placeholder { : red; } *:-moz-placeholder { color: red; opacity: ; } *::-moz-placeholder { color: red; opacity: ; } *:-ms-input-placeholder { color: red; } *::-ms-input-placeholder { color: red; } *::placeholder { color: red; } /* do not group these rules */ color /* FF 4-18 */ 1 /* FF 19+ */ 1 /* IE 10+ */ /* Microsoft Edge */ /* modern browser */ input placeholder hello br textarea placeholder hello textarea This will style all and placeholders. input textarea Do not group these rules. Instead, make a separate rule for every selector (one invalid selector in a group makes the whole group invalid). Important Note: 4. How to set cellpadding and cellspacing in CSS? Answer: For controlling “cellpadding” in CSS, you can simply use on table cells. E.g. for 10px of “cellpadding”: padding td { : px; } padding 10 For “cellspacing”, you can apply the CSS property to your table. E.g. for 10px of “cellspacing”: border-spacing table { border-spacing: px; border-collapse: separate; } 10 This property will even allow separate horizontal and vertical spacing, something you couldn’t do with old-school “cellspacing”. Issues in IE <= 7 This will work in almost all popular browsers except for Internet Explorer up through Internet Explorer 7, where you’re almost out of luck. “Almost” because these browsers still support the property, which merges the borders of adjoining table cells. border-collapse If you’re trying to eliminate cellspacing (that is, ) then should have the same effect: no space between table cells. This support is buggy, though, as it does not override an existing HTML attribute on the table element. In short: for non-Internet Explorer 5-7 browsers, handles you. For Internet Explorer, if your situation is just right (you want 0 cellspacing and your table doesn’t have it defined already), you can use . cellspacing="0" border-collapse:collapse cellspacing border-spacing border-collapse:collapse table { border-spacing: ; border-collapse: collapse; } 0 For a great overview of CSS properties that one can apply to tables and for which browsers, see this . Note: fantastic Quirksmode page Is there a CSS parent selector? 5. Answer: There is currently no way to select the parent of an element in CSS. If there was a way to do it, it would be in either of the current CSS selectors specs: Selectors Level 3 Spec CSS 2.1 Selectors Spec That said, the includes a pseudo-class that will provide this capability. It will be similar to the . Selectors Level 4 Working Draft :has() jQuery implementation li:has(> a.active) { } /* styles to apply to the li tag */ However, as of May 2020, . In the meantime, you’ll have to resort to JavaScript if you need to select a parent element. this is still not supported by any browser Alternative Answer: You can use : this script *! > input[type=text] { : # ; } background 000 This will select any parent of text input. But wait, there’s still much more. If you want, you can select a specified parent: .input-wrap! > input[type=text] { : # ; } background 000 Or select it when it’s active: .input-wrap! > input[type=text]:focus { : # ; } background 000 Check out this HTML: Your name sir class "input-wrap" input type "text" class "Name" div You can select that when the is active and show it: span.help input .input-wrap! .help > input[type=text]:focus { : block; } display There are many more capabilities; just check out the documentation of the plugin. By the way, it works in Internet Explorer. How to disable the resizable property of a textarea? 6. Answer: The following CSS rule disables resizing behavior for elements: textarea textarea { : none; } resize To disable it for some (but not all) s, there are a . To disable a specific with the attribute set to (i.e., ): textarea couple of options textarea name foo textarea[name=foo] { : none; } resize Or, using an attribute (i.e., ): id #foo { : none; } resize The lists possible values for resizing restrictions: none, both, horizontal, vertical, and inherit: W3C page textarea { : vertical; } resize /* user can resize vertically, but width is fixed */ Review a decent to see what browsers currently support this feature. The dimensions can be in CSS using max-width, max-height, min-width, and min-height. compatibility page further restrained This property does nothing unless the overflow property is something other than visible, which is the default for most elements. Note: So generally to use this, you’ll have to set something like overflow: scroll; http://css-tricks.com/almanac/properties/r/resize/ Alternative Answer: In CSS textarea { : none; } resize 7. Is it possible to have a list without bullets? Answer: You can remove bullets by setting the to on the CSS for the parent element (typically a ), for example: list-style-type none ul { list-style-type: none; } You might also want to add and to that if you want to remove indentation as well. See for a great walkthrough of list formatting techniques. padding: 0 margin: 0 Listutorial Alternative Answer: If you’re using Bootstrap, it has an “unstyled” class: Remove the default list-style and left padding on list items (immediate children only). Bootstrap 2: li li /ul> http://twitter.github.io/bootstrap/base-css.html#typography Bootstrap 3 and 4: li li /ul> Bootstrap 3: http://getbootstrap.com/css/#type-lists Bootstrap 4: https://getbootstrap.com/docs/4.3/content/typography/#unstyled 8. How to give text or an image a transparent background using CSS? Answer: You can either use a semi-transparent image or use CSS 3: PNG background-color: rgba( , , , ); 255 0 0 0.5 Here’s an article from css3.info, . Opacity, RGBA and compromise span span /p> Alternative Answer: In Firefox 3 and Safari 3, you can use RGBA. A little known trick is that you can use it in Internet Explorer as well using the gradient filter. background-color: rgba( , , , ); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType= , StartColorStr= , EndColorStr= ); 0 255 0 0.5 0 '#7F00FF00' '#7F00FF00' The first hex number defines the alpha value of the color. Full solution for all browsers: .alpha60 { background: rgb( , , ) transparent; background: rgba( , , , ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=# , endColorstr=# ); -ms-filter: ; } /* Fallback for web browsers that doesn't support RGBa */ 0 0 0 /* RGBa with 0.6 opacity */ 0 0 0 0.6 /* For IE 5.5 - 7*/ 99000000 99000000 /* For IE 8*/ "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)" This is from . CSS background transparency without affecting child elements, through RGBa and filters This is when using the following code: An XHTML 1.0 Strict standard template .transparent-background-with-text-and-images-on-top { background: rgb(0, 0, 0) transparent; /* Fallback for web browsers that doesn't support RGBa */ background: rgba(0, 0, 0, 0.6); /* RGBa with 0.6 opacity */ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); /* For IE 5.5 - 7*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; /* For IE 8*/ } Here some content (text AND images) "on top of the transparent background"

meta http-equiv "X-UA-Compatible" content "IE=edge" 9. How to vertically center text with CSS? Answer: You can try this basic approach: div { : px; line-height: px; text-align: center; border: px dashed #f69c55; } height 100 100 2 Hello World! div It only works for a single line of text though, because we set the line’s height to the same height as the containing box element. A more versatile approach This is another way to align text vertically. This solution will work for a single line and multiple lines of text, but it still requires a fixed height container: div { : px; line-height: px; text-align: center; border: px dashed #f69c55; } span { : inline-block; vertical-align: middle; line-height: normal; } height 100 100 2 display span span /div> The CSS just sizes the , vertically center aligns the by setting the ‘s line-height equal to its height, and makes the an inline-block with . Then it sets the line-height back to normal for the , so its contents will flow naturally inside the block. vertical-align: middle Simulating table display And here is another option, which may not work on older (basically just Internet Explorer 7). browsers that don’t support display: table and display: table-cell Using CSS we simulate table behavior (since tables support vertical alignment), and the HTML is the same as the second example: div { : table; height: px; width: %; text-align: center; border: px dashed #f69c55; } span { : table-cell; vertical-align: middle; } display 100 100 2 display span span /div> Using absolute positioning This technique uses an absolutely positioned element setting top, bottom, left, and right to 0. It is described in more detail in an article in Smashing Magazine, . Absolute Horizontal And Vertical Centering In CSS div { : flex; justify-content: center; align-items: center; height: px; width: %; border: px dashed #f69c55; } display 100 100 2 span span /div> Alternative Answer: Another way is with . Just add the following code to the element: Flexbox container display: flex; justify-content: center; align-items: center; /* align horizontal */ /* align vertical */ Flexbox demo 1 .box { : px; width: px; background: # ; font-size: px; font-style: oblique; color: #FFF; text-align: center; padding: px; margin: px; display: flex; justify-content: center; align-items: center; } height 150 400 000 24 0 20 20 /* align horizontal */ /* align vertical */ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh Alternatively, instead of aligning the content via the , the flexbox can also center the with an . So to center the flex item both horizontally and vertically just set it with container flex item auto margin when there is only one flex-item in the flex container margin:auto Flexbox Demo 2 .box { : px; width: px; background: # ; font-size: px; font-style: oblique; color: #FFF; text-align: center; padding: px; margin: px; display: flex; } .box span { : auto; } height 150 400 000 24 0 20 20 margin span span /div> All the above applies to centering items while laying them out in . This is also the default behavior because by default the value for is . horizontal rows flex-direction row If, however, flex-items need to be laid out in , then should be set on the container to set the main-axis as column and additionally the and properties now work with centering vertically and centering horizontally) vertical columns flex-direction: column justify-content align-items the other way around justify-content: center align-items: center flex-direction: column demo .box { : px; width: px; background: # ; font-size: px; font-style: oblique; color: #FFF; display: flex; flex-direction: column; justify-content: center; align-items: center; } p { : px; } height 150 400 000 18 /* vertically aligns items */ /* horizontally aligns items */ margin 5 - vertically aligns class "box" When flex-direction is column... p p "justify-content: center" /p> "align-items: center" - horizontally aligns div A good place to start with Flexbox to see some of its features and get syntax for maximum browser support is Also, browser support nowadays is very good: flexyboxes caniuse For cross-browser compatibility for and , you can use the following: display: flex align-items display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; 10. How to transition height: 0; to height: auto; using CSS? Answer: Use in the transition and not . And set a value on to something bigger than your box will ever get. max-height height max-height See . JSFiddle demo #menu #list { max-height: ; transition: max-height s ease-out; overflow: hidden; background: #d5d5d5; }

#menu:hover #list { max-height: px; transition: max-height s ease- ; } 0 0.15 500 0.25 in item item item item item a a "list" ul /div> 11. How to use transitions on the CSS display property? Answer: You can concatenate two transitions or more and is what comes handy this time. visibility div { : px solid #eee; } div > ul { : hidden; opacity: ; transition: visibility s, opacity s linear; } div:hover > ul { : visible; opacity: ; } border 1 visibility 0 0 0.5 visibility 1 Item 1 Item 2 Item 3 ul ul /div> (Don’t forget the vendor prefixes to the property.) transition Alternative Answer: You need to hide the element by other means in order to get this to work. You can accomplish the effect by positioning both s absolutely and setting the hidden one to . If you even toggle the property from to , your transition on other elements will not occur. opacity: 0 display none block To work around this, always allow the element to be , but hide the element by adjusting any of these means: display: block Set the to . height 0 Set the to . opacity 0 Position the element outside of the frame of another element that has . overflow: hidden There are likely more solutions, but you cannot perform a transition if you toggle the element to . display: none For example, you may attempt to try something like this: div { : none; transition: opacity s ease-out; opacity: ; } div.active { : ; display: block; } display 1 0 opacity 1 But that will work. Because of this, you will always need to keep the element , but you could get around it by doing something like this: not display: block div { : opacity s ease-out; opacity: ; height: ; overflow: hidden; } div.active { : ; height: auto; } transition 1 0 0 opacity 1 These are the 11 most commonly asked questions on CSS. If you have any suggestions or any confusion, please comment below. If you need any help, we will be glad to help you. Hope this article helped you. In Conclusion This post was originally posted on . DevPost by Truemark Previously published at https://thedevpost.com/blog/11-most-asked-questions-on-css/