Web Concepts

Do you know the different between padding and margins in CSS web site design?  That was the very interesting question posed to me via e-mail by one of the great Lunarpages web hosting customers, yesterday.

I have trouble telling the difference between what padding is in CSS code and what the margin is, when I set both around a div or class.  Could you explain?  Thanks!

The quickest rule of thumb I can share to tell the margin and the padding apart is very simple.

The margin is always the space outside of the element you are working with, and padding is always inside the element you are working with.

What is Padding?

The padding in CSS terms is there to clear a space around the inside of an element.  Think of it as having a house filled with chairs.  You then move all the chairs to the middle of the house, to make more room to move around the outside of the general “chair space”.  This empty space would be your proverbial padding.

Example Padding Use:

padding-top:10px;
padding-bottom:15px
padding-right:10px;
padding-left:15px

What is Margin?

The margin in CSS terms is defined as the space outside the element.  Looking at the house metaphor again, you could think of the margin as the empty space all the way around your house. 

Example Margin Use:

margin-top:20px;
margin-bottom:20px;
margin-right:20px;
margin-left:20px;

So, I hope this helps our confused reader and Lunarpages web hosting customer on the differences between the two and helps all of you too.  If you would like to see more CSS tutorials, tips and more be sure to leave me a comment!

© Lunarpages Web Hosting - Also, don’t forget to follow @lunarpages on Twitter!

Original post by Mitch

In CSS, the term float usually describes when an element can be pushed to the far left, or the far right, allowing other elements to wrap around it.  Think of it as how you often see things listed in the dictionary.  You have the description to the left, and the image of that thing you are looking up to the right. 

Now let me show you how you can get the most out of CSS float.

Elements on a page are usually floated horizontally, (left or right) rather than up or down.  When an element is floated, it will move as far to the left or to the right as it can.  The other elements around it will then be wrapped around it – as you can see in the picture above.

CSS Float Basics

This is the CSS code you would need to make an image float to the right, when placed in front of a block of text:

img
{
float:right
}

Floating in class or id elements!

You can also define the float tactic when working with a class or id, like so:

.picture
{
float:left;
width:110px;
height:90px;
margin:5px;
}

Stop the Floating!

Elements after the floating element will flow around it. To avoid this, use the clear property:

.text_line
{
clear:both;
}

Try playing around with floating images or boxes of text to the left or right on your own web site layout, and see what you can learn from doing so.  The best way to learn about CSS and designing is to try it yourself.  This floating technique is also often used to make menus hover to the left or right of a web page’s layout, which in turn would eliminate the need for HTML tables.

Hope this comes in handy, and stay tuned for more free CSS tutorials!

© Lunarpages Web Hosting - Also, don’t forget to follow @lunarpages on Twitter!

Original post by Mitch

I am still searching the Web for the best free template and free layout databases.  This time around, I want to tell you about Free CSS.  This web site has thousands of free web site templates you can download, customize and use on your own web hosting account.

Here are a few example free layouts I found that I really enjoyed:

Appleweb

Aquatic

Blog Division

Downloading themes from Free CSS is easy to do.

1. Navigate to the theme you wish to download.
2. Click the “Download this Template” link featured on the page.
3. Upload it to you own web hosting space.

If your a web site designer, looking to get your content featured here, you can do so via this link:

• How to Submit Your Designs to Free CSS!

Need Site Hosting? I hope you find this free web site design resource handy when it comes to creating your own web site at Lunarpages.  If you are looking for the perfect web hosting plan to get started on – I would highly recommend the Basic hosting plan.  Not only does it include unlimited disk space and bandwidth, but you can also get it for only $4.95 per month.  That is a great web hosting deal, no coupon needed.

For more free web site layouts and designs like this, be sure to check out Free CSS.

© Lunarpages Web Hosting - Also, don’t forget to follow @lunarpages on Twitter!

Original post by Mitch

