Last Tuesday’s class was an introduction to CSS (Cascading Style Sheets). This was very interesting as it was something I had encountered during my work with websites, but not something I had a good handle on. As explained during class, it’s really quite simple, at least for basic CSS. One topic that came up was the use of attribute selectors. I found an nice use of this in the BU Flexi Theme to give icons to links:

Here’s the CSS code:

#content a[href^="mailto:"] {background:url(images/icons/email.png) no-repeat right center;padding:2px 20px 2px 0;}
#content a[href$=".pdf"] {background:url(images/icons/pdf.png) no-repeat right center;padding:2px 20px 2px 0;}
#content a[href$=".doc"], #content a[href$=".docx"] {background: url(images/icons/doc.png) no-repeat right center; padding:2px 20px 2px 0;}
#content a[href$=".xls"], #content a[href$=".xlsx"] {background: url(images/icons/xls.png) no-repeat right center; padding:2px 20px 2px 0;}