I remember years ago, while learning to write for the internet, I discovered CSS files. Although I understood what they were for, I couldn't really decipher them.
Originally, CSS files looked like internet voodoo to me. I accepted their presence as a necessity, but always quickly looked away...As if the writer in me did not want to accept a complicated system dictating what my writing would look like...Silly me...
I suffered greatly for a while, until one day, with lots of help from w3schools, I finally saw the light: I could write my own CSS and it was not difficult at all! The trick is simple: just start defining the basics: how you want your html, body, headings to appear and use that as a start. Don't write much more CSS, unless you already know you are going to need it. The rest can be added later, so the CSS file can grow with the website...
An example of this on this page is the word Menu in the Menu button. That is a link obviously, but I did not want it to look and behave like the other links on the site, so I added a new class: "class2", that defines the font color and text-decoration.
My inital fear for CSS was caused by the huge and complex CSS frameworks I had been using in the past (Not knowing then that they were minified, I just kept reading till it somewhat started to make sense...)I've reasons to be a little proud of my mini CSS, only 2.9 kB un-minified and un-gzipped but it has plenty to offer: it defines:
There are some CSS's that come close in size, but then they typically only offer the utter basics, like menu, heading, button...and that's it.
If you want to see what my CSS looks like or want to use it as a base for yours, you can download it here: feather.css
For the blog pages I chose another CSS. It is based on a miniscule Css (less than 2kB!) I found somewhere - forgot where, I'm sorry: if you recognize it, please let me know and I will add the credits - I really liked it for a blog page, just added some of my own stuff. Now it is 2.6 kB un-minified. It can be downloaded here: blogstyle.css
As you can see from this website, I just cannot write pages unillustrated...however much I admire people like Manuel Moreale who successfully writes pure text without any drawings or pictures, most of the time I want some images as part of a web page. After all, even the medieval scribes, the book writing monks, invested a great deal of their time in the creation of artwork as an integral part of their handwritten books. But I fully agree not to go overboard with images and use every technique we have at our disposal to minimize their weight. Let's hope one day soon images will become as small as text, after compressing them (with a tool yet to be invented...).
The nice thing with my CSS approach, is that once you've finished your first home brewn CSS, that by now you understand completely, you'll have the base for all your future websites! No need to start all over, just some small changes/additions and your next CSS file is ready for primetime!
If you do not like this website's style or do not feel attracted to the idea of rolling your own CSS, no problem!
It is possible to find CSS files and frameworks online that are extremely small and efficient. Just do a search for "lightweight CSS (framework)". But it pays to be critical and only consider CSS projects without Javascript or Jquery, only CSS. Also, the term 'lightweight' isn't very scientific.. lightweight compared to what? If no weight is given in kB, beware! Even when the weight is mentioned, is it the minified weight or even the weight when gzipped?
( Gzipping a CSS file is something more and more modern servers do, before sending it to a browser, thereby hugely compressing the file. Maybe, on average, making it 1/3 of the original or even less.
Some projects that look good to me ( But I haven't tested them yet):
Back to Top