(Guns don’t kill people…) But Without Them, You Look Pretty Silly Yelling Bang!

After the tragic shooting in Newtown, Connecticut petitions circulated calling for gun control, something the President acted upon quickly. Appointing Joe Biden, the President asked for some common sense gun control laws, and ways to stop violence, and the ability for criminals and mental patients to not have access to them. He asked for quick action, and now congress has begun having congressional hearings on the subject.

Wayne LaPierre once said, “Guns don’t kill people, people do.” It was an attempt to scare the general public into purchasing more firearms, equating violence with the person, rather than the tool. Unfortunately for all of us, it worked, and many people who had never been gun owners went out and purchased guns for the first time. There is a belief that guns are not the problem, and I hope in this article I can address that a little, give my thoughts as I have before, and try to address the real problems.

 

The Gun Nut

I’ve heard it a lot, repeated like the anthem for gun owners: “Guns don’t kill people, people do.” It drives me crazy anytime I hear it because it comes with an air of arrogance from most gun owners, that somehow they are defending our freedoms, or being freedom fighters, and defenders of the constitution by exercising their second amendment rights. The belief being that somehow, if people stopped buying guns, or using them, the second amendment would simply vanish. Not only is it arrogance to assume you are somehow protecting my rights, but egotistical, and self-centered, as if you are so important that God himself granted you this task.

What really gets me is the nature of the arrogant behavior, of what I would call “The Gun Nut.” I’ve accepted that there are people who live normal lives, get up, go to work, come home, eat dinner, go to bed, and get up in the morning to do it all again, and they own guns. They are normal responsible gun owning people. They don’t treat them like toys, they don’t bring them out and show them to their friends like it’s a new girlfriend, and they don’t rub them gleefully whispering, “My Precious!” But for every normal person who owns a gun, there is the antithesis, an asshole, a nutbag, who brings his gun out whenever the neighbor kids visit, or takes pictures with it, standing next to the Christmas tree, usually posing like some douchebag who thinks he is Rambo.

It is especially pathetic to see pictures of people on Facebook holding guns talking about how sexy they are, or where they’d like to stick it. You know who you are! Guess what guys, and gals. There is nothing sexy about a gun. It’s not a toy, you open on Christmas screaming your head off like a four year girl with a new dolly. It’s not a new car, you just have to take out for a spin. It’s a weapon, its sole purpose is to kill. That’s right people, forget the bullshit, forget the nonsense, stop convincing yourselves it serves some higher purpose. No, sadly, its only purpose is death.

Ever since the shootings in Newtown, I have had many conversations with people about guns, gun control, the constitution, and all the other stuff that comes with fucking with peoples toys. I saw a great quote the other day from someone that said: “Boys never really grow up, they just get bigger.” And it occurred to me, for most men this is absolutely true. I myself at times, act like a big kid, but I don’t run around with a plastic gun in my hand like I did when I was a child. What I realized is that most men have just upgraded, that they think no differently, having the mind of a child, guns were fun as a kid, and they continue to be fun now.

If this is true, and it most certainly is for most men, then why are these kinds of people even allowed to purchase a firearm? Is it simply because they are over 18 years old, so the law considers them an adult? I’m sure that makes the parents of every child shot by some moron with a gun feel a whole lot better. Now I understand the law, and I understand that when someone reaches a certain age, whether it be 18 or 21, the government gives them some privileges they would not have had as a child, although obviously in this case there are plenty of douchebag parents who put guns in the hands of small children. I recall the local news story of a small boy who was accidently shot in the face by an UZI-type gun when his father allowed him to fire it for the first time.

The gun having a tremendous recoil turned upside down in his hand as he fired, and he shot himself in the face. Do we blame the child? The parent? Apparently no one, as this was deemed to be an accident if I recall. And I wonder would this have been an accident if his father handed him a  bottle of Vodka and told the boy to drink it all? There of course, is something about guns that lead everyone to believe that if something bad happens, well it can’t be prevented, because we have to have guns! It’s nonsensical, because we don’t have to have anything. The right to keep and bear arms literally translates to the right to own and carry arms.

As I have said before, it does not say: The right to purchase a gun at Walmart, or the right to make your own gun and sell it, or anything of the sort. There is no law in our constitution that secures the right of a corporation to freely sell anything, but of course there wouldn’t be, since Thomas Jefferson himself was not a fan of corporations. No, in fact, the right of the people or militia to arm themselves is very broad, because you could take it to mean: to carry a grenade launcher, or a suitcase bomb. But I challenge anyone who thinks they have a second amendment right to carry a suitcase full of nuclear material, to walk into any federal building like all they have in there is a sandwich.

If you feel so strongly that you are entitled to keep and carry any kind of arm, then you should be able to arm yourself with anything, because according to the constitution, that’s what it says. Let’s not forget of course, that the only type of arm any person could easily carry himself when the constitution was penned was a flint lock pistol, or musket. And although the founders were short-sighted in some respects, in others I believe not so much.

 

The Comma

In the case of the second amendment, as I have argued before and will continue to, it isn’t everything. Let’s look at something like the first amendment, which is crystal-clear about its intent. Certainly if the founders wanted to be cryptic, it would have been easy to make that amendment open to interpretation, but they didn’t do that on purpose, because leaving the first amendment open to interpretation leaves it open to modification, to usurpation, and that would go against the Lockean ideal for which the constitution was based.