WordPress is finally providing a blog text editor that they can be proud of.  As of the most recent release, I have switched from using a desktop client to write blog entries to the WordPress web site interface.  That isn’t to say it hasn’t been without problems.

One issue I saw was that the text and picture alignment (left, right, and center) was not working.   However, this is a very simple thing to fix, if you aren’t afraid to get your hands dirty with some stylesheet work.

The problem is that the WordPress post and page editor uses its own CSS code to change how your page or post gets presented.  So if it is not in place already, copy this snipit of code into each of your WordPress themes to fix your alignment problems.

Here is the code you’ll want to copy and paste into your theme’s stylesheet:

img.centered, .aligncenter, div.aligncenter {display: block margin-left: auto; margin-right: auto; }

img.alignright { padding: 4px; margin: 0 0 4px 5px; display: inline; }

img.alignleft { padding: 4px margin: 0 5px 4px 0; display: inline }

.alignright { float: right; }

.alignleft { float: left; }

Feel free to edit that as needed, to fit your own design preferences. Your theme is found at:

/wp-content/themes/nameoftheme/stylesheet.css

That should get you basically to the right spot.  Depending on the theme, stylesheet name might change. Also “nameofthetheme” should reflect the name of the WordPress theme you are using.

If you are having a hard time getting your images and content to align as you have specified in the built-in WordPress editor, this should do the trick.  Just remember to upload the changes, once you have put them in place.

© Lunarpages Web Hosting - Also, don’t forget to follow @lunarpages on Twitter!

Original post by Mitch

Depending on how many notes or messy modifications you make to your cascading style sheets, you might be about due for a little compression.  By shrinking you external CSS files, you can save the bandwidth it takes to download them, each time somebody visits your web site. 

Now how much optimization should you do?  Well, the CSS files should be small enough to load quickly, however readable enough to where you know what does what where, and why.  You have to balance size with readability.

Here are my three favorite online tools to help optimize and shrink my CSS files:

• CSSCompressor.com
• CSSOptimiser.com
• CleanCSS.com

By using any of these three solutions, you can reduce the CSS code size and make your web pages load faster.  They all allow you to choose from multiple degrees of compression, and they are all very quick too.

Related Tips and Tricks:

• Speed Up Pages by Combining External CSS
• Wizzypage – Great (and free!) Web Site Editor
• Best Web Site Speed Analyzers

&copy Lunarpages Web Hosting - Also, don′t forget to follow @lunarpages on Twitter!

Original post by Mitch

The October edition of the Lunarpages customer newsletter has been released, and is chalked full of web hosting goodness.  If you have not checked it out yet – here are just a few things you are missing out on:

• LunarNews: October 2009
• Free Flash Templates for Your Website!
• Get Started with Quantcast Tracking Support Lunarpages from Twitter!
• ID vs Class in CSS Web Design
• Lunarpages Gives Back to Customers
• Mind Maps for Webmasters
• 20 Ear Entertaining Bookmarks
• Importance of Permalinks in WordPress
• Lunar Picks – What’s Your Favorite Scary Movie?

Don’t be the last one to check it out!  Use the links above to browse through this most recent gathering of tutorials, tips, guides, news and more wrapped up for you and presented by your buddies at Lunarpages.  We are all about the treats, and none of the tricks this October.

Related Tips and Tricks:

• Ping Your Site Map to Bing
• 60+ Links to Help You Learn CSS Web Design
• Basics of CSS in Web Design

© Lunarpages Web Hosting - Also, don′t forget to follow @lunarpages on Twitter!

Original post by Mitch

I have had many people ask me what resources do I learn from, when it comes to being a modern day webmaster.  Now, there are many resources out there – but here are 60 of the best links (taken from my own bookmarks to your browser) to assist you in mastering the art of CSS in web design.

