Website Designers and Webmasters

As one does more and more work with CSS, you start to create a CSS Reset that work well for you and your workflow. There is some important code that I always recommend having on any website, so it’s more of “CSS Starter Code” that a “CSS Reset”


/* ~-~-~~-~ CSS Starter Code -~-~-~-~ *\
|                                      |
|           by Ashton Sanders          |
|                                      |
\* ~-~-~~-~-~-~-~-~-~-~-~-~-~-~-~-~-~ */

I’ll probably update this more in the future.

Ashton

In Firefox, if the webpage you are viewing is not taller than your screen (and doesn’t need a scrollbar), Firefox will completely remove the scroll bar from your screen. This adds 20px of more space to your view space. Unfortunately, if your website is centered, this will actually move your webpage 10px to the left or right when switching between some pages.

This CSS code will automatically force a sidebar onto every page of your website; even if the scrollbar is not needed. That will stop your webpage from moving left and right on different pages:

html { overflow-y: scroll;}

Enjoy,
Ashton Sanders

You’ve probably heard “iframes are horrible with search engines.” Well, they are.

I recently had a client want me to create scroll boxes for their website so they could fit 1000+ words into a 300×457 pixel scroll box. How can I create this scroll box without the iframe? Well, you are about to find out.

CSS Scroll Box Instead of an iframe:

We’re going to use a css property called “overflow,” and by setting it to auto, it turns a normal div into a scroll box!

#scrollbox {
width:300px;
height:457px;
overflow:auto;
}
<div id=”scrollbox”> *enter endless amounts of words*</div>

So what just happened there is we assigned a div with a fixed width and a fixed height. Normally, if you had an element (ie image or text) that was too big for those dimensions, the element will be pushed larger. By adding the CSS scrollbox property of “overflow:auto” we tell the div to create a scrollbar instead of changing the size of the div.

The CSS property “overflow” does have a possible value of “scroll”, but this adds a permanent scrollbar to the bottom and right-hand side of the div even if you don’t need them. This “auto” value is great because if your content isn’t larger than the div, no scrollbars will appear. And if your content only stretches horizontally, you will only see a horizontal scrollbar!

That’s it!
Ashton Sanders

“Can you indent the paragraphs?” This can be a very dreaded request to a web designer who doesn’t know better. This may mean that you have to go through and add

&nbsp; &nbsp; &nbsp;

to the front of every paragraph… or if you are a CSS Master, you know about text-indent!

All it takes is a

<style type=”text/css”>
p
{
text-indent: 20px
}
</style>

And then all of your paragraphs look like this, everyone is happy and you are done with the website 4 hours earlier! Easiest way to intent paragraphs or text on the planet! Thank you CSS for being so cool.

-Ashton Sanders

There are many different ways to program websites. There a many different ways to program the exact same website. If you gave the same design to 100 different website developers, you would end up with 100 pages (that probably all looked fairly similar) and 100 completely different HTML code. Is it possible to say if one is right or wrong?

The Principle of Web Programming

The first principle of website programming is validating. When you make a website, it better be 100% valid. “Ah but it looks perfect in Internet Explorer…” (but it probably looks horrible in Firefox or Opera.) If your code is not valid, that means you are “doing it wrong.” Only second rate Web Developers are okay with “doing it wrong.”

With HTML, you can do just about anything! From anything as simple as changing the color of a body of text, to aligning tables around your site. But just because you can doesn’t mean you should. HTML is not a styling language, its a formatting language. You should use HTML to enter and position your text and body copy.

Cascading Style Sheets, CSS, is a styling language. It’s purpose it to add color and life to your website. If you remove your CSS from your site, it should end up being straight text with a couple pictures.

By Why Use CSS?

CSS makes life simple! Why else? Every website has certain aspects that will be the same throughout. Take headers for example: On any given website, it will have the same color, font, size, etc for the first title on every page. You could hard program that with HTML on every page, or you could just put it between “<h1>” tags, and then in your CSS document, you tell all h1′s to be a certain size, color, font, etc., etc., etc.

Then when the client comes back and says, “Sorry man, I don’t like that green, lets add 2 points of magenta to it,” you don’t have to reprogram your entire site. All you need to do is change 6 digits in one document, and the entire site changes!

And if that wasn’t enough, it keeps your website code clean! I took a site that was almost 300 lines of code (where everything was programmed in HTML). I converted most of it to CSS, and it ended up being less that 40 lines of code! Search Engines love you! It is just that much easier for the Search Engines to get the text on your site.

“Program like your client is watching you… and they understand what you’re doing.”
-Ashton Sanders