por CSS has a wide spectrum of tools and properties that will be of great help when designing your website. In this post you will be able to find out what shorthand properties are in CSS, how to use them and why they will be very useful when creating your page..
Shorthand in CSS is a series of properties that allow you to simultaneously set values of multiple properties different. This represents an advantage in several aspects since, first of all, you will make your style sheets much easier to read, because they will be more concise, and second, you will considerably reduce the weight of your leaves, since shorthand properties in CSS are a reduced way of writing the desired properties along with their specifications.
How to use Shorthand properties?
Getting started writing Shorthand properties in CSS is really easy. You have to keep in mind that each value must be separated by spaces. Remember this example: the property border is the shorthand for properties border-style, border-color and border-width. If you wanted to use this property in Shorthand, you could write something like this: border: 3px solid green. In this way, you will be specifying a 3 pixel border and a solid green color.
In addition to border, There are 7 properties that have their Shorthand variation in CSS: transition, flex, font, animation, padding, background and margin. However, keep in mind that in the CSS 2.1. you will not find the properties flex, transition neither animationand you can make use of the list-style. Let’s look specifically at each of them.
Transition Shorthand in CSS
The transition property will be Shorthand in CSS for the following properties:
transition-property – Determines the name of the CSS property for which the transition effect will be assigned. transition-duration – Determines the amount of time the transition effect will take to complete. transition-timing-function – Determines the timing of the transition. effect transition.Transition-delay: Specifies when the effect transition begins.
Flex Shorthand in CSS
The flex property will be Shorthand in CSS for these properties:
flex-grow: Determines how much the flex object will grow in relation to other flex objects or the available space in the flex container.flex-shrink: Determines whether the object will shrink.flex-basis: Determines the initial size of the object and It can be a percentage or unit.
Font Shorthand in CSS
The font property will be Shorthand in CSS to:
font-style: Specifies the style of a text, which can be normal, italic or oblique.font-weight: Determines the weight of a text, which can be normal, bold, bolder, lighter or 100-900.font-variant: causes the text to be displayed in a small-caps font so that all lowercase letters are converted to uppercase, but in a smaller size.font-size: determines the size of the text with some keyword, value or percentage.font- family: Defines multiple font family options.
Shorthand Animation in CSS
The animation property will be Shorthand in CSS for the following properties:
animation-duration: Determines the duration of the animation sequence.animation-name: Determines the type of animation.animation-delay: Determines when the animation starts.animation-direction: Determines the direction of the animation.animation-fill-mode: used to apply styles before or after the animation plays.animation-iteration.count: used to define the number of times the animation will be seen.animation-play-state: pause and resume the animation sequence.animation -timing-function: Determines the timing of the animation.
Shorthand Padding in CSS
Remember that padding will be defined in pixels and will set the spacing you specify above, below, right and left, so it will define the properties:
padding-top.padding-bottom.padding-right.padding-left.
Background Shorthand in CSS
The Background property will be Shorthand in CSS for these properties:
background-color: Sets the background color of an element. background-image: Sets the image in the background of an element. background-repeat: Controls how the image repeats or whether it does not repeat. background-attachment: Determines whether the The image is fixed or “scrolled”. background-position: determines where the image is located on the page.
Margin Shorthand in CSS
Remember that margin will be defined in pixels and each property will specify its distance up, down, left and right, so it will be shorthand for:
margin-top. margin-bottom. margin-left.margin-right.
List-Style Shorthand in CSS
The list-style property in its Shorthand form in css will allow you to simultaneously set the following properties of a list:
list-style-type.list-style-position.list-style-image.
Some examples
So that you concisely understand how Shorthand properties in css They can save you lots of lines on your sheets, look at the following example:
Could you write your property margin So:
margin-top: 20px;
margin-right: 30px;
margin-bottom: 70px;
margin-left: 80px;
Or you could simply do it like this:
margin: 20px 30px 70px 80px;
Where to continue?
Now that you have learned the usefulness of Shorthand properties in CSS, do you still have some doubts or a lot of curiosity after reading all this information? CSS presents a whole world of possibilities and options for the design of your web pages and mastering it is an increasingly valued and required skill in the world of web development.. At Keepcoding we have the best learning programs thanks to all our bootcamps available! If you are also interested in other aspects of this area, such as programming languages, do not hesitate to search for your field of interest among all the courses we offer.