1. Perfect 3 Column CSS Liquid Layout. No Images, Cross-browser
2. CSS Zen Garden
3. 5 Tips For Instantly Writing Better CSS
4. Andy Budd CSS/Web Standards Links
5. Mastering CSS: Styling Design Elements
6. Nice CSS How-To and Template site
7. CSSDog
8. Free CSS Templates
9. W3CSchools CSS Tutorial
10. CSS-based Navigation Menus
11. CSSeasy.com
12. Divine CSS – CSS Showcase Gallery
13. SlickMap CSS
14. 15 Great CSS Galleries
15. Ultimate list of CSS hacks
16. Styling <hr> with CSS
17. 101 High Quality CSS And XHTML Free Templates And Layouts
18. 35 CSS-Lifesavers For Efficient Web Design
19. CSS Portal
20. Clean CSS – Optimize &amp Format Your CSS
21. CSS Basics
22. CSS on Delicious
23. Top 50 Best CSS Articles and Resources
24. Sitepoint CSS Tutorials
25. 20 CSS Short Hands You’ll Love
26. CSS-Tricks
27. Listamatic – Styled Lists
28. 20 Useful CSS Tips for Beginners
29. Mastering CSS: Advanced Techniques and Tools
30. UniqueCSS.com
31. 5 Popular CSS Frameworks + Great Tutorials & Tools
32. CSS Design
33. Web Design from Scratch: CSS
34. HTML Dog – HTML and CSS Tutorials
35. Open Design Community
36. Position is Everything
37. SitePoint CSS Reference
38. CSS Help Pile
39. CSS Positioning
40. 10 Creative & Rich UI interfaces & How to Create Them
41. Aeon Interactive
42. CSS from the Ground Up
43. CSS tutorial of the Float element
44. 30 Exceptional CSS Navigation Techniques
45. CSS Layout Techniques
46. 456 Berea Street – CSS category
47. Sexy Drop Down Menu w/ jQuery &amp CSS
48. A List Apart CSS Topics
49. Ruthsarian Layouts
50. W3C – Cascading Style Sheets
51. Learn CSS
52. CSS Articles &amp Resources
53. PSD to HTML/CSS & Implementation
54. The CSS Gallery List
55. Learn CSS Positioning in Ten Steps
56. Holy CSS Zeldman!
57. 30 Exceptional CSS Techniques and Examples
58. Eric Meyer: CSS
59. 50 Beautiful and User-Friendly Navigation Menus
60. CSS Navigation Magnification
61. 50+ Nice Clean CSS Tab-Based Navigation Scripts
62. CSS Tricks
63. minimalsites.com
64. HTML Dog CSS Tutorials
65. CSS Perk

Know of another great CSS tutorial or resource that you would like to share?  Don’t be shy!  Leave a comment, and add it on the list as pick number 66, pick number 67, pick number 68, and so on. 

Related Tips and Tricks:

• MooTabs Brings Pizzazz to Your Site Navigation
• Free Design Stencil Kit from Yahoo!
• All the Lunar News That is Fit to Print

© Lunarpages Web Hosting - Also, don’t forget to follow @lunarpages on Twitter!

Original post by Mitch

Adding a Cascading Style Sheet to your current web site layout and save you time and make your web site look a lot more professional in the process.  Cascading Style Sheets, or sometimes referred to as CSS, is a style sheet language used to describe how a web page should be formatted.

For example, if you wanted to make some text on a web page look bold, you might use this snippet of HTML code:

&ltstrong&gtthis will be some bold text!&lt/strong&gt

Which seems simple enough.  However, what if you want to chance the color, font, and how this text is shown in that spot across all of your web pages?  Well then your HTML in your pages becomes a rambling mess.  That is where Cascading Style Sheets come in handy.

Cascading Style Sheets allow you to, in a much more organized way, sort out how your web site design looks in a totally separate file, or chunk of code in between the head tags.    For example, let say you wanted the title of your page to be bold, green, and a different font style than the rest of the page.  In your HTML code, you would use something like this:

&ltp class=&quotmycooltitle&quot&gtthis is my page title&lt/p&gt

