Resize Images Using CSS

This is an older CSS trick that is worth repeating. Back in the days, resizing images was done via HTML height and width options. Here’s an example below. We will resize the image to 100 x 100 pixels.

HTML

<img src="example.jpg" width="100" height="100" alt="example" />

The problem with this approach is, first, we will lose image quality when resizing regardless of which direction we go, either up or down. The resized image is never going to be as good as the original. Second, there’s a good chance the image will NOT be proportioned. We have to be constantly be aware of image ratios when resizing images.

CSS

So, here comes CSS to the rescue. We will assign a class called “image” to our image.

<img class="image" src="example.jpg" alt="example" />

Next, we will apply CSS to our “image” class.

.image { width: 400px;height : auto; }
.image { width: auto;height : 600px; }

The result is, a well-porportioned image that is never going to be wider than 400px or taller than 600px. In addition, we maintain the standard dimension for all images using the “image” class.

A Background Image That Scales

I recently fixed an issue with my theme design. The dark wood background image that you see on this blog, was not big enough to fit most large monitors, where resolutions are higher than 1080px. Hat tip goes to Daniel Ritchie for pointing it out to me. So, I searched the web and found several possible solutions.

I found Chris Coyier’s at CSS-Tricks solution the most attractive, because it was by far the easiest one to implement. It not only adheres to CSS 3 standards, but it also works across most modern browsers. The result is a background image that fills up the entire page, scales to any size screen when needed, retains its aspect ratio, and centers the image properly.

What more can you ask for? Well, maybe something that loads a tiny bit faster than usual. So, I took the liberty to reduce the file size of my background image from 744kb to 128kb using my beloved Gimp. I use a little bit of image compression, without suffering too much in image quality. So, not only is the background image displaying properly on any size monitor, it also loads much, much faster. That’s a win-win situation.

If you like to know how I implemented a background image that scales to any screen resolution, just head on over to CSS-Tricks and check out Chris Coyier’s CSS3 solution. I hope you’ll find this article very helpful. I tested the new background with a HP w2207h monitor that rotates to landscape mode. Works great. If you find this to be otherwise, any input is appreciated.

HTML5 Basic Template

If you are going to be creating websites, you might as well be using HTML5 now. There is no point of using the older, antiquated, and sometimes verbose HTML 4 markup. A case in point, take a look at the HTML4 header markup below. It’s long, cryptic and hard to remember.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Compare that to the HTML 5 header markup below which is much, much simpler.

<!DOCTYPE html>
Let's take a look at the basic HTML5 template.
The HTML5 Basic Template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Template</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
</body>
</html>

This template is perfect for creating quick websites, displaying example pages, or for testing purposes. If you want to create professional websites, then you should check out HMTL5 Boilerplate template which I highly recommend. It’s an excellent website to get you started with your HTML5 projects.

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.

How To Truncate Text In CSS

Let’s say you have a tiny section on your website with a list of bullet points, but the text is too long. You would like to be able to truncate or cut off the extra characters to prevent the text from wrapping around to the next line. You can apply CSS to prevent your bullet points from wrapping around to the next line. Here’s what you will need to do. Assuming your div is a class called “bullets.”

.bullets {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

The ellipsis will add three little dots at the end telling your readers the text has been truncated. Simple enough.