En smart sak i CSS ör möjligheten att skriva shorthand, att förkorta och sammanfatta egenskaper. Detta sparar inte bara in tid och tangentbordsslitage, utan kan faktiskt medverka till att webbsidor laddas snabbare.

Skillnaden i hämtnings- och lästid är dock marginell, den stora vinsten med shorthand är den att CSS:en går snabbare att skriva och att det ger en mer överblickbar kod.

Om du tittar på W3C:s lista över CSS-egenskaper ser du att vissa egenskaper är sammansatta ord med bindestreck i. Alla dessa kan kortas ned. border-top-color i exemplet nedan är att se som en precisering av exakt vilken kantlinje det gäller.

I stället för att skriva till exempel:

#meny {
border-top-color: #ff0000;
border-top-width: 4px;
border-top-style: solid;
border-right-color: #ff0000;
border-right-width: 4px;
border-right-style: solid;
border-bottom-color: #ff0000;
border-bottom-width: 4px;
border-bottom-style: solid;
border-left-color: #ff0000;
border-left-width: 4px;
border-left-style: solid
}

så kan du sammanfatta detta som

#meny {
border-color: #ff0000;
border-width: 4px;
border-style: solid;
}

#meny {
border: #ff0000 4px solid;
}

Alla tre exemplen ovan kommer att ge id:t meny en röd, 4 pixlar bred kantlinje på all sidor. Alla fyra sätten är också korrekta, men det sista innebär mycket mindre text att skriva än det första exemplet.

En liten varning: All shorthand fungerar inte alltid, ibland måste man vara specifik och dela upp sina regler. Jag föreslår att du börjar med att försöka sammanfatta så mycket som möjligt, och dela upp reglerna om du stöter på problem, men du bestämmer själv vad du tycker känns mest bekvämt, som sagt: samtliga exempel ovan är formellt korrekta.