So why then would the founders make such an error as to leave the second amendment so open to interpretation that 200 year later, it is still a hotly contested issue for debate? They didn’t! It is only cryptic, if you need it to be, to ultimately serve a purpose. If your job is to sell guns, than you want the second amendment to be the holy grail of laws, like a commandment set in stone, handed to Moses, and brought down from the mountain. Because if the second amendment is open to interpretation, then it leads people to have to choose a side.

But I believe people are simply over thinking the issue. How simple would it have been for Thomas Jefferson to add an additional clause to the second amendment stating that the right of the people to the free access of firearms shall not be infringed. If such a thing had been added, the debate is over, but no such thing was added. Instead we have a comma. Frankly, it irritates me to no end that so much is made over a comma. So let’s have a discussion about grammar, because obviously it needs to happen.

First, during the 18th century grammatical use of the comma was almost always commonplace. It has very often been referred to as being “prolific and chaotic” suggesting that it was overused. Having said that many contend that this comma is so important that by its very nature it changes the central theme of the amendment, so let’s look at it.

 

“A well regulated militia, being necessary to the security of a free state, the right of the people to keep and bear arms, shall not be infringed.”

 

So the comma can be used in several instances, for example:

1. To separate elements in a series, i.e: The man paid for his coffee, took the cup, and drank it.
2. The comma in use with conjunction, to connect to two independent clauses, i.e: The man was strong, but he couldn’t fight off the flu.
3. It can be used to set off introductory elements, i.e: Although the man being of sound mind, he gave his money to his dog.
4. It can be used to set off “added information,” or information that can easily be removed, i.e: Although the man has never flown before, a fear of heights he gained as a child, it will soon happen when his flight arrives.
5. It can be used to separate adjectives, i.e: The tall, dark, handsome, man boarded the plane.
6. To set off quotes, i.e: As the man sat in his seat he said, “This terrifies me!”
7. It can be used merely to express contrast, i.e: The tacos were so yummy, but messy.
8. And my favorite use, to avoid confusion with a pause, i.e:  Outside, two pennies lay in the grass. The confusion being apparent, if the comma is excluded.

 

So then what usage does the comma in the second amendment have if we are to adhere to grammar? Well let’s look at it again. First if this is ordinary grammar usage we can take the first and third commas straight out. And we would get a coherent explanation: “A well regulated militia being necessary to the security of a free state, the right of the people to keep and bear arms shall not be infringed.” However, it was ratified with the commas, and there is an easy explanation why this is so.

The first comma– between "Militia" and "being"– forces the reader to search for a verb for which "Militia" is the subject. But we don’t get that verb until "shall not be infringed" at the end of the Amendment. The second comma– between "Arms" and "shall"– sets off the verb phrase "shall not be infringed" from the preceding language; it suggests that the subject for this verb phrase is not simply "the right of the people to keep and bear Arms." The effect being, "A well regulated Militia" to "shall not be infringed" is emphasized, thus the result is read as the right of militia to be armed cannot be taken away. – Yasky Brief, US v. Emerson

Now some would argue that if the over use of commas was commonplace than it doesn’t matter because if we take them away we still have something that states that the right of the people to bear arms shall not be infringed. But you must be forgetting the most important part, clause one: “A well regulated militia.” Because for that premise to be accurate, you must yank that out entirely, as it’s completely unnecessary to that interpretation.

If your interpretation is such that the amendment secures the right of the people to keep and bear arms, then the introduction of “A well regulated militia,” under example three of comma usage, is unnecessary completely, because as Tench Coxe, writing as "the Pennsylvanian" in the Philadelphia Federal Gazette, 1788 wrote: “…Who are the militia? Are they not ourselves?”

If we are to assume that it’s meant to be taken as such and there is no reason not to believe it isn’t, than the first clause again becomes entirely unnecessary to the rest of the amendment, and should only be reduced to: “ Being necessary to the security of a free state, the right of the people to keep and bear arms, shall not be infringed.” And if we read it like this, its interpretation fits a whole lot better with the NRA interpretation than what is actually in the amendment.

The problem we have with this scenario is that it would have been easy to do this, after all, its easier to read, less to write, and easier to understand. But the founders did not do this, Jefferson did not write it as such. Because of this, and the usage of proper comma grammar, we can deduce the introductory element: “A well regulated militia” is necessary to the overall amendment, and the first and third comma clauses are not meant to be separated at all. Because of this, and the fact that Thomas Jefferson was an accomplished author, lawyer, statesman, and teacher, we can assume he knew what he was doing with comma usage.

I would also ask everyone interested in knowing what a militia in the context of the 18th century, actually was, should read the Madison Resolution, June 8, 1789. As it clearly documents what a militia is, and it’s not a gun toting citizen, or an army of gun enthusiasts. It should be noted that these discussions were the initial beginnings of state ratification of the second amendment, and it’s clear in these meetings the defined intent of the militia was in the absence of a standing army, a group of armed, well trained, citizens would exist for the common defense of the people. So we know that it’s clear the intent was that a militia was necessary only in absence of a standing army for defense, and as I have already explained, and what is backed up in the documents, the militia being necessary would be allowed to be armed.

 

Transcendent Purpose

Jefferson was among other things a philosopher and aware of many of the teachings of philosophy. One of which is transcendence. Transcendent purpose teaches us that objects serve a purpose that can go beyond the purpose for which they are created. We have invented many things throughout our history, all of which were designed with a specific purpose in mind. Objects don’t merely appear without a purpose only to be given one. It is this extraordinary usage for which the philosopher would call transcendent purpose. Because for example a hammer could be used to open a bottle, rather destructively, however we invented a bottle opener to serve this purpose, thus the hammer’s purpose is to be a hammer: to imbed nails into wood, or other materials for the purpose of building something else. And the bottle opener, can I’m sure, be used to jab into the flesh of an apple or yank a staple from a piece of paper, but that is not its purpose.

