23 Oct 2007 Premailer: preflight for HTML e-mail
Premailer is a script accessible from the web that turns external CSS webpage into inline, improving the rendering of HTML e-mail.
This makes it possible to make a webpage and then run it througt this script to make a HTML e-mail.
Posted by Hans-Henry Jakobsen
05 Oct 2007 Left and Right align text on the same line
It can sometimes be useful to have some text be aligned to the left and some text be aligned to the right on the same line, eg in a footer.
Here is how this can be done in HTML:
<div id="footer"> <p class="leftalign">Text on the left.</p> <p class="rightalign">Text on the right.</p> </div>
If you were to then give your CSS classes leftalign and rightalign values of text-align: left; and text-align: right; respectively, you would get close to your desired result, but your right-aligned text would be bumped down one line because of the new paragraph. Instead, just float your paragraphs:
.leftalign {
float: left;
}
.rightalign {
float: right;
}
Then just remember to clear your float:
<div style="clear: both;"></div>
Posted by Hans-Henry Jakobsen
05 Oct 2007 Using multiple CSS classes
Let’s say you need six different 100px square boxes with different characteristics:
- Red with Border
- Blue with Border
- Green with Border
- Red without Border
- Blue without Border
- Green without Border
You COULD create a unique class for each of these:
.redwithborder {
width: 100px;
height: 100px;
margin: 10px;
float: left;
background-color: red;
border: 3px solid black;
}
.bluewithborder {
width: 100px;
height: 100px;
margin: 10px;
float: left;
background-color: blue;
border: 3px solid black;
}
...etc
BUT that’s called CSS Bloat because it includes a bunch of unnecessary repetitive code. Instead, create just five classes with simple, identifiable names that each handle something very specific:
.box {
width: 100px;
height: 100px;
margin: 10px;
float: left;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.border {
border: 3px solid black;
}
In your HTML, things look just as clean, just put a space between each of the classes you wish to apply to the div:
<div class="red border box"></div> <div class="blue border box"></div> <div class="green border box"></div> <div class="red box"></div> <div class="blue box"></div> <div class="green box"></div>
This method allows better future flexibility as well. If you wanted to create an orange box, or even a box with a background-image or some completely separate characteristic, you could. And then adding a border to that new box is simple adding a space and the “border” class name.
Source: http://css-tricks.com/un-bloat-css-by-using-multiple-classes/
Tags: CSS
Posted by Hans-Henry Jakobsen
10 Aug 2007 CSS Shorthand Guide
Ok. Let’s set the record straight. There is no official guide for each and every CSS shorthand property value. So let’s work together and put one together shall we? Ok. Straight to the business. Anytime I’ve ran into a specification (besides the confusing mess at the W3C), it turns into showing off a couple of examples and you’re supposed to be set on your way. Well well. Over the years, I’ve found quite some interesting unknown quirky facts about these shorthands… hence this Guide was born.
(more…)
Tags: CSS
Posted by Hans-Henry Jakobsen
