4:40 PM
OglacsTeam
Comparing individual and shorthand values
Take a look at the below given margin rule (border and padding works in the same way)
div.foo {
margin-top: 1em;
margin-right: 1.5em;
margin-bottom: 2em;
margin-left: 2.5em;
}
The rule as given above can also be written as:
div.foo {
margin: 1em 1.5em 2em 2.5em;
}
Providing less than four values for a shorthand property
A shorthand value has the capability of taking less than four values as listed below. Results are sequential according to the number of values provided.
1. Same value applied to all four sides. margin: 2px; for example
2. First value applied to the top and bottom and the second to the left and right. Example - margin: 2px 5px;
3. First and third value applied to the top and bottom respectively; second value applied to the left and right. As for example - margin: 2px 4px 1px;
4. Values provided to the top, right, bottom and left as given in CSS source order above.
However, the best way is to provide all four values to shorthand properties for it provides sound legibility. The same applies to the padding shorthand property.
Making the choice to use a single property or a shorthand value
Even though shorthand value gets used most often in margin and padding properties, there are times in which shorthand properties are best avoided or at least used after thorough consideration. Shorthand should be avoided in the following cases provided:
1. When a single margin is needed to be set. In such situation, simultaneously setting multiple properties conflicts the KISS (Keep It Simple, Stupid) principle.
2. When the selector to which the properties apply is subject to many edge. In this case, the unavoidable lists of shorthand values can become difficult to follow when it comes to altering and changing the layout.
3. If the stylesheet is going to be maintained by people with limited skills. If you are working with a team and the CSS is maintained not just by you, shorthand should be best avoided.
4. When there is a need of supplanting a value to account for an edge case.
This is all for CSS Shorthand. You may visit back for more on CSS and HTML, Android application development and web application development related articles.
Posted in: 
2 comments:
I have seen a extremely informative blog. Truly I like this blog. This blog gives us especially excellent knowledge about CSS basics.
Princess Square in Koramangala - Serviced Apartments in Bangalore
With over 40 years of experience in the Service Industry all of us at princess square Service Apartments personally know caring for the guest and It is our goal to make sure you, your family and friends the guest enjoy a carefree vacation or Superior business class experience.
We have a small quality driven collection of hotels & hotel apartments within one of the world's most modern and fastest growing city of Bangalore.
Welcome to the Garden city - Welcome to Princess square Service Apartments Hospitality, where our promise of pure value, pure quality and pure service is delivered.
An essential attribute of all our properties are our convenience and central locations within the city of Bangalore.
At princess square Service Apartments we provide a wonderful choice. Whether you are a discerning budget traveler or just looking for that element of luxury of a 5 star business hotel, we have the accommodation solution to suite you.
Our deluxe hotel apartments offer a choice of both full hotel service operations as well as self catering facilities. We have an extensive choice of accommodations to choose from and our portfolio includes standard hotel rooms, deluxe hotel suites, studios, One, Two & Three Bedroom suite apartments, Royal Suites, Executive & Privilege Floors.
We are ideal for leisure, corporate travelers, stopovers & long stays.
All our hospitality establishments provide only the highest levels of comfortable quality accommodations and we are the perfect choice for your next city break, business meeting or special family occasion.
Post a Comment