It is inherent in the object the purpose for which it was created. A table is a table, and a chair is a chair, one does not sit on a table, for which a chair would serve its purpose. And so when someone repeats the statement so derisively coined by Mr. LaPierre, “Guns don’t kill people, people do,” they fail to understand the nature of the nonsense of such a statement. For what purpose do guns exist, if not to kill? Like the hammer, you could open a bottle with a gun, and like the hammer, destruction would ensue, however like the hammer, that is not its purpose.

When I talk to others who get defensive over the issue of guns and the second amendment, it is most often when I talk of banning something like the assault rifle that someone objects stating, “Banning guns won’t stop people from being killed,” which is usually followed with something like, “You could kill someone with a kitchen knife, should we ban all knives?” And again, these statements are nonsensical because although the knife can certainly be used to kill someone, that is not the purpose for which it was created. The problem that any gun owner should consider seriously, is not whether any other object can be used to kill, serving an alternative or transcendent purpose, but rather that a gun is used to kill serving the purpose for which it was designed.

Now what I have realized lately is that you cannot have a serious conversation with a gun owner about gun control, because like the blinders of a religious person, the gun being their God or false idolatry, gun control becomes like the science that is telling them evolution is real, the Earth is 4.5 billion years old, and there is no magic invisible sky daddy watching over them. They have no choice but to argue in a contradictory nature, because to rationalize the reality that they own something that was created to kill and that it could be used to kill, is too much, instead merely spouting off regurgitated NRA bullshit like its scripture.  If the gun is not meant to kill, but only meant to be for defense, than it has a transcendent purpose, however this fallacy presumes that you negate its original purpose.

In effect, the NRA would have you believe that bushmaster .223 semi-automatic assault rifle you own is equivalent to a cap gun that merely maims its victims. Now do I believe everyone believes this? Absolutely not, just like I know not everyone buys the bullshit that comes out of the mouths of creationists. There are plenty of people out there who know exactly what their gun can do, and are willing to do it, if necessary, and that is the crux of the problem, now isn’t it? Because one cannot have a serious debate about violence in relation to guns and with a serious face, state the necessity of guns as a means of stopping violence, when the ability to dissuade said violence is predicated on an act and mindset that is and would be violent.

So we are left with a problem, and it’s not one that anyone who owns a gun would like to talk about. That just the existence of a gun, creates an air of violence merely by its being, because its purpose is not and should never be consider transcendent, because a death caused by a gun, is a gun that has served the purpose for which it was created.

So what is the answer then?

 

Are You A Smoker?

I don’t believe you could get rid of every gun in existence without a prohibition that turns the gun into a public offense, as for example, public smoking has become. A well marketed campaign could be used to simply ostracize those guns owners into turning over their guns, or destroying them merely by the act of making gun ownership unsavory. If there people that can convince someone to buy a car they don’t need or a widget they’ll throw in a drawer and never use, and there are, then we can presume that in the right hands anything can become an object of public dissent. In a matter of a decade, gun ownership would go down to the point where you just never hear about it, or see them. But while supply and demand would certainly begin the slow reduction of gun sales, it would not stop the intent of a person who is crazy to walk into a store and still buy a gun.

For this we need laws, and that is what these hearings occurring in Washington now are meant to address. How do we make things safer for everyone without infringing on the rights of others?

I encourage people to watch these hearings as there is a lot of stuff from both sides, although Mr. LaPierre is particularly loony and by himself an argument for gun control.

I was particularly moved by the statement of former congresswoman Gabrielle Giffords, who was shot in the head by a nutcase. With a lot of difficulty, in her brief statement, she made her words clear: “Speaking is difficult, but I need to say something important. Violence is a big problem. Too many children are dying. Too many children are dying. Too many children. We must do something. It will be hard but the time is now. You must be bold. Be courageous. Americans are counting on you.”

I was also recently appalled to learn that at the Legislative Office building in Hartford, hearings on gun control were being discussed, when a father of one of the slain children at Sandy Hook elementary stood and asked, “Why Bushmaster assault-style weapons are allowed to be sold in the state?” only to be heckled by some gun nuts. “The Second Amendment!” they shouted in response. Neil Heslin, the slain child’s father went on later to say, “There are a lot of things that should be changed to prevent what happened. That wasn’t just a killing, it was a massacre.,” holding a portrait of his dead son in front of him.

I have a particular problem with assholes with respect to someone who is grieving. Not only is it coarse, and crude, it is disrespectful beyond anything I could imagine. I am and have always been an atheist. I may take jabs at religion, but there are things I do not do, and one of them is most definitely being disrespectful to the grieving. It’s unconscionable that someone would do such a thing. In my life I have known many people who have died, and I have been to many funerals, much of them being in a church with a mass or other ritual for the dead. Never once have I ever laughed or cursed, or heckled someone for their beliefs during such a service, nor would I. Why? Because I’m a civil human being with thoughts, emotions, and empathy.

If these asshole hecklers had a child die from stomach cancer or something, would it be equally appropriate for that father to then heckle the asshole because his child died? “HAHA! Cancer! Seriously, who still dies from that?” It’s not nor will it ever be appropriate, and the fact that this even happened shows an utter disconnect these kinds of people have with reality, because in their world a piece of steel is more valuable than a human life, and as long as this is true, you can never have a serious discussion, because that requires that both sides are sane.

 

