--- title: "CSS Optimization Tips · Appnovation" url: "https://www.appnovation.com/insights/css-optimization-tips" description: "Reduce CSS file size and improve page load times with practical CSS optimization tips, from shorthand hex colors to smarter selectors." --- Article # CSS Optimization Tips [![](https://cdn.sanity.io/images/ey850001/production/f19d29fd30e3e4d3e07d971ea644d23a0c414afb-68x68.png?w=68&auto=format) Justin Tsang Team Lead](/people/justin-tsang.md) Dec 17, 2009 2 min read ![Appnovation Blog Default Header](https://cdn.sanity.io/images/ey850001/production/9efe1c26d9584ecfb3dfef5a63e698bf4567d305-1440x600.jpg?w=1400&auto=format) Do you want to reduce your css files to help page load times, well here are a few helpful tips that will become second nature to you after repetitive usage. **1) Shorten Hex Colors.** If you need to have a color that uses the same character such as #FFFFFF. You can simply write #FFF. This works anytime you need to specify color. `/* Original*/` `.header {` `background: #FFFFF;` `background: white;` `}` `/* Optimize */` `.header {` `background: #FFF;` `}` **2) Combining margin-top, margin-bottom, margin-left, and margin-right.** Instead of having 4 lines for each margin or padding you can combine them into one. I always remember the order by thinking it goes clockwise, starting at the top followed by right then bottom and finally left. `/* Original */` `.classname {` `margin-top: 10px;` `margin-right: 3px;` `margin-bottom: 4px;` `margin-left: 8px;` `}` `/* Optimize */` `.classname {` `margin: 10px 3px 4px 8px;` `}` **3) Combine top and bottom or left and right margins.** In the situation where you want to have both left and right be the same pixels you can combine it. `/* Original */` `.classname {` `margin: 7px 10px 6px 10px;` `padding: 4px 5px 4px 5px;` `}` `/* Optimize */` `.classname {` `margin: 7px 10px 6px;` `padding: 4px 5px;` `}` **4) 0 pixels actually equals 0.** You can actually remove the "px" if the padding is actually 0. `/* Original */` `.classname {` `margin: 0px;` `}` `/* Optimize */` `.classname {` `margin: 0;` `}` **5) Combine the styles for background and font** You can combine background-position, background-repeat, and background-color into the background attribute. This can be used with "font" attribute also. In the following example "700" also is equivalent to bold. `/* Original */` `.bg_wrapper {` `background: url('image.png');` `background-repeat: no-repeat;` `background-color: #000;` `background-position: 0 10px;` `font-weight: bold;` `font-size: 1.3em;` `font-style: italic;` `font-family: "FB Armada", sans-serif;` `}` `/* Optimize */` `.bg_wrapper {` `background: #000 url('image.png') no-repeat 0 10px;` `font: 700 italic 1.3em "FB Armada", sans-serif` `}` **6) Reducing whitespace** This maybe harder to read as a user and harder to manage but this is what most CSS compressers end up doing. `/* Original */` `.classname {` `margin: 10px 3px 4px 8px;` `}` `/* Optimize */` `.classname { margin: 10px 3px 4px 8px; }` **7) Finally you can pass your css to online optimizers** The best one out there is probably [Icey's CSS Compressor (opens in new window)](http://iceyboard.no-ip.org/projects/css_compressor) [![](https://cdn.sanity.io/images/ey850001/production/f19d29fd30e3e4d3e07d971ea644d23a0c414afb-68x68.png?w=68&auto=format) Justin Tsang Team Lead · Appnovation](/people/justin-tsang.md) ## Keep reading [![What is Sovereign AI](https://cdn.sanity.io/images/ey850001/production/a5889abdd5e80376912546622e046e3fbef234b4-2496x1664.png?w=640&auto=format)](/insights/what-is-open-source-sovereign-ai.md) Article · 7 min AI ### [What Is Open Source, Sovereign AI?](/insights/what-is-open-source-sovereign-ai.md) Every company is encouraging more AI, and almost every AI bill is climbing. Sovereign AI is about two kinds of control: over your data and over your costs. Here's why open source sits at its foundation. [Iain MacNeil](/people/iain-macneil.md) Article [![AI-first experience design](https://cdn.sanity.io/images/ey850001/production/8bbc2418e87924ef10f36115478a2e10d5bed95e-1584x624.jpg?w=640&auto=format)](/insights/how-build-ai-first-experience-without-throwing-out-everything-youve-already-built.md) Article · 6 min AI Sep 10, 2026 ### [How to Build an AI-First Experience Without Throwing Out Everything You've Already Built](/insights/how-build-ai-first-experience-without-throwing-out-everything-youve-already-built.md) Users now expect a direct answer, not a list of links to click through. Here's how organizations can layer an AI-First experience onto their existing website or app, in weeks rather than years. [Andrew Douglas](/people/andrew-douglas.md) Article [![What Becomes Possible When AI Can Read All the Data](https://cdn.sanity.io/images/ey850001/production/c28ab0bd26753421ee42937e13adc7a7f19b47f0-1296x510.jpg?w=640&auto=format)](/insights/what-becomes-possible-when-ai-can-read-all-data.md) Article · 4 min AI Sep 09, 2026 ### [What Becomes Possible When AI Can Read All the Data](/insights/what-becomes-possible-when-ai-can-read-all-data.md) Most of the world's data has never been analyzed, only sampled. AI changes that. How AI-ready data platforms unlock questions no one could ask before. [Appnovation](/people/appnovation.md) Article ## Get the thinking, *before everyone else.* One considered email a month. New essays, field notes from live engagements, and the occasional strong opinion. No noise.