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?
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.
The "two forward slashes" are a common shorthand for "request the referenced resource using whatever protocol is being used to load the current page".
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.
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).
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With