Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css
communitycreator

How to use shorthand rules in CSS

Akande Olalekan Toheeb

Introduction

Shorthand rules help write more readable and concise style sheets, and in less time, than if they were written in their full form.

Using shorthand rules allows us to write code in a single line in CSS that would otherwise have taken three to four lines.

Many properties make use of shorthand rules, Some of them are mentioned below.

Border properties

The border property can be used to set the border-width, border-style, and border-color in just a single line of code instead of in three lines, which would take more time and energy.

Example

The following code is written without shorthand rules.

    Without shorthand rules

    The same properties are now declared using shorthand rules.

      With shorthand rules

      Background properties

      The background property is the shorthand for background-color, background-image, background-repeat and background-position.

      Example

      In the following code, shorthand rules are not used.

        Without shorthand rules

        The properties above can be declared using shorthand rules, as in the following.

          With shorthand rules

          Margin and padding properties

          The margin and padding properties are shorthand properties.

          Example

          The following declarations are written without shorthand rules.

            Without shorthand rules

            The same properties can be declared using shorthand rules, as in the code below. This property follows the “order of the clock”.

              With shorthand rules

              Font properties

              The font property is used as the shorthand rule.

              Example

              The following declarations are written without shorthand rules.

                Without shorthand rules

                The same properties can be declared using shorthand rules, as in the following.

                  With shorthand rule

                  Conclusion

                  Using the shorthand rule can be so much interesting and can make your work easier. I hope you will adopt using it after reading this article.

                  RELATED TAGS

                  css
                  communitycreator

                  CONTRIBUTOR

                  Akande Olalekan Toheeb
                  RELATED COURSES

                  View all Courses

                  Keep Exploring