Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

/ (forward slash) in css style declarations [duplicate]

Tags:

css

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?

like image 742
Peeyush Kushwaha Avatar asked Nov 16 '12 12:11

Peeyush Kushwaha


People also ask

What is forward slash in CSS?

The forward slash is required syntax for separating background position values and background size values. This is to eliminate misinterpretation of the values specified. If you're going to specify both, then background-position has to come first, then the forward slash, then the background-size.

What is double slash in HTML?

The "two forward slashes" are a common shorthand for "request the referenced resource using whatever protocol is being used to load the current page".

What does forward slash mean in a URL?

Forward Slash Forward slashes are very common on the web. We use them in URLs for websites. Behind the scenes, they indicate a folder. We also use forward slashes in HTML. In fact, you've already seen them.

How do you do a backslash in CSS?

In CSS 2.1, a backslash (\) character can indicate one of three types of character escape. Inside a CSS comment, a backslash stands for itself, and if a backslash is immediately followed by the end of the style sheet, it also stands for itself (i.e., a DELIM token).


1 Answers

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.

like image 84
Mr. Alien Avatar answered Oct 07 '22 01:10

Mr. Alien