Using CSS to Spice Up Your Blog or Webpages

03/08/09 by admin | Recent Posts, Web Design | No Comments »

Looking for ways to spice up your blog posts?  Even if you are new to blogging, you can use these little CSS techniques to give your page some variety and attract the attention of your reader.

Mandarin Design has a ton of code snippets you can grab and paste directly into your post quickly and easily.

Here are just a few of the examples they share:

1. Text Overlays using CSS
2. Centered Border Box
3. CSS Magazine Style Pullquotes
4. Opacity Blending Effects
5. CSS Background Images
6. Overlay Text on an Image

Not to mention the two I’ve included here.  The top is an example of a magazine style header, while the pullquote on the right side would be perfect for adding testimonials or even emphasizing your topic to get your reader interested.

And this is all done by using inline CSS styles! Visit Mandarin Design to see all of the examples and then try a few in your next post.

Removing the Ugly Blue Border Around Images

01/27/09 by admin | HTML Tips, Recent Posts | 1 Comment »

I think we’ve all been in this position where we want to show our images yet when hyperlinked (or because of the css code), we end up with ugly borders (usually blue). I’ve noticed it on this theme and will now have to make the changes…grrr.

In wordpress, the image properties has a section called “border” in the advanced tab of the image settings area. By simply putting a 0 (zero) in the box and saving it you’ll remove the border, sometimes, and depending on your theme.  Personally, I’m not a fan of  WordPress’s image features, infact, besides what I’m showing you here, you should also check out my post on How to Wrap Text Around an Image so you can nicely position your images without many of the hassles I’ve come across by using the wordpress image settings.

So, if you’re in a situation where you need to physically change the html code, here’s what you do:

Below is a typical image code:

<a href="http://www.yoursite.com"><img src="http://www.creativedesignworx.com/images/remove_blue_border_sample.gif" alt="" width="250" height="250" /></a>

Which would produce this:

This is your image (summer_flower.jpg) hyperlinked to www.yoursite.com,  and leaving it this way will likely create a blue border around your image.

Now, by simply adding this little snippet into your image code, you’ll be able to remove the border:

style="border: 0pt none;"

<a href="http://www.yoursite.com"><img alt="" /><strong>style="border: 0pt none;"</strong> src="http://www.creativedesignworx.com/images/remove_blue_border_sample.gif" alt="" width="250" height="250" /&gt;</a>

Now you see…no border!

That’s it! Easy as pie:)

Update - I’ve created a really quick video to explain the wordpress image properties as I talk about in the beginning of this post
(Note, it’s not the greatest as I’m just learning a new video software, but as I go along my videos should get better:)

Web page headings using HTML tags

12/28/08 by admin | Web Design | No Comments »

Here’s another tip from my friend Kyle Reddoch on the importance of headings and how best to use them for SEO purposes…

Headings form a part of the logical structure of an HTML document. There are six heading tags <h1> to <h6> each having its ending tag.

To get better ranking in search engines, make sure that the web page headings contain all (or the most important) keywords and key phrases. If the same keywords and key phrases are repeated in the paragraph following the heading, the page will certainly get a boost in ranking.

You should NEVER use headings to increase the size of text. You have at your disposal the <font>tag, and the <small>, <big> tags for that purpose. Furthermore, you can gain a better control over font size and other text properties using Cascading Style Sheets.

Since headings provide a logical structure to the document, another important thing to remember is NEVER to use smaller level headings before the higher. Thus, <h4> should not be used before <h2> (though, HTML does not enforce this).

If you found this tip on web page headings using HTML tags helpful, please let us know by posting below.

Three Methods of Using CSS in your HTML Website

12/03/08 by admin | Recent Posts, Web Design | 10 Comments »

A CSS or “Cascading Style Sheet” file allows you to separate your websites content from it’s style or appearance. While you would create the layout of your websites content using your (X)HTML file, the CSS stylesheet would control the way in which that content appears (fonts, colours, borders, backgrounds, margins, etc.).

There are 3 methods you can use to implement the css into your design, but which one is better is dependant on what you are doing, or where you are using it.

Let’s first see what each one involves, then we can decided on the ultimate CSS method for
your project.

We aren’t going to go into details on the styles themselves, rather we’ll just go over the three methods in general.

Internal Stylesheets

This method places the CSS code itself inside the tags of your page. With this method each page is separate, therefore, the code must be placed inside each page in order for the styles to work their magic on every page of your website.

Example:

<!--

p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000;

h1 { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000099; }

-->

I’m sure you can imagine how tedious it would be to update every page of your website one-by-one, so let’s examine this option…

External Stylesheets

The external stylesheet is a file all on it’s own that can be created using something as simple as notepad. This file contains no html code. When you save it, give it the .css extension and you have yourself an external stylesheet.

The styles would be the same as those listed about, but with the external stylesheet, you would link to it from within your “head” tags.

Example:

You would then place this code in your html document as shown below:

Using this method would give you far more flexibilty and of course save you time. By simply updating your external stylesheet, every page on your site would be updated at once, rather than using the internal stylesheet where you would have to update and change each individual page.

And finally, the Inline Styles

I don’t use this too often, but I do find it handy when I’m putting together a quick blog post or adding adsense to a page or even on websites where I am posting but don’t have any control over the css files.

An example would be one I explained in my article “How to Wrap Text Around an Image“.

Then type your text here.

This code is an example of using inline css to wrap your text around an image or ad. You could add the style to your internal or external css, but if you are working on the fly, or simply can’t, this is one solution you could use.

So again, which one is better?

• If you are creating a multi-paged website, an external css file would be the better choice. It would save you time and make updating your pages almost an instant process.
• If you are creating a single page, you could use an internal stylesheet simply because you only have to update the one page.
• And if you are working on content to be placed somewhere that you don’t have access to css or just want a quick style change, inline will do.

Some would say using the external method is the best choice and I would tend to agree. But there are situations where you could use either the internal or the inline stylesheets as I mentioned above.

Consider the project you are working on, then decide which option you feel would be your best option.