In Conclusion

In conclusion, the argument that gun nuts make, that argue the contention of rights over life, devalue the right of life, the only right for which there is complete absolution, as John Locke would say. We cannot address the notion of violence as a serious reducible thing without a reduction in guns, because by their very nature it is these kinds of people who harbor violent intent, whether they would admit to it or not. The two are synonymous, thus violence and guns are on equal footing, one exists because of the other, and one cannot be reduced without reducing the other.

With respect to reducing the nature of the violent man, more people need to be screened for mental illness, and these people should never be allowed to purchase a gun. And by that same token, a reduction of this would by its nature be a reduction in guns, because the violent nature of gun violence at the hands of the violent would become unnecessary, as such those acts of violence would cease, and those guns would also thereby cease.

You can control guns, and you can control violence, but its not something that can be fixed easily or quickly, and must be addressed seriously over the next few decades. If we are to be a nation of people who want to be known taking the moral high ground, we must first address our fascination with violence, because we cannot hope to convince the world that we are above reproach, and a nation to be admired, when we cannot protect even the most innocent of our population from senseless death, and a need to be violent.

 

“They say that 'Guns don't kill people, people kill people.' Well I think the gun helps. If you just stood there and yelled BANG, I don't think you'd kill too many people.” ― Eddie Izzard

Read More

The New Standard: Some Tips and Tricks of Web Design

I recently started helping build a website for a friend of mine, and I thought it might be fun to talk a little bit about web design, HTML5 and CSS. As with all modern web browsers, HTML5 and CSS are the standard for markup language used on the web today. The best part about it is that with the new elements that have been added thing that you could only achieve with scripting before are pretty easily done just with using the language the way it is.

The Website I’ve been working on for reference. In case you are interested, check it out: The Hunter Supply Outlet

The Old Days

In The Old Days you could build a webpage in a few minutes slapping just a few lines of code together. It wasn’t pretty but it never needed to be. Back when I first got interested in the Internet, most of the world wide web was covered in black text on a white background.

It was pretty basic, but it worked well because people never expect anything more. Soon, images became part of the web, and web pages were flooded with them, but not always in a good way.

The web started to look like a bad bulletin board system, with lots of advertisements, little content, and a whole lot of nothing. But standards began to emerge and people started obeying them, and real development began to take hold. Soon the web began to look amazing, and people took notice. It was no longer the ugly little place where you got your porn anymore, it could be used for some pretty amazing web sites, and now in the Web 2.0 years we have loads of competing browsers, but a standard that most of them stick to, and thus a designer can design most of his code once, and it will remain compliant throughout.

Of course this wasn't always the case, often times you would code something that worked great in Internet Explorer for example, and it would look terrible, or not work entirely in Netscape. But those days are pretty much gone, and with them a lot of the old code has become defunct. In this tutorial of sorts I will show you some simple techniques to brighten up your website with Cascading Style Sheets, and the newest standard of HTML markup code. Hopefully I can pass along some tips that will make it easier for even the greenest web coder to build something pretty nice.

Basic Tools

First you are going to need something to write your code in, I’d recommend getting a WYSIWYG (What you see is what you get) editor. These editors will allow you to write the code in HTML if you choose, or design the site using a more manageable interface, one where you can see the elements as you put them in. The best kinds of editors are those that allow you to do both. My preference is Adobe Dreamweaver. Coming in at around $399, it can be expensive for your average person, especially someone who just wants to learn how to build their own website for the first time. However, it’s one of the more advanced editors I've used.

There are tons of free or low cost editors out there. Three free editors I would recommend are: Kompozer, Alleycode, and Amaya. The reason I use Dreamweaver is that I do a lot of coding that is not always in HTML, sometimes its in JavaScript, or PHP, and Dreamweaver easily allows me to transition into that. Also it’s one of the first WYSIWYG editors I actually used, having originally coded everything in Notepad or Vi, so I like to stick with what I know.

You are probably going to need some kind of image editing software as well. I use Adobe Photoshop for everything. This is also extremely pricey at $699 and can be terribly difficult for the average user to learn, however its without a doubt the most powerful image editing tool in existence. If you don’t have the $699 to fork over try: Gimp as an alternative, it’s free and it has many of the same features as Photoshop.

You’re going to need a webserver to test your code as well. Now you can purchase space just about anywhere, it’s usually inexpensive and you get a lot of it. GoDaddy comes to mind as a good choice, but Bluehost is also a nice hosting company. You can also run a local webserver if you are so inclined, however, remember, you will have to configure all the elements you might need to run your code. If you plan on basic HTML then a standard webserver like Apache should work just fine. Apache is really powerful, and you can configure it to load additional plugins that will make your website much more powerful, but it requires more complex configuration, so choosing the inexpensive hosting may be a better option.

You are going to need a modern browser. This means if you are still using Internet Explorer 6, 7, or 8, it’s time to update. I personally use four browsers in windows for testing purposes: Chrome, Firefox, Opera, and IE. On my mac, I also use Safari. I wouldn't recommend Safari for windows, without the security of the mac, it’s been pretty exploitable, and having it is just overkill. My personal recommendation, and preferred choice is Chrome or Firefox, I use them both, although Chrome a bit more.

Also Chrome comes with a built in Inspection tool for looking at code, learn it, use it. You can alternatively download the firebug extension for Firefox.

A Basic Tutorial

Now that you have everything you need, let’s start out by trying some basic HTML.

