In this post I'm going to show you a brief overview of the most used CSS techniques for styling blog contents. Either if you're a web developer or a normal CSS user who simply wants to create his/her blog from scratch, I hope you'll find these techniques useful. Let's get started.
Resetting styles
This technique is usually put at the very beginning of a style sheet. You can reset borders, margin, padding, fonts etc. on a specified set of elements:
h1, h2, h3, h4, h5, h6, p, blockquote, pre {
margin: 0;
padding: 0;
font-size: 100%;
font-weight: normal;
}
Creating a global site wrapper
I generally use a global site wrapper to enclose all my site contents. Usually I name it using the same name of the site I'm currently developing:
<body> <div id="site"> <!--site contents here--> </div> </body>
This technique creates a global namespace that can be really useful for further per-page styles.
Styling the header
Having the following markup:
<body>
<div id="site">
<div id="branding">
<h1>
<span>Blog Name</span>
</h1>
</div>
</div>
</body>
we can stack several background images to stylize the top section of our blog:
body {
margin: 0;
padding: 0;
background: #fff;
color: #000;
font: 100% "Trebuchet MS", Trebuchet, sans-serif;
background: url(css-blog-contents/header-bg-repeat.jpg) repeat-x;
}
#site {
width: 100%;
background: url(css-blog-contents/header-bg.jpg) no-repeat 50% 0;
padding-top: 150px;
}
#branding {
width: 100%;
height: 213px;
background: url(css-blog-contents/bg.gif) repeat-x;
}
#branding h1 {
width: 60%;
margin: 0 auto;
height: 100%;
background: url(css-blog-contents/header.jpg) no-repeat 100% 0;
position: relative;
top: 76px;
}
#branding h1 span {
font: 6em 'Permanent Marker', sans-serif;
color: #d40;
-moz-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
display: block;
}
Using a Google Web Font
To use a Google Web Font, you have simply to reference it in your head section like so:
<head> <link href='http://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css' /> </head>
Alternatively, you can use the @import rule with the same absolute URL seen above, but I don't recommend this practice because it leads to poor
performance results. The only thing to bear in mind is to put your Google font before the main styles of your page.
Sticky blog dates
The CSS effect of sticky blog dates is easily achieved using contextual positioning on the date wrapper and its nearest ancestor:
div.post {
width: 100%;
padding-bottom: 1em;
position: relative;
}
div.entry {
width: 80%;
margin: 0 auto;
}
div.date {
width: 79px;
height: 80px;
background: url(css-blog-contents/date.png) no-repeat;
font-family: Georgia, serif;
position: absolute;
top: 0;
left: 0;
}
div.date span {
display: block;
font-weight: bold;
text-align: center;
}
div.date span.month-day {
color: #fff;
padding-top: 4px;
}
div.date span.year {
font-size: 1.5em;
padding-top: 15px;
}
Adding social buttons
You can wrap your social buttons within an unordered list and then use floating to display your icons on the same line:
ul.social {
height: 24px;
width: 100%;
margin: 0.5em 0;
padding: 0;
list-style: none;
}
ul.social li {
float: right;
width: 24px;
height: 24px;
margin-right: 0.5em;
}
ul.social li a {
float: right;
display: block;
width: 100%;
height: 100%;
text-indent: -1000em;
}
ul.social li.facebook a {
background: url(css-blog-contents/facebook.png) no-repeat;
}
ul.social li.twitter a {
background: url(css-blog-contents/twitter.png) no-repeat;
}
Styling block quotes
You can add a single background image to your blockquote elements to make them more eye-catching:
#content blockquote {
margin: 0.5em 1em 0.5em 0;
height: 100%;
padding-left: 38px;
background: url(css-blog-contents/quote-left.png) no-repeat;
font: 1.5em Georgia, serif;
color: #555;
}
Adding code highlighting
You can use Google Prettify to automatically highlight the syntax of your code blocks. First, you need to reference the core library, its language files and its main style sheet in the head section:
<head> <link rel="stylesheet" href="prettify.css" type="text/css" media="screen" /> <script type="text/javascript" src="prettify.js"></script> <script type="text/javascript" src="lang-css.js"></script> </head>
Then you have to add the class prettyprint and a language-specific class (if any) to your code blocks:
<pre class="prettyprint lang-css"></pre>
Finally, you make everything run by adding the following code to your body element:
<body onload="prettyPrint()"></body>
Google Prettify, however, adds its own styles to your code blocks. You can always reset its default styles explicitly:
#content pre.prettyprint {
font: 1em Consolas, 'Andale Mono', monospace;
background: #f0f0f0;
padding: 0.5em;
border-left: 1em solid #999;
border-width: 0 0 0 1em !important;
}
You can see the demo below.
thank you master \m/