(X)Html Creation 101 Part 2

January 18, 2007

Recap

In the last article I walked you through the parts of a HTML document. This time I’m going to be focusing on the structure of the objects and their relation to CSS.

Nested DIVs

One of the more interesting things about DIVs is the way they can be stacked to make content into a structure. Some would argue that Tables are the way to go because it handles structure natively, however, I disagree since DIV’s offer flexibility. Tables restrict the website, DIV’s allow you to move the content to various places on the screen with the assistance of CSS.

The basis for identification within CSS is threefold:

1. Object types. – H1, p, li, and ul, for example, are specific types of HTML tags. In CSS you can make general rules that all paragraph tags have a certain font or color, that all unordered lists have a certain dimension, etc. It’s good to think in overall style and then narrow down from there as needed.
2. ID and Class names – When we create an item we have the option of adding a class, ID or both to the object. An example would be <h1 class=”header_logo”>My Company Name</h1> Within CSS the ID reference is noted as a “#” and the class as a “.” You’ll see what I mean in a second.
3. CSS can also reference objects in simple relationship to another object. Meaning, for example, if you have a DIV named “left_navigation” then you can specify that ordered lists within that DIV should be styled a certain way.

An example of object types in CSS would be written as (using the example of an ordered list)

ol { style information goes here }

That simply says that any ol gets the style information between the brackets.

The second method, ID and Class names can be used similarly:

ol#navigation { style information goes here }

h2.subtitle { style information goes here }

That would indicate that any ordered list with the ID “navigation” gets the style information within the brackets. In the second example, any header2 with the class of “subtitle” would get that style information.

You don’t always need to write ol#navigation or h2.subtitle. You can simplify your life, assuming you’re only using an ID for one object and the class for one group of similar objects, by writing simply #navigation and .subtitle.

To illustrate the third way CSS can style items I’m going to show its relationship to another item.

div#main ul#navigation li { style information goes here } alternately written #main #navigation li { style information goes here }

or

p a { style information goes here }

The first would look within the DIV with the ID of main and search for the unordered list called “navigation” and then it would apply the style between the brackets to any list item that it finds.

The second example would simply look at all paragraphs and then search within the paragraphs for links to style with the style information within the brackets.

It’s important to understand the structure of your document before you begin working with the CSS. Typically I start my designs in Photoshop to get an idea of the layout and then I chop out the backgrounds and apply them in CSS. Doing the work in Photoshop not only gives me a good idea for how the design will look but also how it’s going to fit together, dimensions and whatnot.

CSS Styling

Once you’ve got an idea of how elements play nicely together you have to start styling them. I’m going to show some examples of CSS in action on my site and the code that makes it work since by nature CSS is one of those “almost obvious” things.

I’ll start with the basics.

Anything on your web page can be styled, more or less. The simplest thing is the body tag. The body tag is the background of your site, if you put a background on it for example, it will sit nicely behind the rest of your website.