Each webpage will need to be opened with an <HTML> tag and closed with a corresponding </HTML> tag. In fact, with the exception of a few, all tags must be closed. I will explain further along as I go.

So our initial page should look like this:

<html> 
<head> 
<title></title> 
</head> 
<body> 
</body> 
</html>

You will see in the example above I have opened four tags, and have closed four tags. These four tags are all you need to start your HTML page. The first tag is the HTML tag. This tag let’s the browser know that the language of the page is HTML. The second tag used is HEAD, and this tag let’s the browser know all the elements that describe the page. The third tag is the TITLE and it’s used inside the HEAD tag because it’s used to describe the title of the page. The fourth and final tag is the BODY, and it’s used to display all the content of the page. This is essentially the location where everything the viewer sees on the page, will be located.

You notice every one of these tags is opened, and then closed. If you forget to close a tag, the browser will not display the tag properly, and leave the tag open as text instead. In this case, as these are required elements of a page, it can render the page unreadable.

So this won’t really show you anything special about HTML, so we need to add something to this code to make it actually display content. So first we need a title. We accomplish this by placing our title in between the opening and close TITLE tags. And then we need something for the body, in this case, I will use a simple line of text to show you what it would look like. You will notice, text by itself requires no special tag, though there are some that can be used to add style.
Click Here to open, or Hover over to see a preview!

<html> 
<head> 
<title>This is our example title</title> 
</head> 
<body> 
This is our example body text. 
</body> 
</html>

You will notice in the preview that you cannot see the title, that is because the title is hidden from normal view, and can only be seen normally on the title of your browser window.

Now that we've created a very basic HTML page, we can add an image to see what that will look like. To do this we need to make use of the IMG tag. The IMG tag is self closing, and is one of only a handful that do this. Although it is unnecessary in pure HTML, I will add the closing / to it for conformity. I’m also going to use the BR tag to display a line break between the text and image. So it should now look something like this.
Click Here to open, or Hover over to see a preview!

<html> 
<head> 
<title>This is our example title</title> 
</head> 
<body> 
This is our example body text. 
<br/> 
<img src="examplebird.gif" />
</body> 
</html>

There is plenty of more you can do with the IMG tag like add height and width parameters, or make use of the alt parameter to add display text to the image search engines can read. But for this basic tutorial, its unnecessary.

The next thing you might want to do is add some color to your page, maybe either by adding a color to the background or changing the color of the text. Either is an easy change to make, and I’ll show you examples of both. But first you have to know a little something about how colors are handled with a web browser. The W3C standard require the use of HEX Code to display corresponding colors. You can find a list here. I’m going to make a change to the color of the text and the color of the body in the example below.
Click Here to open, or Hover over to see a preview!

<html> 
<head> 
<title>This is our example title</title> 
</head> 
<body bgcolor="#00FF00" text="#FF0000"> 
This is our example body text. 
<br/> 
<img src="examplebird.gif" />
</body> 
</html>

Now a webpage just wouldn’t be complete without some links. So the first thing to do is choose the color we want to use for the link color, then we can add a link to the body by either linking around text or linking around an image. I’m going to create links for both.  For the purposes of the example, I will also add the target parameter so you can see how we can open a link into a new window. The use of the A tag is used to start a link, the parameter HREF is used to reference the actual url itself, and the TARGET parameter is used to specify a target window. As you can see we close the A tag around the linked text or image we have created.
Click Here to open, or Hover over to see a preview!

<html> 
<head> 
<title>This is our example title</title> 
</head> 
<body bgcolor="#00FF00" text="#FF0000" link="#FF00FF"> 
This is our example body text. 
<br/> 
<a href="http://www.wwf.org" target="_blank"><img src="examplebird.gif" /></a> 
<br/> 
<a href="http://www.wwf.org" target="_blank">www.wwf.org</a> 
</body> 
</html>

That’s basically it to creating your own simple webpage. Now obviously there is a lot more that can be done, but this was just a simple tutorial on how to do it. Now I could spend a lot of time and a lot of writing to show you every single thing you can do with HTML but I’m going to reserve the rest of this article for the more advanced stuff like CSS, because its really the stuff that makes the web so beautiful today. If you are really interested in an in-depth lesson on HTML, I recommend W3Schools.com tutorials, as they have everything you will need to build your own website.

Cascading Style Sheets

Probably my most favorite part of the modern web are the CSS (Cascading Style Sheets) element. It is by far the best way to modify HTML outside of using a CMS (Content Management System) like Wordpress to manage your website. Don’t get me wrong, if you are going to blog, or require something that will constantly need to be updated, you should use a CMS. If you intend to have a hundred pages on your website, you should definitely invest in something that is a little more dynamic, because although HTML can be powerful by itself, it is very static in nature, even with the use of something like CSS.

Using a CMS that relies on something more advanced like PHP to power your site gives it that dynamic ability to change on the fly. But understand that it is not for the faint of heart. Learning PHP can be a handful, luckily something like Wordpress is fairly easy to use, because it has a backend dashboard that does most of the work for you. It’s essentially plug &play. But even Wordpress which is designed in PHP still relies on static code in the form of HTML and CSS that display its pages, because even though the pages are created dynamically, the code that is displayed is of a static nature.

So I’m not going to go any further into the use of Wordpress or any other CMS, you can Google that stuff and learn if you like. I’m here to talk about the Style elements.

So what does styling actually do?

Well the use of Style sheets can add a style to an element that already exists in HTML but may lack the ability by itself, or expand that style globally to all elements more easily.

