CSS | Shorthand Properties
Last Updated :
28 Apr, 2025
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.
html
background-color:#000;
background-image: url(images/bg.png);
background-repeat: no-repeat;
background-position:left top;
background:#000 url(images/bg.png) no-repeat left top;
<!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.
html
font-style:italic;
font-weight:bold;
font-size:18px;
line-height:150%;
font-family:Arial,sans-serif;
font: italic bold 18px/150% Arial, sans-serif;
<!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.
html
border-width: 1px;
border-style: solid;
border-color: #000;
<!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.
html
outline-width: 1px;
outline-style: solid;
outline-color: #000;
<!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.
html
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left :5px;
margin : 10px 5px 10px 5px;
<!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.
html
padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
padding-left :5px;
padding : 10px 5px 10px 5px;
<!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.
html
list-style-type: disc;
list-style-position: inside;
list-style-image: url(disc.png);
list-style: disc inside url(disc.png);
<!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:
Similar Reads
SVG Properties In CSS
SVGs are XML-based vector images that are widely used on the web. It is not made of pixels. SVGs are composed of paths defined by mathematical equations. This allows them to scale infinitely without losing quality.We will learn What are SVG properties in CSS and how to work with SVG properties in CS
6 min read
CSS width Property
The width property in CSS is used to set the width of elements such as text and images. It can be specified in various units, including pixels (px), percentages (%), and centimeters (cm). This property defines the width of the content area, excluding padding, borders, and margins. The width property
3 min read
CSS word-spacing Property
The word-spacing property adjusts the white space between words, increasing or decreasing. This CSS property can be set to normal or a specific length (positive or negative), improving readability and text formatting.Syntaxword-spacing: normal|length|initial|inherit;Property valuesNormalDefines the
2 min read
What are CSS Custom Properties ?
In this article, we will learn about CSS custom properties & their implementation. CSS custom properties are also referred to as CSS variables or cascading variables. These entities contain specific values that will be reused in the entire document & can be accessed using the var() function
4 min read
Transition shorthand with multiple properties in CSS?
The transition shorthand in CSS allows specifying multiple properties for smooth transitions between different states or values. The transition property in CSS is used to create transitions in an element, enabling changes to occur smoothly over a specified duration. This article demonstrates how to
2 min read
How to apply CSS Padding Shorthand Property ?
Padding is the space between the element and its border. The shorthand property of padding sets the padding area in all four sides of the element. The padding value can be in px, em, rem or %. If we want to apply padding on a specific side we can use the following properties: padding-left: Sets padd
2 min read
CSS white-space Property
The white-space property in CSS is used to control text wrapping and white-space handling within elements. It allows developers to specify how whitespace inside an element is managed, impacting the layout and readability of the content. Several values can be used with this property to achieve differ
7 min read
CSS min-width Property
The min-width property in CSS is used to define the minimum width of an element. The value of the width cannot be less than the value of the min-width. If the content specified within the element is smaller, min-width maintains the specified minimum width. Syntax:min-width: length|initial|inherit;Pr
3 min read
CSS Properties Complete Reference
CSS properties are the foundation of web design, used to style and control the behaviour of HTML elements. They define how elements look and interact on a webpage.Used to control layout, colors, fonts, spacing, and animations on web pages.It is essential for making web pages responsive and accessibl
11 min read
What are CSS Preprocessors?
CSS preprocessors are used to write styles in a special syntax that is then compiled into standard CSS. They extend the functionality of standard CSS by introducing features like variables, nesting, mixins, and functions. By using preprocessors, you can take advantage of advanced features that are n
3 min read