Skip to content
Related Articles

Related Articles

Improve Article

CSS | Shorthand Properties

  • Last Updated : 27 Apr, 2020

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:




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




    background:#000 url(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:

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(disc.png);
  • Shorthand way:




    list-style: disc inside url(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:



My Personal Notes arrow_drop_up
Recommended Articles
Page :