In the example below, I’ll show you how to basically style text you are going to add to a page by adding the style to the <P> paragraph tag so applies style to all text within that element.
Click Here to open, or Hover over to see a preview!

<html> 
<body style="background-color:#C63;">
<h1>These are some styles and colors.</h1>
<p style="font-family:arial;color:#C9F;"> 
I've styled this text with the arial font in a light purple color.</p>
<p style="font-family:Georgia;color:#CCC;"> 
And here is the Georgia font on gray.</p>
<p style="font-size:12px;">This text is 12 pixels high</p> 
<p style="font-size:16px;">This text is 16 pixels high</p> 
<p style="font-size:20px;">This text is 20 pixels high</p> 
<p style="font-size:24px;">This text is 24 pixels high</p>
</body> 
</html>

That is a simple fun way to modify the style of text. But it gets even way more advanced than that. Text alignment is another thing I like to have fun with because it allows me to create a page that has divided sections that exist in all areas of the page. Without the ability to align the text element, text would all be aligned to the left side of the page. So even if you have an element that resides on the right side of the page, the text within that element may be aligned to the left within that DIV tag. By aligning the text however you want you can do some pretty awesome stuff with it. See how examples below of text alignment and padding.
Click Here to open, or Hover over to see a preview!

<html> 
<body style="background-color:#FFF;">
<h1>Now for some alignment!</h1>
<p style="text-align:left">As you can see this text is aligned to the left.</p> 
<p style="text-align:center">As you can see this text is aligned to the center.</p> 
<p style="text-align:right">As you can see this text is aligned to the right.</p> 
<p style="padding-left:160px">Now here I'm going to pad the text 160 pixels from  the left so it's not quite in the center.</p> 
</body> 
</html>

Another element you see used a lot is the text-decoration style, which specifies how the text will be stylistically displayed. Although this can be used to stylize normal text, it is more effectively used in linking URLs because it allows the user to create links that have no underline by default. You can also use the effect of coloring the link, a great replacement effect for the normal colored, underlined, HTML link element.
Click Here to open, or Hover over to see a preview!