That tells the browser that everything within this paragraph or <p></p> tags will follow the design setup class I have defined as “mycooltitle”.  Now, in between the head tags (<head> </head>) I want you to add this:

&ltstyle type=&quottext/css&quot&gt
    .mycooltitle {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-weight: bold;
        color: #336633;
    }
</style>

This CSS code tells the web browser to apply these design settings to the class marked, “mycooltitle”.  It does three things.  It says it will use the Verdana font, the font will be bolded, and it will be colored green (#336633 is the HTML color code for a shade of green).

That is how you apply Cascading Style Sheets to your web design and layout of your own web pages.  One of the major benefits of using CSS is that it helps to separate your web site code with your design.  This way, you can change one aspect very easily in the CSS file (when or if you start to master external style sheets).  I’ll save that lesson for another day.

Related Tips and Tricks:

• Wizzypage &ndash; Great (and free!) Web Site Editor
• Inspiring Web Design
• CSS Round Box Generator

&copy Lunarpages Web Hosting - Also, don′t forget to follow @lunarpages on Twitter!

Original post by Mitch

Tell me, which of these would be easier to do? Carry ten pieces of luggage with you on your trip, or put everything into one piece of luggage?  The second, of course.  The same thing could be said for CSS files in your web site’s code. 

The use of multiple external CSS files, can slowdown the loading of a web page.  Instead of telling it, “OK, load this file now” you are telling the browser, “load this file.  Done? OK, now load this one, and this one and this one”.  The general rule of thumb when it comes to web design is to try to use three (or less) external CSS style sheets. 

Here are some rules of thumb for combining your CSS files in production from the Google Code site:

• Partition the CSS into 2 files each: one CSS file containing the minimal code needed to render the page at startup and one CSS file containing the code that isn’t needed until the page load has completed.
• Serve CSS of a rarely visited component in its own file. Serve the file only when that component is requested by a user.
• For CSS that shouldn’t be cached, consider inlining it.
• Don’t use the CSS @import rule from a CSS file. If possible, inline the imported CSS content in the main CSS file, or load the imported CSS from the main HTML document instead.

Also worth mentioning is the fact that you should make sure in your head tags, the link to the CSS files should go before any links to any scripts.  To put it in a way that everybody can understand – when your browser loads a page, it takes its time with JavaScript, because JavaScript can alter how the page looks, or the content inside the web page.  So, you should always call for your .css files before you call for the JavaScript files in your web page’s head code.

I hope this helps as a pretty good guide to shave some of the loading time from your web pages.  We might be talking about milliseconds here a lot of the time, but when it comes to delivering the fastest loading pages, every second does count, in true web site optimization.

Related Tips and Tricks:

• More Web Hosting Help, Tips and Tutorials!
• Affiliate Plan Payment Checklist
• Wizzypage &ndash Great (and free!) Web Site Editor

&copy; Lunarpages Web Hosting - Also, don’t forget to follow @lunarpages on Twitter!

Original post by Mitch

Who would have ever thought to look for web designer resources at a place called forwebdesigners.com?  It is so simple, its brilliant.  Here you will find some of the most popular resources for (you guessed it) web designers.  From fonts, to CSS resources to everything in between – it has something everybody can get something out of.  No matter if you are a web designer just getting started, or an old pro – this is a resource to bookmark.

Just to give you a little taste of what is in store, here are some of the great sites I found looking under the “inspiration” category:

• Web Creme
• CSS Inspirace
• CSS Mania
• CSS Galeries
• CSS Beauty
• Fazai38’s Inspirational Blo…
• CSS Blue

Check out the rest, and be sure to let us know about some of the great resources you find. 

Related Tips and Tricks:

• Two Great CSS Cheat Sheets
• CSS Tab Designer
• Free Design Stencil Kit from Yahoo!

© Lunarpages Web Hosting - Also, don’t forget to follow @lunarpages on Twitter!

Original post by Mitch