There’s some really nice stuff you can do in CSS, one of which is getting rid of graphics for borders, backgrounds, and buttons. Transparency is a boon as well allowing good styling with minimal effort, in my case surrounding pre tags with transparent slightly grey background to help them stand out:
pre {
background-color: rgba(150,150,150,0.4);
border: 2px solid rgba(100,100,100,0.6);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-opera-border-radius: 2px;
-kthml-border-radius: 2px;
border-radius: 2px;
margin-left: 2em;
margin-right: 2em;
margin-bottom: 0px;
margin-top: 0px;
padding: 5px;
}
What has been bugging me though after working through a custom wordpress theme to tie in with the website for my application (see here) is how to match dynamically generated css class or ID styles. Such as the ones produced by wordpress functions like the_ID() and post_class().
The answer is quite straightforward in the end. This is how you match dynamically generated class or ID styles in CSS3, it might work in other variants of CSS:
div[id^="post"] h1 {
font-weight: normal;
text-align: left;
}
The above will match an h1 tag inside any div that has an ID starting with “post”.
I’d scanned the w3 document quite a bit but the use of this didn’t sink in until I realised that err.. well class and id tags ARE elements of div, h1 or whatever.
Soon I’ll be able to upload this local wordpress install in all it’s glorylack of content^H^H^H^H^H^H^H^H^H^H^H. 😛