<html> 
<body style="background-color:#FFF;">
<h1>Text Decoration</h1>
<p style="text-decoration:blink">Blinking(Doesn't work in Chrome)</p> 
<p style="text-decoration:line-through">Line Through</p> 
<p style="text-decoration:overline">Overline</p> 
<p style="text-decoration:underline">Underline</p> 
<p style="text-decoration:none">None</p> 
<a href="#" style="text-decoration:none;color:#F00">Undecorated Colored Link</a> 
</body> 
</html>

So now that you've seen some of the cool things you can do with CSS, I’m going to show you some really cool advanced techniques that you can use, as well as give you some tips and tricks on web designing with it.

The Good Stuff

Now CSS is seriously awesome, if you haven’t realized it by now. But I’m about to show you some of the coolest things you can do with it, you might not have even realized.

Gradient Effects

So you may or may not have seen this trick before, but its surely a good one and one of my favorite tricks to do with pure CSS. Creating gradient backgrounds used to be one of the toughest things to do, reserved mostly for those with an image editor like Photoshop, but now it can be achieved merely with a little CSS Code in the background.

The only issue you will note is that this feature is implemented differently in each browser type, yes slightly annoying, but it does work on all modern browsers. If someone manages to use a browser to view this without support, they will instead get displayed a violet solid-colored background. (If you are still using something like IE 6 or IE 7, get something more modern. You are denying yourself a vibrant web experience. And you probably cannot see many of these elements.)
Click Here to open, or Hover over to see a preview!

<html> 
<body>
<style type="text/css"> 
.gradient { 
background:#E01BD3;
background:-moz-linear-gradient(top,#00FF44,#F6FF00);    
background:-webkit-gradient(linear,left top,left bottom,from(#00FF44),to(#F6FF00)); 
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FF44',endColorstr='#F6FF00');  
color:#000000;  
height:auto;  
padding:50px;  
} 
</style> 
<div class="gradient" style="height:70%"> 
<h1>Background Gradient</h1> 
<p>CSS Gradient Green to Yellow</p> 
</div> 
</body> 
</html>

Text Shadowing Effects

So I know why I love these effects so much. It’s because again, these used to be relegated to image editing software like Photoshop, and now you can apply them to your elements with CSS. Like gradient, these effects no longer require expensive software to produce, and look equally as unique and amazing. Be warned, some of this may or may not work with Internet Explorer. To be sure, you should be using the latest version, version 10 anyway.
Click Here to open, or Hover over to see a preview!

<html> 
<body style="background-color:#333"> 
<p style="background-color:#CFC;text-shadow:2px 3px 3px #000000;font-size:26px;font-family:'Times New Roman'">Drop Shadow</p> 
<p style="background-color:#3C0;text-shadow:-1px -1px 1px #fff, 1px 1px 1px #000;color:#993366;opacity:0.3;font-size:26px;font-family:'Times New Roman'">Embossed</p> 
<p style="background-color:#000;color:#fff;text-shadow:0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #ff2d95,0 0 30px #ff2d95,0 0 40px #ff2d95,0 0 50px #ff2d95,0 0 75px #ff2d95;letter-spacing:5px;font-size:26px;font-family:'Times New Roman'">The Night Life</p> 
<p style="background-color:#CFF;color:#fff;text-shadow:1px -1px 3px white, 0px -2px 6px yellow, 0px -2px 8px #ff8000,0px -8px 10px red;font-size:26px; font-family:'Times New Roman'">Flames</p> 
<p style="background-color:#9F6;color:#fff;text-shadow:0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555,0px 6px 0px #444,0px 7px 0px #333,0px 8px 7px #001135;font-size:26px;font-family:'Times New Roman'">3D Text</p> 
</body> 
</html>

Icon effects

An interesting feature I have used before is Icon effects. You can link icons directly with their file type in CSS, or you can stylize lists. It’s a tool that comes in handy when you want to add something special to some otherwise ordinary text. There is a slight issue when aligning an icon to a list, if the icon is too big. The way to fix this I have found is to reduce the size of the icon to exactly 16x16px. Then it’s super important you remove the list-style by setting its type to none. If you do not do this, it will display the default type for the list, in this case being that its an unordered list, it defaults to a dot.

Another thing to remember is that the default style has to be removed, otherwise it won’t line up properly, image to text. When you use an image as a list icon, the image is always slightly higher than the text. This can be rectified by setting the background-position of the image. Once this is done, padding-left can be used to modify the text position. Doing this is tedious work, which is why you can use the numbers I've already figured out.
Click Here to open, or Hover over to see a preview!

<html> 
<body> 
<style type="text/css" media="screen"> 
a[href$='.zip'] { 
background:transparent url('images/icon_zip.gif') center left no-repeat; 
padding-left:25px; 
} 
ul.social { 
list-style-type:none; 
padding:0; 
margin-left:0;
}
.social li { 
background-repeat:no-repeat; 
background-position:0.1em; 
padding-left:1.5em; 
}  </style> 
<a href="foobar.zip">Foobar.zip</a><br/>
<ul class="social"> 
<li style="background-image:url('images/facebook.png')">Facebook</li><br/> 
<li style="background-image:url('images/gplus_variation2.png')">Google+</li><br/> 
<li style="background-image:url('images/twitter_old.png')">Twitter</li><br/> 
<li style="background-image:url('images/youtube_variation.png')">YouTube</li><br/> 
</ul> 
</body> 
</html>

Flipbook Effects

This is a cute little effect that works with most modern browsers, and it relies on almost entirely on the DIV tag, and how it is used to separate the content of the page. Basically, once you have your div tags separated, CSS is used to make each div colored separately, helping to define the separation between the tags.

By nesting the sectional div colors under the original flipbook, this allows us to create a default state for #flipbook, and a state for each #flipbook div that is nested beneath. All that is needed then is the hover effect added to the div to allow movement between the tags when the mouse is moved over it.

Lastly, the overflow:hidden property is used to clip and hide any content that is not the active div tag. While hovering over the link below will show you the page, only by clicking it can you fully experience the glory.
Click Here to open, or Hover over to see a preview!

<html> 
<style type="text/css"> 
#flipbook {width:500px} 
#flipbook div {height:50px;overflow:hidden} 
#flipbook div:hover {height:300px} 
#red {background-color:#FF0000} 
#green {background-color:#00FF00} 
#violet {background-color:#FF00FF} 
#yellow {background-color: #FFFF00} 
p {color:#000000;font-weight:bold} 
</style> 
<body> 
<div id="flipbook"> 
<div id="red"> 
<p>This is the color red. Hover over me to see what happens.</p> 
<p>This is the color red. Hover over me to see what happens.</p> 
<p>This is the color red. Hover over me to see what happens.</p> 
<p>This is the color red. Hover over me to see what happens.</p> 
<p>This is the color red. Hover over me to see what happens.</p> 
<p>This is the color red. Hover over me to see what happens.</p> 
</div> 
<div id="green"> 
<p>This is the color green. Hover over me to see what happens.</p> 
<p>This is the color green. Hover over me to see what happens.</p> 
<p>This is the color green. Hover over me to see what happens.</p> 
<p>This is the color green. Hover over me to see what happens.</p> 
<p>This is the color green. Hover over me to see what happens.</p> 
<p>This is the color green. Hover over me to see what happens.</p> 
</div> 
<div id="violet"> 
<p>This is the color violet. Hover over me to see what happens.</p> 
<p>This is the color violet. Hover over me to see what happens.</p> 
<p>This is the color violet. Hover over me to see what happens.</p> 
<p>This is the color violet. Hover over me to see what happens.</p> 
<p>This is the color violet. Hover over me to see what happens.</p> 
<p>This is the color violet. Hover over me to see what happens.</p> 
</div> 
<div id="yellow"> 
<p>This is the color yellow. Hover over me to see what happens.</p> 
<p>This is the color yellow. Hover over me to see what happens.</p> 
<p>This is the color yellow. Hover over me to see what happens.</p> 
<p>This is the color yellow. Hover over me to see what happens.</p> 
<p>This is the color yellow. Hover over me to see what happens.</p> 
<p>This is the color yellow. Hover over me to see what happens.</p> 
</div> 
<div style="float:none;clear:both;height:0;"></div> 
</div> 
</body> 
</html>

Rounded Corners

One of the coolest little tricks you can do with CSS is rounded corners on windows. Now of course this feature is supported differently by each browser, and you can forget IE, without external help in the form of a behavior file. I’m unsure if IE9 supports a built-in function for rounded corners, although I’m sure IE 10 will. But the trick to making this work is border-radius property that is now built-in to CSS3. Chrome and Safari use –webkit and Firefox uses –moz, but both support it. As far as I know, Opera 10.5+ supports CSS specifications directly and do not require the additional prefix to operate.
Click Here to open, or Hover over to see a preview!

<html> 
<style type="text/css"> 
div { 
border:2px solid; 
padding:10px 40px; 
background:#8CBF75; 
width:300px; 
border-radius:50px; 
}
.roundup { 
-webkit-border-radius:50px; 
-moz-border-radius:50px; 
border-radius: 50px; 
} 
p {text-align:center;color:#ffffff} 
</style> 
<body> 
<div id="roundwindow" class="roundup"> 
<p>Rounded Corners!!!!!</p> 
</div> 
</body> 
</html>

Some things to remember, and some helpful tips

• Always have a good grasp of the properties you are working with, its fundamental to understanding how everything will work together. So if you are unsure, study up, there is a ton of knowledge out there, and Google is your friend.
  
• Until you become an expert in coding, I recommend you always comment your work. I know it seems kind of lame, right? NO! Commenting is extremely helpful in determining your place, knowing where something should go, or just readability. It’s also very helpful to others who would like to know how your did something, or why you did it. If you are just beginning, it can be a valuable tool to figuring out how you did something, if you leave and come back.
  
• Now one thing I did not talk about, is inline coding. You will notice in all my examples, I've used it. I don’t recommend it. I only did it to show an example of what the code looks like. Instead, you should take all your CSS code, everything inside the <style> tags and instead create a .css file and link to it from within your <HEAD></HEAD> tags. I like to put all my CSS into one common file called common.css and link to it. An example of this would be: <link rel="stylesheet" type="text/css" href="css/common.css" />
  
• Try to make your code as compatible as possible. It should work with all modern browsers, I would ignore IE 6, 7, and 8, as they lack compliance and diverged off using their own markup at times. Newer versions of IE, especially version 10 are standard compliant, meaning code that works on Chrome and Firefox should work with IE 10 just fine. Having said that, test, test, test! Just because it works great in your browser does not mean everyone will be so fortunate.
  
• Now some people will recommend to you that you build code for older browsers, text-based browsers, or just the random 1%. Do it if you want, but remember it usually means doubling, or tripling, or even quadrupling up on code. So when I write something, I target around 90% of people, and hope that’s good enough.
  
• Try to validate your code if you can. You can do this by visiting the CSS-Validator run by the W3C. If your code is badly written, it can cause all sorts of problems for browsers, so validate it. It only takes a few minutes and it can be an invaluable resource.
  
• When you're building a website, try to keep everything well organized if you can. I find it makes things a lot easier to find. Keep all your images, scripts, and stylesheets in separate folders, and just link to them from your pages.
  
• When creating new style sheets, use grouping to combine elements that have the same properties and separate them with a comma. For example: h1, h2, p, div { color:#000000;text-align:center}
  
• Figuring out the height and width of particular elements can be frustrating, but take the time, do the math and remember that when calculating the width of something be sure to include the border, padding, and margins. Width constitutes the whole, not just the parts.
  
• Get opinions, its important. Knowing how easy it is for you to navigate your code is worthless, get friends or family to test your code and ask them how easy it is to navigate. If they have difficulty, chances are most people will. Not everyone is an expert, assume they are not, do not over complicate things when you don’t have to. Simplicity is often overlooked and under used. Whenever possible, do not intentionally use an element that does not bring value to your page.
  
• Content heavy sites are great for search engines, and people like them too, however giant blocks of text are hard to read if your color scheme is terrible. Validate your color contrast and fix any errors you find, of course you want to have way more elements than errors.
  
• With the use of styling, you can now use almost any font on your website. In the old days, you were limited by the fonts that windows supported, this is no longer true. Take advantage of the all the available free fonts on the web, especially in the Google webfonts. Through the use of the @import function in CSS or the standard link through HTML, you can now include a link to most web-accessible fonts, and just style with them as part of the font-family.
  
• If you must support IE specific styles, do so using the conditional comments <!—[if IE]> <![endif] –> You do not want to build an entire site and try to support all the differences in IE, so instead create a site using compliant standard styles, and then using the conditional comment, create a single style sheet for IE, and load it that way.
  
• When setting link states, the order must be maintained. For whatever reason, it’s a requirement so don’t forget it: a:link, a:visited, a:hover, a:active
  
• Understanding and remember containment height differences is important. Know that when you use CSS to specify a height of 100%, it actually refers to the container’s height, all elements within would then need to be specified to 100% as well. So the easiest thing to do is rather set the hierarchy of container height by specifying the outermost first like so: html, body { height: 100%} It’s also important to remember that the container should then be set to a minimum height of 100% as well to prevent overflow. Do so by specifying the elements with {min-height:100%}
  
• Use a CSS Reset style sheet whenever possible to help maintain cross browser compatibility. Doing this will reset all values to 0, so they may then be specified by your CSS.
  
• Mobile browsing is taking off, whenever possible try to support them by creating a style sheet that offers styles that can be browsed on a mobile platform.

Final Thoughts

Remember that designing a website should take you more than 5 minutes. Do not go into it expecting a masterpiece an hour later. It can take weeks, even months to develop a well designed site. As I suggested before, a CMS is a good solution if you need a dynamically updated content system, and there are many to choose from. You should also not discount the use of templates for making life easier. It’s often unnecessary to spend 50 hours coding something someone else has already done for you. If you find something you like, use it.

I should also say that the use of CSS to stylize your content makes maintaining a site a lot easier, if you contained the CSS to single linked .css files, as I suggested earlier, and it has the benefit of allowing you to make one code change, that has a global effect, so don’t discount its value. Global changes are much more effective than local changes, and anytime you can change one thing and have it affect the whole site, the better off you will be, because ultimately you will spend less time coding. But you should not go into this believing it will be easy, its not, if it were, everyone would be a web designer.

Read More