/ (forward slash) in css style declarations

Question

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?

@SvenBieder What would you suggest to google? I googled 'forward slash in css' and this question was first on google. — Eric Francis, Oct 05 '15 at 19:04
@EricFrancis While the question was clearly asked and answered before, it is expressed more clearly here. Webnet's earlier question is not badly written. It is narrowly written, and so omits several terms and phrases that have allowed this question to rank more highly--or at all--in search results. A Google search circa 2017 confirms that we are better off with Peeyush having asked this question. — Christopher Harwood, Mar 24 '17 at 13:22
It's alright, that's how SO's system is designed. They don't close off duplicates for exactly this reason, so that different ways in which the same question can be asked can point to the correct answer — Peeyush Kushwaha, Mar 24 '17 at 13:37

score 20 · Accepted Answer · edited May 17 '20 at 17:50

20

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.

edited May 17 '20 at 17:50

hb20007

answered Nov 16 '12 at 12:46

Mr. Alien

Any specification? – Константин Ван Aug 22 '19 at 16:26
@КонстантинВан Check [`line-height`](https://developer.mozilla.org/en-US/docs/Web/CSS/font#Syntax) point here – Mr. Alien Aug 22 '19 at 17:19

score 1 · Answer 2 · answered Nov 16 '12 at 12:46

1

It's shorthand for font-size: 12px; line-height: 18px.

answered Nov 16 '12 at 12:46

Ulrich Schwarz

score -1 · Answer 3 · answered Nov 16 '12 at 12:48

-1

Its a short cut for setting 2 css properties and does the same as the following:

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

answered Nov 16 '12 at 12:48

Adam

3 Answers3