DEV Community

Cover image for 11 Most Asked Questions On CSS
Truemark Technology profile image KiranPoudel98
KiranPoudel98 for Truemark Technology

Posted on • Edited on • Originally published at thedevpost.com

11 Most Asked Questions On CSS

#css

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 Can I use, the user-select is currently supported in all browsers except Internet Explorer 9 and earlier versions (but sadly still needs a vendor prefix). All of the correct CSS variations are:

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
Enter fullscreen mode Exit fullscreen mode 
<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>
Enter fullscreen mode Exit fullscreen mode

Note that it’s a non-standard feature (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 Mozilla Developer Network documentation.

Alternative Answer:

In most browsers, this can be achieved using proprietary variations on the CSS user-select property, originally proposed and then abandoned in CSS 3 and now proposed in CSS UI Level 4:

*.unselectable {
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in Internet Explorer 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}
Enter fullscreen mode Exit fullscreen mode

For Internet Explorer < 10 and Opera < 15, you will need to use the unselectable attribute of the element you wish to be unselectable. You can set this using an attribute in HTML:

<div id="foo" unselectable="on" class="unselectable">...</div>
Enter fullscreen mode Exit fullscreen mode

Sadly this property isn’t inherited, meaning you have to put an attribute in the start tag of every element inside the <div>. If this is a problem, you could instead use JavaScript to do this recursively for an element’s descendants:

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));
Enter fullscreen mode Exit fullscreen mode

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 mousedown event handler that sets unselectable on the target of the event. See http://jsbin.com/yagekiji/1 for details. This still doesn’t cover all possibilities. 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 <div> within another <div> using CSS?

Answer:

You can apply this CSS to the inner <div>:

#inner {
  width: 50%;
  margin: 0 auto;
}
Enter fullscreen mode Exit fullscreen mode

Of course, you don’t have to set the width to 50%. Any width less than the containing <div> will work. The margin: 0 auto is what does the actual centering. If you are targeting Internet Explorer 8 (and later), it might be better to have this instead:

#inner {
  display: table;
  margin: 0 auto;
}
Enter fullscreen mode Exit fullscreen mode

It will make the inner element center horizontally and it works without setting a specific width. Working example here:

#inner {
  display: table;
  margin: 0 auto;
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
}
Enter fullscreen mode Exit fullscreen mode 
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
Enter fullscreen mode Exit fullscreen mode

Alternative Answer:

If you don’t want to set a fixed width on the inner div you could do something like this:

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}
Enter fullscreen mode Exit fullscreen mode 
<div id="outer">  
    <div id="inner">Foo foo</div>
</div>
Enter fullscreen mode Exit fullscreen mode

That makes the inner div into an inline element that can be centered with text-align.

3. 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: :-moz-placeholder (one colon). [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 placeholder attribute at all, while Opera 12 and lower do not support 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 Shadow DOM. A padding on an input will not get the same background color as the pseudo-element. CSS selectors User agents are required to ignore a rule with an unknown selector. See Selectors Level 3:

a group of selectors containing an invalid selector is invalid.

So we need separate rules for each browser. Otherwise, the whole group would be ignored by all browsers.

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #909;
}

::placeholder { /* Most modern browsers support this now. */
   color:    #909;
}
Enter fullscreen mode Exit fullscreen mode 
<input placeholder="Stack Snippets are awesome!">
Enter fullscreen mode Exit fullscreen mode

Usage notes

  • Be careful to avoid bad contrasts. Firefox’s placeholder appears to be defaulting with reduced opacity, so need to use opacity: 1 here.
  • Note that placeholder text is just cut off if it doesn’t fit – size your input elements in em and test them with big minimum font size settings. Don’t forget translations: some languages need more room for the same word.
  • Browsers with HTML support for placeholder but without CSS support for that (like Opera) should be tested too.
  • Some browsers use additional default CSS for some input types (email, search). These might affect the rendering in unexpected ways. Use the properties -webkit-appearance and -moz-appearance to change that. Example: 
