/ (Forward Slash) in CSS Style Declarations

/ (forward slash) in css style declarations

It simply means font-size and line-height

font: 12px/18px /*12px font-size and 18px line-height*/

That's a short-hand notation...There are many more in CSS which you can use, for example

margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;

Can be simply written as

margin: 10px 20px 30px 40px
         ^----^----^----^
       Top/Right/Bottom/Left

Or say for example this

border-width: 1px;
border-style:solid;
border-color: #ff0000;

Can be written as

border: 1px solid #f0000;

Here's a cool list of CSS shorthand.

What does the forward slash mean in the CSS font shorthand?

12px is the font size, 18px is the line height.

The syntax is based on typographical notation for specifying the respective sizes, and is only applicable to the font shorthand property. In other words, the above declaration simply expands to the following:

font-size: 12px;
line-height: 18px;

As always, if you set the line height to a relative value (e.g. percentage or ems), it's calculated relative to the font size.

W3C CSS2.1 font property reference

W3C CSS3 Fonts Module font property reference (the syntax carries over from CSS2.1)

Style for a slash

Using Skew Transforms

This approach makes use of the following:

• A pseudo-element with transform: skew(-45deg) whose border-left produces a line that resembles a slash character.
• Absolute positioning of the two span that contain the numbers. The numerator like span is positioned with respect to top left whereas the denominator like span is positioned with respect to bottom right.

One potential drawback of this approach is the browser support if you want to support IE8 and lower.

.box {  position: relative;  height: 150px;  width: 150px;}.top, .bottom {  position: absolute;  font-weight: bold;}.top{  top: 0px;  left: 0px;  font-size: 100px;}.bottom {  bottom: 0px;  right: 0px;  font-size: 25px;}.box:after {  position: absolute;  content: '';  bottom: 0px;  right: 0px;  height: 60%;  width: 0%;  border-left: 1px solid;  transform: skew(-45deg);  transform-origin: top left;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script><div class="box">  <span class="top">41</span>  <span class="bottom">50</span></div>

Backslash in CSS padding shorthand declaration

"Backslash zero" is a css hack targeting IE8 for the current rule. This can be a terrible thing to do, unless there is no other choices. What happens is that IE8 will erroneously believe that this is a valid rule to be applied while other browsers won't, leaving you with a chaos rule:

.my-dirty-rule-for-ie-8-only { margin-bottom: 5px\0; }

For this ruleset, that means the second padding will take effect by overriding the first one only if the user displays your page with IE8.

From a developper point of view, css hacks should be avoided at all cost. You seriously never want to deal with rules targeting a specific browser, as it will haunt you forever from the moment you fall for it.

---

Related Topics