Category Archives: CSS Tips

transparency

CSS Opacity and Transparency

The opacity property is how transparent an object is over another object on a web page.  The default value of the opacity property is 1 and the range is from 0 (completely transparent) to 1 (no transparency at all).  Let’s create a nice visual effect using the CSS opacity property. Continue reading

css tip text box transparency

CSS Opacity Property – Text Box

In another article, we discussed how we can use the CSS Opacity Property to change the transparency of an image.  But let’s say we want to keep the image at its normal opacity (100%) but we want to add text over the image.  Depending on the background of the image and the color of the text, it may make it hard to read the text. Continue reading

meta

How To Create Meta Tags For My Website

What Are Meta Tags?

Meta tags are elements of a web page that help search engines to categorize your web site correctly.  When you visit a web page, you don’t see the meta tags, however they are there. To see a page’s meta tags, just right click on it and select “view page source”.

 TIP: Visit your competitors’ websites and check out what keywords and descriptions they are using.  Let’s say you are a barbershop in Anytown, USA and your keywords include “Anytown”.  Your competitor in the next town over which may be “Nexttown, USA” might be using the same keyword “Anytown” to acquire anyone who is looking for a barber in your town.

The most common tags are listed below in “Basic Layout For Your Meta Tags”.

 Different Types of Meta Tags

metatag1Here is a great article that goes into depth about Meta Tags and when to use them.  Some experts are stating that some meta tags aren’t as important as they were in the past.  Search engines like Google,

Bing, etc. are constantly changing what is important to page ranking.

Searchenginewatch.com Article

 

Basic Layout For Your Meta Tags

You can copy the code below and keep it in a Word Pad file for future reference.

<meta http-equiv=”Content-Type” content=“text/html; charset=utf-8” >
<title></title>
<meta name=”viewport” content=“width=device-width, initial-scale=1, maximum-scale=1”>
<meta name=”keywords” content=“” >
<meta name=”description” content=“”>
<!–FACEBOOK–>
<meta property=”og:title” content=“” >
<meta property=”og:site_name” content=“”>
<meta property=”og:url” content=“” >
<meta property=”og:description” content=“” >
<meta property=”og:image” content=“” >
<meta property=”og:type” content=“website” >
<meta property=”og:locale” content=“” >
<!–TWITTER–>
<meta property=”twitter:card” content=“summary” >
<meta property=”twitter:title” content=“” >
<meta property=”twitter:description” content=“” >
<meta property=”twitter:creator” content=“@” >
<meta property=”twitter:url” content=“” >
<meta property=”twitter:image” content=“” >
<!–GOOGLE+–>
<link rel=”author” href=””>

metatag2

Delete and of the tags that you aren’t using.  Note that you can use the same information in multiple spots, example the URL for Facebook and for Twitter are the same.
If all this info is a bit complicated or you have someone manage your site, make sure you have meta tags in your site and set up best.
Interested in having your site checked out, email me.

css2

First-Child CSS Tip To Fix Margins

I have done many websites in the past and had to set specific attributes for multiple items that were really the same item but because of its positioning, I couldn’t use all the same values.  What do I mean with this?

Let’s say you have a column with 4 blocks in it.  We are gonna say it is the side bar and you have the following items in it:  Specials, Product of the Week, Upcoming Events and Sponsored Ads.  I am referencing a site I did for VIP Billiards.

first-child1

Now in that side bar, you want spacing between each section.  So in this case, I used my <h3> tag to create the spacing and I set the value to 1.5em.  But when I do that, I feel like my spacing at the top of the column is too large.  How do we fix that in a quick manner without having to have a new class for the <h3> tag?

first-child2

Simple, we add a “first-child” to the <h3> tag.  We re-adjust the {margin-top} to 1.0em; and then add the following code:

h3:first-child {

margin-top: .5em

}

first-child4

By doing this, we give the first <h4> tag in that column only a .5em margin at the top and give the spacing for the rest a 1.0em margin.

Now we have nice spacing between the navigation bar and the column as well between each section.  And because we added a “first-child” for the <h3>, it works for any section that has an <h3> tag.

first-child3

Using a first-child can fix other issues as well.  Maybe you want to set the spacing between a few images but you don’t want a margin to the left on the first image.  Use a first-child for your images.

Now if we can use a first-child, then that should mean we can use a “last-child” as well.  Test it out, let me know how it works for you.

Happy coding!!

-Jim

PS:  10/25/2014 – Since writing this and making minor adjustments, I re-adjusted my <h3> by adding a padding-top: 6px; and a padding-bottom: 6px; and with the h3:first-child {padding-top:0px;}.  This helped with page layout a little better than how it is written above. CSS is so versatile that there are many ways to “skin a cat”.