[type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }
Enter fullscreen mode Exit fullscreen mode

Alternative Answer:

/* do not group these rules */
*::-webkit-input-placeholder {
    color: red;
}
*:-moz-placeholder {
    /* FF 4-18 */
    color: red;
    opacity: 1;
}
*::-moz-placeholder {
    /* FF 19+ */
    color: red;
    opacity: 1;
}
*:-ms-input-placeholder {
    /* IE 10+ */
    color: red;
}
*::-ms-input-placeholder {
    /* Microsoft Edge */
    color: red;
}
*::placeholder {
    /* modern browser */
    color: red;
}
Enter fullscreen mode Exit fullscreen mode 
<input placeholder="hello"/> <br />
<textarea placeholder="hello"></textarea>
Enter fullscreen mode Exit fullscreen mode

This will style all input and textarea placeholders.

Important Note: Do not group these rules. Instead, make a separate rule for every selector (one invalid selector in a group makes the whole group invalid).

4. Set cellpadding and cellspacing in CSS?

Answer:

For controlling “cellpadding” in CSS, you can simply use padding on table cells. E.g. for 10px of “cellpadding”:

td { 
    padding: 10px;
}
Enter fullscreen mode Exit fullscreen mode

For “cellspacing”, you can apply the border-spacing CSS property to your table. E.g. for 10px of “cellspacing”:

table { 
    border-spacing: 10px;
    border-collapse: separate;
}
Enter fullscreen mode Exit fullscreen mode

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 border-collapse property, which merges the borders of adjoining table cells. If you’re trying to eliminate cellspacing (that is, cellspacing="0") then border-collapse:collapse should have the same effect: no space between table cells. This support is buggy, though, as it does not override an existing cellspacing HTML attribute on the table element.

In short: for non-Internet Explorer 5-7 browsers, border-spacing 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 border-collapse:collapse.

table { 
    border-spacing: 0;
    border-collapse: collapse;
}
Enter fullscreen mode Exit fullscreen mode

Note: For a great overview of CSS properties that one can apply to tables and for which browsers, see this fantastic Quirksmode page.

5. Is there a CSS parent selector?

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:

That said, the Selectors Level 4 Working Draft includes a :has() pseudo-class that will provide this capability. It will be similar to the jQuery implementation.

li:has(> a.active) { /* styles to apply to the li tag */ }
Enter fullscreen mode Exit fullscreen mode

However, as of May 2020, this is still not supported by any browser. In the meantime, you’ll have to resort to JavaScript if you need to select a parent element.

Alternative Answer:

You can use this script:

*! > input[type=text] { background: #000; }
Enter fullscreen mode Exit fullscreen mode

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; }
Enter fullscreen mode Exit fullscreen mode

Or select it when it’s active:

.input-wrap! > input[type=text]:focus { background: #000; }
Enter fullscreen mode Exit fullscreen mode

Check out this HTML:

<div class="input-wrap">
    <input type="text" class="Name"/>
    <span class="help hide">Your name sir</span>
</div>
Enter fullscreen mode Exit fullscreen mode

You can select that span.help when the input is active and show it:

.input-wrap! .help > input[type=text]:focus { display: block; }
Enter fullscreen mode Exit fullscreen mode

There are many more capabilities; just check out the documentation of the plugin. By the way, it works in Internet Explorer.

6. How to disable the resizable property of a textarea?

Answer:

The following CSS rule disables resizing behavior for textarea elements:

textarea {
  resize: none;
}
Enter fullscreen mode Exit fullscreen mode

To disable it for some (but not all) textareas, there are a couple of options. To disable a specific textarea with the name attribute set to foo (i.e., <textarea name="foo"></textarea>):

textarea[name=foo] {
  resize: none;
}
Enter fullscreen mode Exit fullscreen mode

Or, using an id attribute (i.e., <textarea id="foo"></textarea>):

#foo {
  resize: none;
}
Enter fullscreen mode Exit fullscreen mode

The W3C page lists possible values for resizing restrictions: none, both, horizontal, vertical, and inherit:

