Skip to content
Related Articles

Related Articles

CSS | Shorthand Properties

View Discussion
Improve Article
Save Article
  • Last Updated : 07 Jun, 2022
View Discussion
Improve Article
Save Article

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:

  1. Background
  2. Font
  3. Border
  4. Outline
  5. Margin
  6. Padding
  7. 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: 

html




background-color:#000;
background-image: url(images/bg.png);
background-repeat: no-repeat;
background-position:left top;

  • Shorthand way: 

html




background:#000 url(images/bg.png) no-repeat left top;

  • Example: 

html




<!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: 

html




font-style:italic;
font-weight:bold;
font-size:18px;
line-height:150%;
font-family:Arial,sans-serif;

  • Shorthand way: 

html




font: italic bold 18px/150% Arial, sans-serif;

  • Example: 

html




<!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: 

html




border-width: 1px;
border-style: solid;
border-color: #000;

  • Shorthand way: 

html




border: 1px solid #000;

  • Example: 

html




<!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: 

html




outline-width: 1px;
outline-style: solid;
outline-color: #000;

  • Shorthand way: 

html




outline: 1px solid #000;

  • Example: 

html




<!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: 

html




margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left :5px;

  • Shorthand way: 

html




margin : 10px 5px 10px 5px;

  • Example: 

html




<!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: 

html




padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
padding-left :5px;

  • Shorthand way: 

html




padding : 10px 5px 10px 5px;

  • Example: 

html




<!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: 

html




list-style-type: disc;
list-style-position: inside;
list-style-image: url(disc.png);

  • Shorthand way: 

html




list-style: disc inside url(disc.png);

  • Example: 

html




<!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:

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!