8. The CSS Balancing Act
There was a Blog post recently that had near perfect balance. It was not in English so I was looking more at the layout than reading. What I noticed was the fine balance of the three simple classes to coordinate the image with the dropcap and the pullquote.
...you don't have to know CSS to use this one
It was very nicely done. It looked something like this post.
We are using shorthand CSS here. Using shorthand notation can help keep the size, or weight, of the page to a minimum if the style sheet is growing. For readability we tend to leave our CSS style long and the style sheet is growing too fast. Either way works. And, no you don't have to know CSS to use this one.
It's served copy-and-paste style and with the external CSS.
Three CSS Classes
These three classes work well together. We named the classes thinborder, dropcap, and pullout.
Thinborder
.thinborder{
float:left;
border:solid 1px yellowgreen;
padding:5px;
margin-right:5px;
}
DropCap
.dropcap {
float: left;
font: normal 60pt/0.8em Georgia,
Helvetica, Verdana, Arial,
sans-serif;
color: yellowgreen;
margin-right: 3px;
}
T
Pullout
.pullout{
width:30%;
padding:10px;
background-color:yellowgreen;
color:#F5F5F5;
float:right;
font: bold 14pt/1em Arial,
Helvetica, sans-serif;
text-align:left;
letter-spacing: 0.05em;
margin-top:20px;
margin-left:15px;
clear: both;
}
...you don't have to know CSS to use this one
1. Copy and paste the CSS classes.
The CSS that goes in the top section between the <HEAD> and </HEAD> of the template or
in the external style sheet looks like this.
<style type="text/css">
.thinborder{
float:left;
border:solid 1px yellowgreen;
padding:5px;
margin-right:5px;
}
.dropcap {
float: left;
font: normal 60pt/0.8em Georgia,
Helvetica, Verdana, Arial,
sans-serif;
color: yellowgreen;
margin-right: 3px;
}
.pullout{
width:30%;
padding:10px;
background-color:yellowgreen;
color:#F5F5F5;
float:right;
font: bold 14pt/1em Arial,
Helvetica, sans-serif;
text-align:left;
letter-spacing: 0.05em;
margin:5px;
clear: both;
}
</style>
2. Copy and paste the HTML your Blog or Web page.
It will look like this.
There was a Blog post recently that had near perfect balance. It was not in English so I was looking more at the layout than reading. What I noticed was the fine balance of the three simple classes to coordinate the image with the dropcap and the pullquote.
...you don't have to know CSS to use this one
It was very nicely done. It looked something like this post.
We are using shorthand CSS here. Using shorthand notation can help keep the size, or weight, of the page to a minimum if the style sheet is growing. For readability we tend to leave our CSS style long and the style sheet is growing too fast. Either way works. And, no you don't have to know CSS to use this one.
It's served copy-and-paste style and with the external CSS.
Quick Pick Instant Results!
For instant results take this code with you. There is no need to modify the style sheet. Just instant copy-and-paste results (including the image and text).
Copy and paste this in your Blog or Web page.
It will look like this.
There was a Blog post recently that had near perfect balance. It was not in English so I was looking more at the layout than reading. What I noticed was the fine balance of the three simple classes to coordinate the image with the dropcap and the pullquote.
...you don't have to know CSS to use this one
It was very nicely done. It looked something like this post.
We are using shorthand CSS here. Using shorthand notation can help keep the size, or weight, of the page to a minimum if the style sheet is growing. For readability we tend to leave our CSS style long and the style sheet is growing too fast. Either way works. And, no you don't have to know CSS to use this one.
It's served copy-and-paste style and with the external CSS.