body { background: #000000 url(/images/bodybackground.jpg) no-repeat; }

This simple line will say to the browser, “give the body a black background and then on top of that use the image located in the images directory named bodybackground.jpg and don’t repeat it. Alternately you could write in repeat-x, repeat-y or repeat. Background colors are typically done in their Hex values. #000000 is black, #ffffff is white. In the case of a repeating Hex value, like #999999 you can shorten it to #000, #fff or #999 respectively.

Note the way the CSS is written above. You see the item is called and the style information is placed in the brackets. That information is formatted the same for all CSS style information. Function: information; so, for example margin: information; or color: information;

Structural Design in CSS.

Every website has structure in at least two ways. First, there’s the order your HTML is written, that’s the document’s structure. Second there’s the structure your viewers will see, presentational structure. Those two things may be completely different once the CSS has been finalized since you are able to move items from place to place using a variety of positioning styles. I’ll explain those here.

Floats

To me, floats are the most important of the pieces, and so I’ll cover them first. Floating, though named peculiarly, simply means that pieces set to float will try and sit next to each other unless told not to do so. When would you use that? In setting up columns, for example.

If you have two DIVs that need to sit side by side you could accomplish it with the following CSS.

#leftdiv { float: left; clear: both; } #rightdiv { float: left; }

The DIV #leftdiv is told to float left and then is issued the clear command. Clearing means that it will go below objects that appear on either the right, left or both. Personally I only use clear: both;, but that’s not to say you won’t find a use for the others somewhere. Notice that the second DIV #rightdiv is told only to float and not to clear. Doing so will cause the two DIVs to sit side by side nicely.

I hardly ever use floats on a paragraph or headers because doing so can sometimes cause the next piece of HTML to try and sit next to it, then your CSS will start to get tricky.

You can also use the #float: right; option, which will cause an item to cling to the right side of whatever it is in. So, if you have an outer DIV and a DIV inside of it, an inner DIV, and set the inner DIV to float: right; it would try to hug the right side of the outer DIV. I promise, it’s not as difficult as it sounds. And floating is so much easier than trying to get things to line up perfectly when positioned absolutely, which is the next thing on the list.

Absolute Positioning

When I first started to use CSS this is what I used most of the time, as I started to get more comfortable with CSS I began to use it very little. Most layouts can be accomplished through floating DIVs, however there are some things that will require absolute positioning.

If you want a certain DIV to always stick to the top right of the page you can accomplish that by using something like this:

toprightdiv { position: absolute; right: 0; top: 0; }

That will tell us that the DIV should be positioned absolutely at the top right of the screen. Those two positioning coordinates top and right are mostly only useful in absolute positioning and generally won’t work in a float. Where I have placed zeros you can insert numbers that indicate how many pixels away from the top and the right the object should sit. For example right: 50px; top: 150px; would cause the item to sit 50 pixels from the right and 150 pixels from the top.

If you give an item absolute positioning it will typically trump anything else you have styled, it can place items on top of items and other possibly useful, possibly destructive things. So, my advice is to play around with it, but realize that if you’re floating most of your larger DIVs that you probably don’t need much absolute positioning.

Colors and Fonts

Calling the color of your text is very simple. color: #000000; would give you black text. Replacing the hex for black would give you any color you can really think of, assuming you can find it on the color wheel. That’s really all there is to say about that.

Fonts are handled in three ways. First, you can declare the font size font-size: 12px;, and you can do so by either using pixels, ems or points. I typically don’t suggest using points (pt) because it doesn’t play well with a browser’s function for font sizing. Pixels and ems do, however, which make them a good choice for your font sizing.

Line height will tell the browser how much space a line should take up. line-height: 17px; would make your lines of text, you guessed it, 17 pixels high.

Fonts and font orders can be accomplished in CSS by writing font-family: font information here;

It should be noted that not all fonts are right for the web since not everyone has specialty fonts. You should start your declaration with the fonts that you want to include but that the person may not have and work toward more generic fonts. An example taken from one of my websites is as follows:

font-family: "Lucida Grande", verdana, sans-serif;

As you might have guessed, this will see if you have Lucida Grande installed on your system, if you do the text will be renedered as Verdana (if it is available), if verdana isn’t available then it will use the standard sans-serif font that you have for your browser. Sometimes I change my browser’s default font so that I can see who set fonts on their websites and who didn’t. The results are fun sometimes when you choose something like Wingdings.

With a combination of those attributes you can set the font and color options for your website. Before I get into more advanced CSS options I should consider a small section about strategy.

Strategy With CSS

One of the strengths, and why CSS starts with the word “Cascading” is that it will pass attributes down through a document. Meaning, if you apply a margin to the body section of your site it will apply it to everything inside the body. So, if you put something on a small DIV later in the page it won’t change the things that are above it, but it will change the things inside it. Margins and padding are particulary tricky if you’re not paying attention to that factor.

So, when you’re trying to define the font styles, for example, you may want to start with a general font for the entire site which you could declare in the body section of your site. Doing so, anything within that section would then be styled with the same font information. That is, unless you change something later on in the document.

So, my advice is to start with the highest level possible and work down into your document and test on every web browser you can get since half the time things don’t look the same on anything. The other suggestion is, know when classes are appropriate and when ID’s are the best option. My reasoning is, many people overclass things and they aren’t able to easily select individual items within their website, that can kill originality at first, if you aren’t an advanced CSS user. On the other hand, it is possible to over identify your page. Not everything needs to be identified, paragraphs for example should be left alone unless there’s a really good reason to identify or class them. Even then, classing is probably the better option, since more than likely you’ll have multiple paragraphs that will need to follow the same style.

More Advanced CSS

CSS is capable of some very advanced stuff, I’ll only show you a few small pieces here since this is already very lengthy.

Hover

In the past rollovers were done with some very complex methods. Now, the easiest way is by using the :hover method. In Firefox it works on a variety of things, in Internet Explorer 6 on the other hand, it works only on links. You can style it like anything else in CSS and those attributes will show up only when the viewer moves their mouse over the link. It’s a very nice way to make things move or show emphasis, etc.

Advanced Decoration

Personally, I think one of the most imporant features of CSS is the ability to put in backgrounds. That may seem like basic functionality, thought I would say it’s all in how you use it. As I have said many times before to many different people, I like to start my sites with a photoshop document. From there I can take the layers and make them into the website by adding in background images in CSS. So, essentially if you are thinking ahead you can slip in some very nice looking backgrounds into what might have normally been a very boring looking website.

text-indent: -9999px;

Essentially that function will take your text and put it off the screen 9999 pixels to the left. It’s a good way to display a logo graphic without colliding with the title text. The reason to do this is simple, you want the text to really exist for both search engines and for users with screen readers. So, this will simply move it off the screen so that it won’t show up when rendered normally. It’s not a good idea to use this on large sections of text. It’s a better option to have as much real text as possible on your website, if it’s all done through images it will be very slow to load.

Conclusion

As was part 1, this is a very basic beginning to CSS. I don’t admit to even scratching the surface, however, with a basic starting point things should come along fairly quickly.

Additional Notes That I Missed Originally

After posting this article I got to thinking last night about some of the things I missed that are probably very important to people trying to learn CSS.

Margin and Padding

Margin and padding are two lovely pieces of CSS that define how much space you have around your items. There are a few different ways you can write margin and padding and I’ll show you how to do that here. The order for both margin and padding follows the same scheme: Top Right Bottom Left.

margin: 10px 0 50px 250px;

So, the above CSS would place a margin of 10 pixels on the top, 0 on the right 50 pixels on the bottom and 250 pixels on the left. If I had something more uniform, like this: margin: 10px 0 10px 0; which would give me 10 pixels of padding on the top and bottom and 0 on the left and right, I can rewrite it as this margin: 10px 0; since CSS can compress this command into just two values, vertical and horizontal. It can also be mixed as follows.

margin: 0 10px 50px 10px; could also be written as margin: 0 10px 50px; which would give zero pixels of margin on the top, 10 pixels on the left and right and 50 pixels on the bottom.

You can also use something like margin-right: 50px; which would change just the right margin of the object, very useful but adds bulk to the CSS.

Borders

To call a border you could use something like this border-bottom: 1px solid #000000; That would setup a 1 pixel solid black border at the bottom of your object. When you’re first starting to work with DVIs and CSS it can be helpful to put borders on every DIV for help in discerning what is what. You can use something like this to do a full border: border: 2px dashed green; which would give you a 2 pixel wide green dashed border around your object.

Height and Width

Width is the more important of the two, in my opinion, since typically height is defined by the amount of content you have within your object or the object itself. However, it can be useful if you’re working with a particular DIV needing an absolute height. That being said you can specify a width and height by similar methods.

width: 100px;
height: 250px;

That would, as you probably guessed, specify a width of 100 pixels and a height of 250 pixels.

List Style

This is something that I found useful since I’m not a big fan of bulleted or numbered lists that actually show bullets or numbers.

list-style: none;

That will get rid of the bullets or numbers in an unordered or ordered list. Very useful if you’re going to really push the graphical elements of your lists.

Minor Conclusion

I think that’s it for now, but then I thought that was all last time. If there is a good bit more I’ll probably just write a part 3.

| | |