Indent Entire Paragraph Using CSS

One of the easiest ways to indent an entire paragraph in HTML is to use a class and some padding. Let me show an example. In this tutorial, I will indent a paragraph by 40px. I will use a class called “indent” and apply “padding-left” to it. I’m using inline styles in this example, but you can easily apply the same CSS styles to an external stylesheet if you want. First, a normal paragraph.

Normal Paragraph

A normal paragraph would look like this. There is no indentation. The entire paragraph is lined up with the rest of the article. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ornare hendrerit orci, a congue purus interdum a. Integer nisl risus, tristique a feugiat egestas, malesuada nec massa. Suspendisse dui risus, viverra sit amet posuere nec, sollicitudin et ipsum. Maecenas mollis dapibus nunc, eu pharetra dui pulvinar vel. Morbi convallis purus quis quam ultrices ultrices lobortis augue rutrum. Donec ipsum massa, ullamcorper vitae lacinia ut, adipiscing sed ipsum.

A Paragraph With CSS Styling

<div class=”indent” style=”padding-left:40px;”>

In this div class, I am simply applying padding-left of 40 pixels to the entire class called “indent.” This will indent the entire paragraph as you can see in the results below. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ornare hendrerit orci, a congue purus interdum a. Integer nisl risus, tristique a feugiat egestas, malesuada nec massa. Suspendisse dui risus, viverra sit amet posuere nec, sollicitudin et ipsum. Maecenas mollis dapibus nunc, eu pharetra dui pulvinar vel. Morbi convallis purus quis quam ultrices ultrices lobortis augue rutrum. Donec ipsum massa, ullamcorper vitae lacinia ut, adipiscing sed ipsum.

</div>

The Result

As you can see, the entire paragraph is indented by 40px. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ornare hendrerit orci, a congue purus interdum a. Integer nisl risus, tristique a feugiat egestas, malesuada nec massa. Suspendisse dui risus, viverra sit amet posuere nec, sollicitudin et ipsum. Maecenas mollis dapibus nunc, eu pharetra dui pulvinar vel. Morbi convallis purus quis quam ultrices ultrices lobortis augue rutrum. Donec ipsum massa, ullamcorper vitae lacinia ut, adipiscing sed ipsum.

HTML5 Boilerplate

If you’re looking for a rock-solid HTML5 template, check out the HTML5 Boilerplate created by Paul Irish and Divya Manian. Here are more details from their site.

HTML5 Boilerplate is the professional badass’s base HTML/CSS/JS template for a fast, robust and future-proof site.

After more than two years in iterative development, you get the best of the best practices baked in: cross-browser normalization, performance optimizations, even optional features like cross-domain Ajax and Flash. A starter apache .htaccess config file hooks you the eff up with caching rules and preps your site to serve HTML5 video, use @font-face, and get your gzip zipple on.

Boilerplate is not a framework, nor does it prescribe any philosophy of development, it’s just got some tricks to get your project off the ground quickly and right-footed.

Visit and download the HTML5 Boilerplate.

CSS Text Shadow

If you are a frequent visitor to the site, you may have noticed a couple of subtle changes to my blog the last couple of days. I’ve added text shadows on the titles and I also removed the text underline from the links. Today, this article will focus on how to add text shadows to your blog using CSS.

CSS Text Shadows give coders and web developers a tool to create text effects such as 3 dimensional effects, glowing effects and stencils. Text Shadows was originally proposed in CSS2, but really took off with CSS3.

Text Shadows is supported in most major browsers: Firefox, Safari, Chrome, Opera. The one major browser that’s missing in the list is Microsoft’s Internet Explorer. Text shadows is possible in Internet Explorer using JQuery. See link below.

Adding Text Shadows to your website, blog or page is quite easy. All it takes is adding a line of code to your existing CSS file. Consider the title above called “CSS Text Shadow” styled using <h2>. To make a text shadow, just add the following to your CSS file.

h2 { text-shadow: 2px 2px 2px #aaa; }

Text Shadows

The text shadow element contains 4 attributes. The first attribute is the x-coordinate. The second is y-coordinate. The third is the blur. The fourth is the color of the shadow. Negative values can be placed to simulate a light source that’s coming from the bottom.

h2 { text-shadow: 2px 3px 3px #aaa; }

Text Shadows

Here’s a couple of excellent articles about CSS text shadows:

CSS text shadows is a great tool for creating cool effects on your site. Just one advice. Don’t overdue it. Use it sparingly.

My WordPress Multi-Site .htaccess File

I just solved my WordPress multi-site problem. I have several blogs located in the subdirectories of this blog. The problem was the media files for my sub-blogs were all broken. If you are aware of the WordPress multi-site setup, WordPress creates a blog.dir directory under wp-content. This is where it keeps all of the uploaded media files such as: images, video, etc for the sub-blogs.

The issue was began when my .htaccess file was overwritten or possibly replaced. At first, I thought it was just an issue with the WordPress options pages which is stored in the wp-options table. But, that wasn’t the case. A quick search in the WordPress forums solved that problem. So, I’m writing this article for two reasons: (1.) So others can benefit, (2.) so I have a record of this fix somewhere.

So, here’s my .htaccess file.

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ – [L]
# uploaded files
RewriteRule ^(.*/)?files/$ index.php [L]
RewriteCond %{REQUEST_URI} !.*wp-content/plugins.*
RewriteRule ^(.*/)?files/(.*) wp-includes/ms-files.php?file=$2 [L]
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ – [L]
RewriteRule  ^([_0-9a-zA-Z-]+/)?(wp-(content|admin|includes).*) $2 [L]
RewriteRule  ^([_0-9a-zA-Z-]+/)?(.*\.php)$ $2 [L]
RewriteRule . index.php [L]
</IfModule>
# END WordPress

Create Your Own WordPress Breadcrumbs

Breadcrumbs in web terms are a chain of links that leads the user back to the main index page. This article will teach you how to manually create your own breadcrumbs within WordPress. You will place these codes in your WordPress themes just underneath your header, for example.

Create a Home

Let’s get started. Let’s create a home. Use this HTML and PHP code.

<a href=”<?php bloginfo(‘url’);?>”>Home</a>

Double Angle Quotation Marks

Let’s use a Guillemet or a Double Angle Quotation Mark to separate the links.

The symbol » equals to “&raquo;” in HTML.

Post and Page Titles

Let’s display the titles. The code for both post and page titles are the same.

<a href=”<?php echo get_permalink() ?>”><?php the_title(); ?></a>

All Together Now

<a href=”<?php bloginfo(‘url’);?>”>Home</a> &raquo; <a href=”<?php echo get_permalink() ?>”><?php the_title(); ?></a>

The Result

Home » Create Your Own WordPress Breadcrumbs

Just place this piece of code in your WordPress theme files: e.g. pages.php and single.php. For the main index.php page, you just need the Home link.

That’s it. Fairly easy.

You can get really elaborate by adding Categories, Months and Dates in your breadcrumb. Nevertheless, this article will get you started in the right direction.