I have recently set out to improve my skill in Cascading Style Sheets or CSS. The motivation to do so comes from a desire to build web pages that look more appealing than the sites I have built in the past. I’m not a complete novice when it comes to CSS. I’ve been sprinkling it through my web pages for the last few years, mainly at the tag level but never with a unified approach throughout an entire site.
The closest I’d come to a unified approach with CSS had been those style sheets that Visual Studio generated when I used Web Project templates to build a site. My patchwork approach produced patchwork results. The elements that I applied styling to looked great but the rest of the elements looked like dogs. I needed a more comprehensive approach.
I knew that CSS could be applied globally, a-la my experience with the generated style sheets, but I didn’t have a strategy for implementing them in that way. I had gathered some recommendations on good resources for learning CSS and finally settled on “CSS: The Missing Manual” (Affiliated Link) as my course of study.
That book began with the basics. It taught me selectors so that I understood the elements my styling would be applied to. I learned about specificity among selectors in a style sheet to understand how to arrange and build my selectors so that the style I wanted was applied only to a very specific element on the web page. This was a very powerful concept that went a long way in improving my approach to unifying my web design. I could now apply a style across my entire site but reserve special formatting for identified elements.
The next concept that I found extremely helpful was the effective use of padding and margins. Once I realized the difference between them my designs began to look cleaner. I could space elements properly on a page with simple CSS techniques instead of the hairy mess of HTML tables I had been using in the past. Concepts such as negative margins further improved what I could achieve in my website designs.
I began to transform my hyperlinks into very attractive buttons via CSS pseudo classes. I could insert a hyperlink into my HTML and with CSS display it in a block format that mimicked the look of a button. When I combined this technique with unordered lists and the CSS float property I could build very appealing horizontal navigation bars.
Applying the float technique also allowed me to take complete control of the layout of my web designs. I could position elements in fixed positions or create liquid designs that flowed to the display size of the browser that was viewing my site. I could rearrange columns within my site to improve both the visual appeal of the layout and the Search Engine Optimization (SEO) of the page.
All of these techniques have dramatically improved the appearance of the sites I design. My HTML is cleaner now that it is no longer cluttered with unnecessary styling elements or tables only used to achieve layout control. The time I have spent expanding my CSS skills has been well spent. My sites will be better for it and my clients will be happier with the results I produce.