Possible Duplicate: What does this CSS font shorthand syntax mean? Recently while checking apple’s

Question

Asked: June 14, 20262026-06-14T09:33:04+00:00 2026-06-14T09:33:04+00:00

Possible Duplicate:
What does this CSS font shorthand syntax mean?

Recently while checking apple’s website’s styling, I came across this CSS rule declaration which I could not understand:

body {
   font: 12px/18px "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif;
}

I could not understand, and thus wanted to know that how does the forward slash in font: 12px/18px actually work?

You must login to add an answer.

Need An Account,

Editorial Team · Answer 1 · 2026-06-14T09:33:05+00:00

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.

The Archive Base Latest Questions