textarea {
  resize: vertical; /* user can resize vertically, but width is fixed */
}
Enter fullscreen mode Exit fullscreen mode

Review a decent compatibility page to see what browsers currently support this feature. The dimensions can be further restrained in CSS using max-width, max-height, min-width, and min-height.

Note: This property does nothing unless the overflow property is something other than visible, which is the default for most elements. 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 {
    resize: none;
}
Enter fullscreen mode Exit fullscreen mode

7. Is it possible to have a list without bullets?

Answer:

You can remove bullets by setting the list-style-type to none on the CSS for the parent element (typically a <ul>), for example:

ul {
  list-style-type: none;
}
Enter fullscreen mode Exit fullscreen mode

You might also want to add padding: 0 and margin: 0 to that if you want to remove indentation as well. See Listutorial for a great walkthrough of list formatting techniques.

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:

<ul class="unstyled">
   <li>...</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

http://twitter.github.io/bootstrap/base-css.html#typography

Bootstrap 3 and 4:

<ul class="list-unstyled">
   <li>...</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

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 PNG image or use CSS 3:

background-color: rgba(255, 0, 0, 0.5);
Enter fullscreen mode Exit fullscreen mode

Here’s an article from css3.info, Opacity, RGBA and compromise.

<p style="background-color: rgba(255, 0, 0, 0.5);">
  <span>Hello, World!</span>
</p>
Enter fullscreen mode Exit fullscreen mode

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(0, 255, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');
Enter fullscreen mode Exit fullscreen mode

The first hex number defines the alpha value of the color. Full solution for all browsers:

.alpha60 {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0) transparent;
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
Enter fullscreen mode Exit fullscreen mode

This is from CSS background transparency without affecting child elements, through RGBa and filters. This is when using the following code:

<head>
     <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <title>An XHTML 1.0 Strict standard template</title>
     <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style type="text/css" media="all">
         .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*/
         }
     </style>
 </head>

 <body>
     <div class="transparent-background-with-text-and-images-on-top">
         <p>Here some content (text AND images) "on top of the transparent background"</p>
        <img src="http://i.imgur.com/LnnghmF.gif">
     </div>
 </body>
 </html>
Enter fullscreen mode Exit fullscreen mode

9. How to vertically center text with CSS?

Answer:

You can try this basic approach:

div {
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 2px dashed #f69c55;
}
Enter fullscreen mode Exit fullscreen mode 
<div>
  Hello World!
</div>
Enter fullscreen mode Exit fullscreen mode

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 {
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
Enter fullscreen mode Exit fullscreen mode 
<div>
  <span>Hello World!</span>
</div>
Enter fullscreen mode Exit fullscreen mode

The CSS just sizes the <div>, vertically center aligns the <span> by setting the <div>‘s line-height equal to its height, and makes the <span> an inline-block with vertical-align: middle. Then it sets the line-height back to normal for the <span>, so its contents will flow naturally inside the block.

Simulating table display

And here is another option, which may not work on older browsers that don’t support display: table and display: table-cell (basically just Internet Explorer 7). Using CSS we simulate table behavior (since tables support vertical alignment), and the HTML is the same as the second example:

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}
Enter fullscreen mode Exit fullscreen mode 
<div>
  <span>Hello World!</span>
</div>
Enter fullscreen mode Exit fullscreen mode

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 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  width: 100%;
  border: 2px dashed #f69c55;
}
Enter fullscreen mode Exit fullscreen mode 
<div>
  <span>Hello World!</span>
</div>
Enter fullscreen mode Exit fullscreen mode

Alternative Answer:

Another way is with Flexbox. Just add the following code to the container element:

display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
Enter fullscreen mode Exit fullscreen mode

Flexbox demo 1

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */
}
Enter fullscreen mode Exit fullscreen mode 
<div class="box">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
</div>
Enter fullscreen mode Exit fullscreen mode

Alternatively, instead of aligning the content via the container, the flexbox can also center the flex item with an auto margin when there is only one flex-item in the flex container. So to center the flex item both horizontally and vertically just set it with margin:auto

