What the dot before a value means in CSS?

Question

I was looking at the Angular 2 tutorial and this detail in the CSS caught my attention.

What does the dot in ".1em" means or do?

.heroes li:hover {
    color: #607D8B;
    background-color: #DDD;
    left: .1em;
  }

0.1 em? It's a float value. – Mr. Alien Jan 04 '17 at 06:50 — Mr. Alien, Jan 04 '17 at 06:50
It's just a number, the same as `0.1em`. – T.J. Crowder Jan 04 '17 at 06:51 — T.J. Crowder, Jan 04 '17 at 06:51

score 6 · Accepted Answer · edited Aug 23 '18 at 15:06

6

It's short-hand for 0.1em, ie. one tenth of an em. In other words, you are not limited to whole numbers (integers).

This isn't quite as useless as it seems. CSS minimizers are becoming common and would reduce this code to

.heroes li:hover {color:#607D8B;background-color:#DDD;left:.1em;}

The leading zero before .1 is just another byte that can go away.

edited Aug 23 '18 at 15:06

Joshua

answered Jan 04 '17 at 06:51

dave

1

@Luke Briggs: Why? The question is quite clearly not about the class selector. It even says "value" in the title. – BoltClock Jan 04 '17 at 06:58
Specifically: https://www.w3.org/TR/css-values-3/#font-relative-lengths – steveax Jan 04 '17 at 07:01
@BoltClock A CSS newbie asking this kind of question probably doesn't know the difference between a selector and a value. Considering how short this answer is, it seems worthwhile to add e.g. "`.heroes` is a [class selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors)" – Luke Briggs Jan 04 '17 at 07:03
@Luke Briggs: OK, that's a fair point. I just thought mentioning the class selector with no context seemed out of place. – BoltClock Jan 04 '17 at 08:11

score 0 · Answer 2 · answered Jan 04 '17 at 06:54

0

it mean 0.1em but some people wrote it like .1em, it is short cut, like you used in Maths.

answered Jan 04 '17 at 06:54

DigitalPixels.CO

score 0 · Answer 3 · answered Jan 04 '17 at 06:57

0

EM is a value relative to the font-size of the element.

.1em is 10% of 1em

With no css: 1em == 16px

If the font size changes, 1em = new font-size value.

answered Jan 04 '17 at 06:57

Jeff Block

score -1 · Answer 4 · answered Jan 04 '17 at 07:23

-1

The dot actually means 0. and CSS put the number after the dot as a decimal of 1. E.g. .1 = 0.1 or .3s = 0.3s

So, the two blocks below act the same:

div {
    transition: all .3s;
}

div {
    transition: all 0.3s;
}

Which results 300 milliseconds or 0.3 second.

answered Jan 04 '17 at 07:23

Arashtad

The answer in general is correct, but you should nearly never transition "all" and use specific transitions instead, so I consider this as a "bad" example. https://stackoverflow.com/questions/8947441/css3-transitions-is-transition-all-slower-than-transition-x – Manuel May 02 '19 at 17:52

4 Answers4