The Basics cont.

After you have decided whether or not to color your scrollbars you might consider your presentation next. I am a firm believer in using XHTML and CSS. If you have taken a look at my design you might have noticed that it relies almost exclusively on mathematics. The more advanced mark-up language that you decide to use will pretty much dictate how much control you will have over its appearance. I am a math and science guy and am hungry to exercise as much control as possible over how my work displays in all browsers. Using XHTML 1.1 and CSS allows maximum control and most websites written in this language appear the same in all browsers with a minimal amount of "hacks" written into the code. "Hacks" are adjustments written into the CSS code that allow you to program your code for more than one browser type. For years Internet Explorer browsers were non - compliant with CSS and had to be dealt with accordingly. Bill Gates (Microsoft), in co-operation with Intel, was having Internet Explorer installed on all new computers and exercising an unfair market advantage over all the other browsers. You had to go to a website and download different browsers and most people just never made it and Internet Explorer became number one.
An example of a typical hack might look like this:

The html>body element identifies the hack. This particular "hack" deals with padding and margin issues that differ between the Internet Explorer browser and other mainstream browsers. Seems pretty simple, huh? This sort of points at what I was referring to earlier about math giving you more control. The Div#mainbox (the # in the code denotes the id attribute) is written for the mainstream browsers and the "hack" deals with CSS compliant browsers (non - I.E.). Did you notice how I opened the door to boxes? "The box" is probably the pre-eminent display element in CSS coding today. "Boxes are everything", remember you heard it here first.
An example of a box used as a display element might look like this:

The CSS code that you have just read is what makes the crest and coat of arms display at the top of this page. This page you are looking at is merely a "box" mathematically positioned over a purple background. Still with me? Let me break down the previous "style code snippet" definition for you. The call, from within the body, is self explanatory. The first two lines deal with the dimension of the graphic used and coincidentally the exact size of the box. Back in the old days you could just use numbers, in today's world you will need to use a unit of measurement - px (pixel). You will have a lot more choices as far as units of measurement go when you specify distances such as padding and margins. You can build the box larger and change the background color to frame whatever graphic you are using. There is an endless list of things you can do with your display once you master "the box". The next line deals with the border of the box. Here comes the control factor. You could probably leave this out and rely on the defaults of whatever browser you or your viewers use but why chance it? The next line specifies how you will be populating your box. You call the image from your image file on your server. A good webmaster will have all of his or her images in a separate file so as not to clutter-up and confuse your directory. The next line refers to whether or not you are tiling your image. Due to the slight differences in the way "some browsers" handle padding and margin issues I will set this to "no repeat". That way, even though I have set the box dimensions to the same size as the graphic, the image will not repeat itself to try to fill any potential gaps. The next line deals with the positioning of the graphic within the box. As a matter of good form I always specify the horizontal and vertical position as center, as long as that is what I am trying to achieve. Last but not least there is the "margin:auto" attribute. This will center the box horizontally on your page. You can specify up to three different margin commands as long as you place these changes after the margin:auto command. Keep in mind that by default any element introduced will automatically be positioned at the top and on the left side of any page or element. To change the margin-left attribute will throw off the whole thing so in reality you only have top, bottom, and right to make adjustments with after the margin:auto command.
Believe it or not I still like to use tables for some applications. Boxes are a wonderful thing but when it comes to positioning three or four elements in the same display it gets pretty tricky. You can have as many columns as you wish inside your display box but once you begin to rely 100% on CSS for positioning, inside of your display, it becomes increasingly complex. It ultimately becomes an access issue as well. The next topic in my tutorial will be Accessibility. Actually accessibility is a huge topic and I will only be touching on the important high points.
This discussion will begin on the next page of my tutorial.