Shorthand properties allow us to write multiple properties in a single line and in a compact way. They are useful as they provide clean code and also decrease the LOC (Line of Code). The Shorthand properties we will be covering:
- Background
- Font
- Border
- Outline
- Margin
- Padding
- List
Background: The CSS Background property is used to set the background on a web page. The background can be applied to any element like the body, h1, p, div, etc. There are many properties available with a background such as color, image, position, etc. Some of them are used in the below code.
- Longhand way:
background-color:#000;
background-image: url(https://www.geeksforgeeks.org/images/bg.png);
background-repeat: no-repeat;
background-position:left top;
- Shorthand way:
background:#000 url(https://www.geeksforgeeks.org/images/bg.png) no-repeat left top;
- Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>Document</title>
<style>
body {
background: #000 url(images/bg.png) no-repeat left top;
}
</style>
</head>
<body></body>
</html>
- Output:
Font: The CSS font property is used to apply different fonts to the text on the webpage. The various attributes that can be set using the font are font-family, font-size, font-weight, etc. Some of them are used in the below code.
- Longhand way:
font-style:italic;
font-weight:bold;
font-size:18px;
line-height:150%;
font-family:Arial,sans-serif;
- Shorthand way:
font: italic bold 18px/150% Arial, sans-serif;
- Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>Document</title>
<style>
h1 {
font: italic bold 18px/150% Arial, sans-serif;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
</body>
</html>
- Output:
Border: The CSS border property is used to apply a border to different elements of a web page. There are many attributes of the border like width, style, color, etc.
- Longhand way:
border-width: 1px;
border-style: solid;
border-color: #000;
- Shorthand way:
border: 1px solid #000;
- Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>Document</title>
<style>
h1 {
border: 1px solid #000;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
</body>
</html>
- Output:
Outline: The CSS outline property is used to apply an outline to various elements that are present in a web page.
- Longhand way:
outline-width: 1px;
outline-style: solid;
outline-color: #000;
- Shorthand way:
outline: 1px solid #000;
- Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>Document</title>
<style>
h1 {
outline: 10px solid #000;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
</body>
</html>
- Output:
Margin: The CSS margin properties are used to create space around elements, outside of any defined borders. We can define margin for all 4 sides i.e. top, bottom, left and right.
- Longhand way:
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left :5px;
- Shorthand way:
margin : 10px 5px 10px 5px;
- Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>Document</title>
<style>
h1 {
margin: 100px 50px 100px 50px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
</body>
</html>
- Output:
Padding: The CSS padding properties are used to generate space around an element's content, inside of any defined borders. Padding can also be applied as top, bottom, left and right padding.
- Longhand way:
padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
padding-left :5px;
- Shorthand way:
padding : 10px 5px 10px 5px;
- Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>Document</title>
<style>
h1 {
padding: 100px 50px 100px 50px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
</body>
</html>
- Output:
Margin and Padding accept two and three values also in shorthand form, for example:
margin: 50px 75px; // here, top-bottom margin is 50px and right-left margin is 75px, same is true for padding also.
margin: 50px 35px 75px; // here, top margin is 50px right-left margin is 35px and bottom margin is 75px, same is true for padding also.
It applies in clock-wise direction starting from top right bottom left.
List: There are mainly two types of list in CSS: 1. Ordered list<ol> 2. Unordered list <ul> UnOrdered lists have bullet points while ordered lists have numbers.
- Longhand way:
list-style-type: disc;
list-style-position: inside;
list-style-image: url(https://www.geeksforgeeks.org/disc.png);
- Shorthand way:
list-style: disc inside url(https://www.geeksforgeeks.org/disc.png);
- Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>Document</title>
<style>
li {
list-style: disc inside url(assets/hole.png);
}
</style>
</head>
<body>
<li>GeeksforGeeks</li>
</body>
</html>
- Output:
