Back To Basics With HTML And CSS

I have twins that are in the first grade. One of them came home from school the other day and had been given his “second grade” sight words because he’s already passed all of the first grade ones. Sight words are just a set of words on flash cards that they have to know by “sight”. They get tested on these words and when they pass one set, they are given another set. The sets get progressively more difficult.

The other twin is not as far advanced on his sight words yet, but insisted that he could do the second grade sight words just like his brother could. We sat down and he proceeded to fumble through the set, missing most of them and eventually frustrating himself to tears. Don’t worry. I did remind him that he is indeed an excellent reader and everyone moves at a different pace. Then I gave him ice cream which rights all wrongs in life if you are six years old.

I find myself like this all the time. I try to move on to more advanced things when I don’t know the basics. I even know that I don’t know them, but I don’t take the time to simply find out what the answer is.

Today I am going to go over a few things in HTML4 that I didn’t know, but are essential before you can really do effective HTML5 development.

Source

Most of this information came from the gorgeous HTML And CSS: Design And Build Websites. This book is a completely different kind of technical publication than what you have come to expect. It’s got beautiful color pictures and photos along with a really unique print layout. It’s a breeze to read. It does start at the very beginning assuming that you know nothing at all about how the web works. Its really tempting to just skip over all of this information and move on to the more advanced stuff at the back of the book. However I intentionally read all of the book, including the first parts that go over extremely simple HTML/CSS information. Things like “What is a p tag”. While the vast majority of the information was comprised of things that I was already aware of, there were several items that I did not know previously. Things like…

When To Use PNG vs JPEG

I have always exported images as PNG because I thought that was the newer standard and a better standard. However, there are different image formats for different scenarios. Knowing which one you need to use will help you optimize your site in terms of speed and appearance.

JPG

You probably know that this actually comes in two flavors: JPG and JPEG. What’s the difference?

Nothing actually. The actual acronym is Joint Photographic Experts Group. It’s pronounced “jay peg” and was originally truncated to a 3 letter extension for older operating systems. Newer operating systems could handle the 4 letter extension, so the proper form is JPEG.

You may notice that when you create a JPEG image in an image editing program, it asks you what you would like for the DPI to be. This is Dots Per Iinch, or sometimes referred to as the PPI (pixels per inch). This is also known as the resolution. The higher the resolution, the larger the image file size will be. It turns out that traditionally computers display about 72 PPI. Most image editors will set this default for you, but now you know why it’s there. It’s not just an arbitrary number.

Newer Retina Display devices will actually display a much higher PPI. The new Apple Mac Book Pro will display 220 ppi, while the iPhone 4s will show 326 ppi and the ipad 264 ppi. Dealing with retina display graphics is a whole other topic in and of itself that is going to become more and more relevant as the proliferation of iOS devices continues.

When To Use JPEG

JPEG compression is a form of bitmap image. This means that it’s made up of a bunch of tiny squares. is best for images that contain a lot of different colors. This would be something like a traditional photograph.

PNG

PNG stands for Portable Network Graphics and is also in the bitmap family.

When To Use PNG

You should use PNG and or GIF when you are dealing with a few “flat” colors. A good example of this is most logos which contain just a few colors and no real gradients or color variance. The Kendo logo is best as PNG as it is really just black and orange.

PNG and GIF also have a ppi that is also best at 72 for most displays, but should be much larger when dealing with the aforementioned retina displays.

Do I REALLY need labels?

One thing that always confused me was why we even have a label element in HTML. Is it really necessary?

The label control serves more than one very important role.

First, it provides accessibility. For those users who are vision impaired and are using a screen reader, the label tells them what the current input is for. The for attribute of the label is matched with the id attribute of the corresponding input control. If you are pursuing Section 508, WCAG or ARIA compliance, all input controls in your app are required to have a label.

Even more useful is the fact that when you pair a label control with a checkbox or a radio button, the user can then click on the label to select the checkbox or radio button. This is SUPER helpful. Like The Oatmeal says, don’t force your users to be snipers and click on tiny input controls.

Outdated HTML attributes

There are some very outdated HTML attributes that are still valid that you should not use. This is typically ANY attribute which controls the appearance of the HTML item. Appearance should be controlled by CSS for the most part.

For instance, you can specify a table row width, table borders and the table background in the table tag itself, but you should do that in CSS.

JS Bin

You can also align images with the align property as well as setting their width, height and a border, but all this should really be handled with floats and other CSS.

JS Bin

There are plenty more outdated attributes, but as a general rule of thumb, any attribute which controls the appearance of your HTML element should be done in CSS. That’s what CSS is for. This will make your code easier for you to maintain. The person who comes after you will greatly appreciate your appearance logic all being in the CSS as opposed to being spread across the markup.

Margins

You most likely know that you can collapse multiple margin declarations into one line by starting at the top and going clockwise.

.container {
    margin-top: 10px;
    margin-right: 5px;
    margin-bottom: 10px;
    margin-left: 0px;
}

.container {
    margin: 10px 5px 10px 0px;
}

What you might not know is that when two margins are up against each other, they overlap. In other words, the margin of the second item doesn’t start where the margin of the first one stops. It starts where the actual first item stops.

If you had two divs stacked on top of each other and you set the bottom margin to 20px, then the top margin of the bottom div won’t have any effect until you set it to something GREATER than 20px. This sounds a bit confusing so lets look at an example.

JS Bin

Notice that even though the combined margin of the bottom of the first and the top of the second is 40px, only 20px space is shown. If you increase the top margin of the second div to 30px, you will see that the space now increases.

Inline Elements And Size

Block level elements like the div are stacked on top of each other unless otherwise styled. Inline elements like the span are shown next to each other horizontally.

Inline elements don’t exactly behave like you would think though in terms of size. You can set a width and height on block level elements and they will be that size. However, inline elements will completely ignore your specified size.

JS Bin

If you want your span’s to be inline but respect an absolute size, then you need to set their display css style to be inline-block. However, this only works in modern browsers. Another way to pull it off is to float the element a certain direction.

JS Bin

What IS an EM?

In CSS typography, font size is sometimes set in em’s. What this means is really how it sounds if you say it. It is the size of one “M” on the page. So you are essentially setting your font size relative to the font size of the page. Setting it to 1em will make it the same size as the current font size for the page. Setting it to 2em will make it twice as big.

The default font size for most browsers is 16px. This is what you will get if you don’t specify a font size.

JS Bin

The Basics Are Essential

These are a few of the details and items that I did not know. I had glossed over these things and deemed them unimportant to fully understand. I suppose I “knew” what they meant, but if you asked me to explain them to you, I would not have been able to. I used to have an economics teacher in high school named Mr. Sanz. He used to say, “If you can’t explain it, then you don’t know it”.

I highly recommend reading HTML And CSS: Designing And Building Websites. You may be surprised at what you find that you don’t know about the basics of HTML and CSS. Then of course download Kendo UI, and get to building HTML5 applications with your new found expertise in HTML4.