Flexbox Demo 2

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
}
.box span {
  margin: auto;
}
Enter fullscreen mode Exit fullscreen mode 
<div class="box">
  <span>margin:auto on a flex item centers it both horizontally and vertically</span> 
</div>
Enter fullscreen mode Exit fullscreen mode

All the above applies to centering items while laying them out in horizontal rows. This is also the default behavior because by default the value for flex-direction is row. If, however, flex-items need to be laid out in vertical columns, then flex-direction: column should be set on the container to set the main-axis as column and additionally the justify-content and align-items properties now work the other way around with justify-content: center centering vertically and align-items: center centering horizontally) flex-direction: column demo

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 18px;
  font-style: oblique;
  color: #FFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* vertically aligns items */
  align-items: center;
  /* horizontally aligns items */
}
p {
  margin: 5px;
  }
Enter fullscreen mode Exit fullscreen mode 
<div class="box">
  <p>
    When flex-direction is column...
  </p>
  <p>
    "justify-content: center" - vertically aligns
  </p>
  <p>
    "align-items: center" - horizontally aligns
  </p>
</div>
Enter fullscreen mode Exit fullscreen mode

A good place to start with Flexbox to see some of its features and get syntax for maximum browser support is flexyboxes. Also, browser support nowadays is very good: caniuse For cross-browser compatibility for display: flex and align-items, you can use the following:

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;
Enter fullscreen mode Exit fullscreen mode

10. How to transition height: 0; to height: auto; using CSS?

Answer:

Use max-height in the transition and not height. And set a value on max-height to something bigger than your box will ever get. See JSFiddle demo.

#menu #list {
    max-height: 0;
    transition: max-height 0.15s ease-out;
    overflow: hidden;
    background: #d5d5d5;
}

#menu:hover #list {
    max-height: 500px;
    transition: max-height 0.25s ease-in;
}
Enter fullscreen mode Exit fullscreen mode 
<div id="menu">
    <a>hover me</a>
    <ul id="list">
        <!-- Create a bunch, or not a bunch, of li's to see the timing. -->
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>
Enter fullscreen mode Exit fullscreen mode

11. Transitions on the CSS display property?

Answer:

You can concatenate two transitions or more and visibility is what comes handy this time.

div {
  border: 1px solid #eee;
}
div > ul {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
  visibility: visible;
  opacity: 1;
}
Enter fullscreen mode Exit fullscreen mode 
<div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>
Enter fullscreen mode Exit fullscreen mode

(Don’t forget the vendor prefixes to the transition property.)

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 <div>s absolutely and setting the hidden one to opacity: 0. If you even toggle the display property from none to block, your transition on other elements will not occur. To work around this, always allow the element to be display: block, but hide the element by adjusting any of these means:

  • Set the height to 0.
  • Set the opacity to 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 {
    display: none;
    transition: opacity 1s ease-out;
    opacity: 0;
}
div.active {
    opacity: 1;
    display: block;
}
Enter fullscreen mode Exit fullscreen mode

But that will not work. Because of this, you will always need to keep the element display: block, but you could get around it by doing something like this:

div {
    transition: opacity 1s ease-out;
    opacity: 0;
    height: 0;
    overflow: hidden;
}
div.active {
    opacity: 1;
    height: auto;
}
Enter fullscreen mode Exit fullscreen mode

In Conclusion

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.

We, at Truemark, provide services like web and mobile app development, digital marketing, and website development. So, if you need any help and want to work with us, please feel free to contact us.

Hope this article helped you.

Original Source: DevPostbyTruemark

Top comments (0)

Read next

toychicken profile image

Using Hugo Render hooks to make links bend to your will

Leigh Garland -

guivr profile image

TailConverter, a browser extension to convert any website to Tailwind CSS

Guilherme Rizzo -

supminn profile image

Decoding StyleX: Meta's Cutting-Edge Styling System

Supriya M -

dev007777 profile image

This Tailwind CSS Animations will BLOW Your Mind!

TheDev -