It would depend on the browser&#39;s default stylesheet. You can view an (unofficial) table of CSS2.1 User Agent stylesheet defaults [here][1].

Based on the page listed above, the default sizes look something like this:

        IE7		IE8		FF2			FF3			Opera	Safari 3.1
    H1  24pt	2em		32px		32px		32px	32px	   
    H2  18pt	1.5em	24px		24px		24px	24px
    H3  13.55pt	1.17em	18.7333px	18.7167px	18px	19px
    H4  n/a		n/a		n/a			n/a			n/a		n/a
    H5  10pt	0.83em	13.2667px	13.2833px	13px	13px
    H6  7.55pt	0.67em	10.7333px	10.7167px	10px	11px


Nowadays, all modern browsers have the [same values as defaults](https://stackoverflow.com/a/70720104/214446).



  [1]: http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm
  [2]: http://www.w3.org/TR/CSS21/sample.html

Headings are normally bold-faced; that has been turned off for this demonstration of size correspondence. MSIE and Opera interpret these sizes the same, but note that Gecko browsers and Chrome interpret Heading 6 as 11 pixels instead of 10 pixels/font size 1, and Heading 3 as 19 pixels instead of 18 pixels/font size 4 (though it&#39;s difficult to tell the difference even in a direct comparison and impossible in use). It seems Gecko also limits text to no smaller than 10 pixels.

I have the following code:

    &lt;div style=&quot;float: left; width: 100%;&quot;&gt;
      &lt;label style=&quot;float: left;&quot;&gt;ABC&lt;/label&gt;  
      &lt;input style=&quot;float: left; font-size: 0.5em;&quot; type=&quot;button&quot;   onclick=&quot;addTiny(0,&#39;Question_Text&#39;); return false;&quot; value=&quot;&amp;#x25BC;&quot; title=&quot;Editor&quot; /&gt;   
      &lt;input style=&quot;float: left; font-size: 0.5em;&quot; type=&quot;button&quot; onclick=&quot;remTiny(0,&#39;Question_Text&#39;); return false;&quot; value=&quot;&amp;#x25B2;&quot; title=&quot;Hide&quot; /&gt;   
    
      &lt;div class=&quot;adm&quot;&gt;
        &lt;textarea rows=&quot;2;&quot; style=&quot;width: 100%&quot; class=&quot;text-box multi-line mceEditor&quot;&gt;
          abc
        &lt;/textarea&gt;
      &lt;/div&gt;
    &lt;/div&gt;

My problem is that the div with class adm floats to the left and so goes on the same line as the label and two input buttons. Is there a way that I can make this shift away from floating?

How can I stop float left?

Here&#39;s my history for the folder &#39;somefolder&#39;

    $ git log somefolder
    
    commit 89cd
    More changes to somefolder
    
    commit ef47a
    Updating somefolder and other stuff
    
    commit e095
    Bugs fixed in somefolder

I want to revert somefolder back to the &#39;Bugs fixed in some folder&quot; commit.

Since the second commit involved changes outside of somefolder, I don&#39;t want to revert this commit. 

I guess the safest way would be to create a diff/patch between commit e095 and 89cd that applies just to some folder, and then apply that patch. How can I do that?


How to revert a folder to a particular commit by creating a patch

I&#39;ve always been unsure of where to start as a general best practice baseline. Yes, I know it depends on your design, but what&#39;s most common?

Here&#39;s what I currently have as a starter:


    h1 { font-size: 24px;}
    h2 { font-size: 22px;}
    h3 { font-size: 18px;}
    h4 { font-size: 16px;}
    h5 { font-size: 12px;}
    h6 { font-size: 10px;}


Yes, we don&#39;t use EMs at my current job.

What are the most common font-sizes for H1-H6 tags

I've always been unsure of where to start as a general best practice baseline. Yes, I know it depends on your design, but what's most common?
Here's what I currently have as a starter:
<pre><code class="hljs language-css">h1 { font-size: 24px;}
h2 { font-size: 22px;}
h3 { font-size: 18px;}
h4 { font-size: 16px;}
h5 { font-size: 12px;}
h6 { font-size: 10px;}
</code></pre>
Yes, we don't use EMs at my current job.

I would like a textarea that handles a situation of pressing *tab* key.

In default case if you press a *tab* key then focus leaves the textarea. But what about the situation when user wants to type *tab* key in textarea?

Can I catch this event and return focus to the textarea and add a tab to a *current* cursor position?

How to handle &lt;tab&gt; in textarea?

I am using [lxml.html][1] to generate some HTML. I want to pretty print (with indentation) my final result into an html file. How do I do that?

This is what I have tried and got till now
    

    import lxml.html as lh
    from lxml.html import builder as E
    sliderRoot=lh.Element(&quot;div&quot;, E.CLASS(&quot;scroll&quot;), style=&quot;overflow-x: hidden; overflow-y: hidden;&quot;)
    scrollContainer=lh.Element(&quot;div&quot;, E.CLASS(&quot;scrollContainer&quot;), style=&quot;width: 4340px;&quot;)
    sliderRoot.append(scrollContainer)
    print lh.tostring(sliderRoot, pretty_print = True, method=&quot;html&quot;)

As you can see I am using the `pretty_print=True` attribute. I thought that would give indented code, but it doesn&#39;t really help. This is the output :

`&lt;div style=&quot;overflow-x: hidden; overflow-y: hidden;&quot; class=&quot;scroll&quot;&gt;&lt;div style=&quot;width: 4340px;&quot; class=&quot;scrollContainer&quot;&gt;&lt;/div&gt;&lt;/div&gt;`


  [1]: http://lxml.de/lxmlhtml.html

How to Pretty Print HTML to a file, with indentation

I am looking for a Javascript autocomplete implementation which includes the following:

* Can be used in a HTML textarea
* Allows for typing regular text without invoking autocomplete
* Detects the `@` character and starts autocomplete when it is typed
* Loads list of options through AJAX

I believe that this is similar to what Twitter is doing when tagging in a tweet, but I can&#39;t find a nice, reusable implementation.  
A solution with jQuery would be perfect.

Thanks.

Twitter-style autocomplete in textarea

How does the Google Analytics Site Speed feature, `_gaq.push([&#39;_trackPageLoadTime&#39;])`, work? Is there any documentation about how it works?

How does _gaq.push([&#39;_trackPageLoadTime&#39;]) work?

This seems trivial but after all the research and coding I can&#39;t get it to work. Conditions are:

1. The browser window size is unknown. So please don&#39;t propose a solution involving absolute pixel sizes.
2. The image&#39;s original dimensions are unknown, and may or may not already fit the browser window.
3. The image is vertically and horizontally centered.
4. The image proportions must be conserved.
5. The image must be displayed in its entirety in the window (no cropping.)
6. I do not wish scrollbars to appear (and they shouldn&#39;t if the image fits.)
7. The image automatically resizes when the window dimensions change, to occupy all the available space without being larger than its original size.

Basically what I want is this:

    .fit {
      max-width: 99%;
      max-height: 99%;
    }
    &lt;img class=&quot;fit&quot; src=&quot;pic.png&quot;&gt;

The problem with the code above is that it doesn&#39;t work: the pic takes all the vertical space it needs by adding a vertical scroll bar. 

At my disposal is PHP, Javascript, JQuery but I&#39;d kill for a CSS-only solution. I don&#39;t care if it doesn&#39;t work in IE.


How to resize an image to fit in the browser window?

The &lt;a href=&quot;http://www.w3.org/TR/css3-selectors/#the-user-action-pseudo-classes-hover-act&quot;&gt; &lt;b&gt;CSS3 doc&lt;/b&gt;&lt;/a&gt; talks about :hover and :focus, which seem exactly the same to me. What are the differences between the two? What am I not seeing?

Thanks!

Differences between CSS3 :hover and :focus?

I want to customize a scrollbar with CSS.

I use this WebKit CSS code, which works well for Safari and Chrome:

```lang-css
::-webkit-scrollbar {
  width: 15px;
  height: 15px;
}

::-webkit-scrollbar-track-piece {
  background-color: #c2d2e4;
}

::-webkit-scrollbar-thumb:vertical {
  height: 30px;
  background-color: #0a4c95;
}
```

How can I do the same thing in Firefox?

I know I can easily do it using jQuery, but I would prefer to do it with pure CSS if it&#39;s doable.

Custom CSS Scrollbar for Firefox

When I specify `overflow-x: hidden` on an element which overflows both horizontally and vertically, the element gets a vertical scroll bar in addition to hiding the horizontally overflowing content. I have tried adding `overflow-y: visible` and even just `overflow: visible`, to no effect.

Am I misunderstanding what these properties do? I would think that `overflow-x` should not affect the vertical overflow at all.

This has happened on every browser I&#39;ve tried.

Here&#39;s a snippet which demonstrates the effect. I&#39;m using `&lt;pre&gt;` tags because they&#39;re an easy way to create overflowing content, but it seems to happen with any tag.

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    pre {
      height: 40px;
      width: 150px;
      margin-bottom: 50px; /* We need this so they don&#39;t overlap. */
    }

    #x-hidden {
      overflow-x: hidden;
    }

    #y-visible {
      overflow-x: hidden;
      overflow-y: visible;
    }

    #visible {
      overflow: visible;
      overflow-x: hidden;
    }

&lt;!-- language: lang-html --&gt;

    &lt;pre&gt;
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
      Integer mollis quis magna quis vulputate.
      Cras aliquet convallis efficitur.
    &lt;/pre&gt;

    &lt;pre id=&quot;x-hidden&quot;&gt;
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
      Integer mollis quis magna quis vulputate.
      Cras aliquet convallis efficitur.
    &lt;/pre&gt;

    &lt;pre id=&quot;y-visible&quot;&gt;
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
      Integer mollis quis magna quis vulputate.
      Cras aliquet convallis efficitur.
    &lt;/pre&gt;

    &lt;pre id=&quot;visible&quot;&gt;
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
      Integer mollis quis magna quis vulputate.
      Cras aliquet convallis efficitur.
    &lt;/pre&gt;

&lt;!-- end snippet --&gt;

The [W3C spec][1] says:

&gt; The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’.

But this makes no mention of the case when `overflow-x` or `overflow-y` is set to `hidden`, which to me implies that this combination is indeed meant to be possible.


  [1]: https://www.w3.org/TR/css3-box/#overflow-x

Setting overflow-x: hidden adds a vertical scrollbar

Is there any way to implement a callback function in case of css3 animation? In case of Javascript animation its possible but not finding any way to do it in css3.

One way I could see is to execute callback after the animation duration but that doesn&#39;t make sure that it will always be called right after the animation ends. It will depend on the browser UI queue. I want a more robust method. Any clue?

Content Type	Original Author	Original Content on Stackoverflow
Question	rsturim	View Question on Stackoverflow
Solution 1 - Html	Donut	View Answer on Stackoverflow
Solution 2 - Html	Sujit Agarwal	View Answer on Stackoverflow

What are the most common font-sizes for H1-H6 tags

Html Problem Overview

Html Solutions

Solution 1 - Html

Solution 2 - Html

How to revert a folder to a particular commit by creating a patch

How can I stop float left?

Attributions