Advantages
Styling a table with CSS has mayor advantages since it separates the structural markup from presentation formatting. It offers extra flexibility on the way you present your table. You have the freedom to style each side of a table cell separately, isn’t that cool.

<Getting started
First I create a simple draft in Photoshop. I experiment by trying out some color combinations, bullets, colors for the alternating rows etc. If you can’t decide on colors, then maybe these color calculators can help you out.

In the next step I export these 3 image files to style the background of the headers:

• bg_header.jpg
• bullet1.gif
• bullet2.gif

The structural markup
The coding in BBEdit is pretty simple. Here is some part of it:

<table id="mytable" cellspacing="0" summary="The technical
specifications of the Apple PowerMac G5 series">
<caption>Table 1: Power Mac G5 tech specs </caption>
<tr>
  <th scope="col" abbr="Configurations" class="nobg">Configurations</th>
  <th scope="col" abbr="Dual 1.8GHz">Dual 1.8GHz</th>
  <th scope="col" abbr="Dual 2GHz">Dual 2GHz</th>
  <th scope="col" abbr="Dual 2.5GHz">Dual 2GHz</th>
</tr>
<tr>
  <th scope="row" class="spec">Model</th>
  <td>M9454LL/A</td>
  <td>M9455LL/A</td>
  <td>M9457LL/A</td>
</tr>
...

As you can see I’ve used the scope attribute to make sure that a my table makes sense in non-visual browsers. This attribute defines whether the header cell holds header information for a column (scope=”col”) or a row (scope=”row”).

The CSS styles
For the headers at the top I’ve used a background image to make them extra visible, except for the one on the left. For this one I created a class (.nobg I have the habit to always use ‘bg’ as an abbreviation of ‘background’). Here is how the CSS code looks:

th {
	font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica,
	sans-serif;
	color: #6D929B;
	border-right: 1px solid #C1DAD7;
	border-bottom: 1px solid #C1DAD7;
	border-top: 1px solid #C1DAD7;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-align: left;
	padding: 6px 6px 6px 12px;
	background: #CAE8EA url(images/bg_header.jpg) no-repeat;
}

th.nobg {
	border-top: 0;
	border-left: 0;
	border-right: 1px solid #C1DAD7;
	background: none;
}

The headers on the left that appear as rows (the specification headers) have alternating styles:

th.spec {
	border-left: 1px solid #C1DAD7;
	border-top: 0;
	background: #fff url(images/bullet1.gif) no-repeat;
	font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica,
	sans-serif;
}

th.specalt {
	border-left: 1px solid #C1DAD7;
	border-top: 0;
	background: #f5fafa url(images/bullet2.gif) no-repeat;
	font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica,
	sans-serif;
	color: #B4AA9D;
}

The table cells that hold the technical specifications of each Power Mac G5 also have alternating styles:

td {
	border-right: 1px solid #C1DAD7;
	border-bottom: 1px solid #C1DAD7;
	background: #fff;
	padding: 6px 6px 6px 12px;
	color: #6D929B;
}

td.alt {
	background: #F5FAFA;
	color: #B4AA9D;
}

http://veerle.duoh.com/index.php/blog/comments/a_css_styled_table/

I’ve cleaned up the HTML and CSS slightly, so if you compare this to what is actually used on the site there will be some small differences. In case I have redesigned by the time you read this, check out the finished example to see what the menu looked like at the time of this writing.
The HTML
The markup is very simple. It’s an unordered list, with each link in a separate list item:

1. <ul id="nav">
2. <li id="nav-home"><a href="#">Home</a></li>
3. <li id="nav-about"><a href="#">About</a></li>
4. <li id="nav-archive"><a href="#">Archive</a></li>
5. <li id="nav-lab"><a href="#">Lab</a></li>
6. <li id="nav-reviews"><a href="#">Reviews</a></li>
7. <li id="nav-contact"><a href="#">Contact</a></li>
8. </ul>

View Step 1.

Why use a list? Because a navigation bar, or menu, is a list of links. The best (most semantic) way of marking up a list of links is to use a list element. Using a list also has the benefit of providing structure even if CSS is disabled.

At this stage, with no CSS applied, the list will look like any old (normally bulleted) list, styled only by the browser’s defaults.

I’ve given id attributes to the ul and li elements. The id attribute for the ul element is used by the CSS rules that style the entire list. The li elements have different id values to enable the use of CSS to highlight the currently selected link. This is done by specifying an id for the body element. More on that later.

The CSS

I’ll describe the CSS I’ve used to style the list in a step-by-step fashion.

First of all, I set the margins and padding of the list and list items to zero, and tell the list items to be displayed inline:

1. #nav {
2. margin:0;
3. padding:0;
4. }
5. #nav li {
6. display:inline;
7. padding:0;
8. margin:0;
9. }

View Step 2

This will make all the links display one after another on the same line, as if the list wasn’t there. It will also remove the list bullets, since they are only displayed when display:list-item (the default display mode for list items) is used. Some browsers are said to incorrectly display the list bullets even though display:inline has been applied to the list items. I haven’t seen this happen in any of the browsers I tested in, but if you want to make sure that no browsers display list bullets, you can add list-style-type:none to the rule for #nav.

Next, it’s time to start styling the menu tabs. I do this by adding styles to the links, not to the list items. The reason for that is that I want the entire area of each tab to be clickable. First a bit of colour to make the changes more obvious:

1. #nav a:link,
2. #nav a:visited {
3. color:#000;
4. background:#b2b580;
5. }

View Step 3.

Note that I’m styling the normal and visited states of the links to look the same. the next step is to add a bit of padding to the links:

1. #nav a:link,
2. #nav a:visited {
3. color:#000;
4. background:#b2b580;
5. padding:20px 40px 4px 10px;
6. }

View Step 4.

That’s a bit better. But there is a potential problem that isn’t visible here. Since the links are inline elements, their vertical padding will not add to their line height. It’s easier to see this if the ul element has a background, so I’ll add a background colour and a background image:

1. #nav {
2. margin:0;
3. padding:0;
4. background:#808259 url(nav_bg.jpg) 0 0 repeat-x;
5. }

View Step 5.

Oops. Now the links are sticking out of the list element. To fix this, I’ve turned the links into block boxes by floating them to the left. I’ve also set their width to auto, to make them shrink to fit their content:

1. #nav a:link,
2. #nav a:visited {
3. color:#000;
4. background:#b2b580;
5. padding:20px 40px 4px 10px;
6. float:left;
7. width:auto;
8. }

View Step 6.

Adding display:block to the CSS rule for the links would also have made them block boxes, but since a floated element automatically generates a block box, that isn’t necessary.

As you may have noticed, the background disappeared when the links were floated. That’s because floated elements are taken out of the document flow, which causes the ul element containing them to have zero height. Thus, the background is there, but it isn’t visible. To make the ul enclose the links, I’ve floated that too. I’ve also set its width to 100%, making it span the whole window (except for the padding I’ve given the body element in this example):

1. #nav {
2. margin:0;
3. padding:0;
4. background:#808259 url(nav_bg.jpg) 0 0 repeat-x;
5. float:left;
6. width:100%;
7. }

View Step 7.

To visually separate the links from each other, I’ve added a right border to the links. Then, to give the first link a left border as well, I’ve used a :first-child pseudo-class to apply a rule only to the link in the very first list item. I’ve also added top and bottom borders to the ul element:

1. #nav {
2. margin:0;
3. padding:0;
4. background:#808259 url(nav_bg.jpg) 0 0 repeat-x;
5. float:left;
6. width:100%;
7. border:1px solid #42432d;
8. border-width:1px 0;
9. }
10. #nav a:link,
11. #nav a:visited {
12. color:#000;
13. background:#b2b580;
14. padding:20px 40px 4px 10px;
15. float:left;
16. width:auto;
17. border-right:1px solid #42432d;
18. }
19. #nav li:first-child a {
20. border-left:1px solid #42432d;
21. }

The :first-child pseudo-class is not recognised by Internet Explorer for Windows, so the first link won’t have a left border in that browser. In this case, that isn’t a major problem, so I’ve left it like that. If it’s really important to you, you’ll need to add a class to the first list item (or the link in it), and then use that to give the link a left border.

View Step 8.

Next I’ve changed the way the link text is displayed by removing the underlining, making the text bold, specifying font size, line-height, and a different font family, making the text uppercase, and adding a little bit of drop shadow. The drop shadow is created with the text-shadow property, a CSS3 property that is currently only supported by Safari and OmniWeb:

1. #nav a:link,
2. #nav a:visited {
3. color:#000;
4. background:#b2b580;
5. padding:20px 40px 4px 10px;
6. float:left;
7. width:auto;
8. border-right:1px solid #42432d;
9. text-decoration:none;
10. font:bold 1em/1em Arial, Helvetica, sans-serif;
11. text-transform:uppercase;
12. text-shadow: 2px 2px 2px #555;
13. }

View Step 9.

To give some visual feedback when the links are hovered over, I’ve given their :hover state different text and background colours:

1. #nav a:hover {
2. color:#fff;
3. background:#727454;
4. }

View Step 10.

In the final step, I’ve added rules that will make the selected link look different than the others, to show visitors where they are on the site.

In case you haven’t seen an example of specifying an id attribute for the body element to style the “current” navigation tab differently before, that’s what the first two rules do. In the examples linked to from this article, I’ve set id of the body element to “home”, which makes the “Home” tab the current one. Changing it to “about” would make the “About” tab the current one, and so on.

I’ve also made the selected link stay the same when it’s hovered over. It can be argued that the current menu item should not be a link at all. In this case, I’ve chosen to leave the link in the markup and use CSS to remove the visual feedback on hover.

To give some visual feedback when you click on one of the links, I’ve given the :active state of the links the same styling as the selected link:

1. #home #nav-home a,
2. #about #nav-about a,
3. #archive #nav-archive a,
4. #lab #nav-lab a,
5. #reviews #nav-reviews a,
6. #contact #nav-contact a {
7. background:#e35a00;
8. color:#fff;
9. text-shadow:none;
10. }
11. #home #nav-home a:hover,
12. #about #nav-about a:hover,
13. #archive #nav-archive a:hover,
14. #lab #nav-lab a:hover,
15. #reviews #nav-reviews a:hover,
16. #contact #nav-contact a:hover {
17. background:#e35a00;
18. }
19. #nav a:active {
20. background:#e35a00;
21. color:#fff;
22. }

View Step 11, the finished navigation menu.

That’s it. This step-by-step tutorial makes the whole thing look more advanced than it really is. View source on the final example to see the complete set of CSS rules. By the way, with a couple of small exceptions (the left border on the first link, and the text shadow), this works in just about any browser, even Internet Explorer (version 5 or newer).

I hope you’ve been able to follow along well enough to be able to create your own navigation menu. The styling possibilities are almost endless.

kaynak: http://www.456bereastreet.com/archive/200501/turning_a_list_into_a_navigation_bar/

This float-enclosing behavior in IE can also be ‘toggled’ off again just by hovering of links within the container, if that hovering alters either the link background or one of several other CSS properties. Quite a mess, and we’ll cover it farther along in the article, in the “Toggle Trouble” section.

The W3C suggests placing a “cleared” element last in the container box, which is then recognized by the container height, forcing the container to enclose the float above that cleared element too. It’s described more fully our article Float: The Theory:

“..let’s say you give that following box the clear property, {clear: both;} . What this does is extend the margin on the top of the cleared box, pushing it down until it “clears” the bottom of the float. In other words, the top margin on the cleared box (no matter what it may have been set to), is increased by the browser, to whatever length is necessary to keep the cleared box below the float.”

So in effect, such a cleared box cannot be at the same horizontal level as a preceding float. It must appear just below that level. The image shows how this might look, with a red border representing the container element:

The standard method of making an outer container appear to “enclose” a nested float is to place a complete “cleared” element last in the container, which has the effect of ‘dragging’ the lower edge of the containing box lower than the float. Thus the float appears to be enclosed within the container even tho it really isn’t. The code for a cleared box usually looks something like this:

<div> <!-- float container -->

  <div style="float:left; width:30%;"><p>Some content</p></div>

  <p>Text not inside the float</p>

<div style="clear:both;"></div>

</div>

Since that div is not floated, the container must recognize it and enclose it, and because of that top margin (added by the browser because of the “clear” property), the div “pulls” the bottom edge of the container down below the bottom edge of the float.

Problems With The Method

First and foremost, this clearing method is not at all intuitive, requiring an extra element be added to the markup. One of the major premises of CSS is that it helps reduce the bloated HTML markup found it the average site these days. So having to re-bloat the markup just so floats can be kept within their containers is not an ideal arrangement.

Besides that, some browsers can have trouble with certain kinds of clearing elements in some situations. Mozilla is particularly sensitive to clearing problems.

Up ’til now there was no other way to do this, but no more! Thanks to the efforts of Tony Aslett, creator and operator of csscreator.com, we can now use advanced CSS to “clear” a float container in non-IE browsers and just let IE keep wrongly clearing itself. The upshot is that we now have the option to avoid adding that pesky clearing element to the HTML markup. Woohoo!

“Clearing”, 21st Century Style

In the new method, no clearing element is used. This does not affect IE/Win which simply keeps enclosing the float as always (assuming the container has a stated dimension), but non-IE browsers will need a substitute for that element. Here’s how it’s done.

Using :after

This CSS 2 property allows extra content to be added at the end of an element via the CSS. That means no actual markup is needed in the HTML. The content is specified from within the CSS stylesheet, and appears in the page as would a real HTML element that had been inserted following all the normal content of the target element. Such :after generated content cannot receive some CSS properties, including ‘position’, ‘float’, list properties, and table properties. However, the ‘clear’ property is allowed. Do you see where we are going here?

Imagine that we use :after to insert a simple character like a ‘period’, and then give that generated element {clear: both;} . That’s all you really need to do the job, but no one wants a line space messing up the end of their clean container box, so we also use {height: 0;} and {visibility: hidden;} to keep our period from showing.

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

Notice that {display: block;} is also applied to the :after element, because if it isn’t then that element defaults to “inline”, and cannot receive the “clear” property. Also, Tony’s method originally used “overflow: hidden;” to hide the period, but sadly the latest FireFox versions will display the period if this is done.

But what about IE?

Since IE7 does not support the :after pseudoclass yet, we must rely on the same”auto-clearing” effect used for IE6, and that behavior happens when the float-containing element gets hasLayout applied to it. A simple declaration of “zoom: 1;” will perform this trick in IE5.5 and up, but it’s proprietary and needs to be hidden in order to validate.

As a side benefit, hasLayout on float-enclosing elements also prevents several other major IE/Win float bugs. However, should this container box be placed following a previous external float, the IE height fix will trigger Microsoft’s proprietary and illegal Float Model, so watch out for that, okay?

Toggle Trouble

It so happens that IE has, well, a little problem with this auto-enclosing behavior. You saw that coming, didn’t you. Yes, IE bugs come in big bunches. This one results when that container element has links inside, following the float. When this happens and certain links are hovered, the auto-enclosing behavior is toggled or “switched off”, causing the lower edge of the container box to suddenly jump up to the bottom of the non-floated content. Hovering other links restores the behavior. This interesting effect is of course called the IE/Win Guillotine Bug Those of you viewing in IE/Win may play around with the following live demos, and for a more complete explanation see the IE/Win Guillotine Bug demo page .

The toggling only occurs when a:hover is used to change the link background or many other styling changes, such as padding, margin, or any font styling on the link. Strangely, having the text color change on hover does not toggle the bug.

The containers are grey with green borders, and the floats are dark brown with yellow borders. Notice how the third and fourth links ouside the floats toggle the Guillotine Bug, and the first two un-toggle it. This seems to be related to the actual text lines themselves, so any links after the first two lines will toggle the effect. Links in the float will all un-toggle the effect. Just more weird IE bug behaviors, folks, nothing “unusual”.
Screenshot

The second demo has been “fixed” by placing those links in a paragraph, which then gets the zoom fix applied to it. Any block element will do just as well here. Yes, this means another element is needed, but unlike a clearing div, this paragraph is a “semantic” element. Text content really ought to be wrapped in semantic containers anyway, and since we forward-thinking coders always have our content thusly contained, it’s easy to apply the same .clearfix class to one more element.

A Word About Floats In Floats

Observant readers will have noticed that the above demos have “enclosed” floats, even in Opera 7 and Mozilla! This is because the demos themselves are floats, and all modern browsers (including IE, luckily) always let floats enclose other floats. Of course there has to be an outer float, and it still threatens to break out of its container…

Putting It Together

First, this code gets added to the CSS stylesheet:

<style type="text/css">

  .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

</style><!-- main stylesheet ends, CC with new stylesheet below... -->

<!--[if IE]>
<style type="text/css">
  .clearfix {
    zoom: 1;     /* triggers hasLayout */
    }  /* Only IE can see inside the conditional comment
    and read this CSS rule. Don't ever use a normal HTML
    comment inside the CC or it will close prematurely. */
</style>
<![endif]-->

For the HTML, just add a class of .clearfix to any element containing a float needing to be cleared, plus any Guillotine-Bug-fixing block elements within the container. That’s it! It’s not perfect, but it’s a whole lot better than adding an entire extra ‘dummy’ element. Check out this live demo of the fix in action:

IE/Mac Strikes Back

All this is wonderful, but unfortunately IE for the Mac does not “auto-clear” floats, and also does not support :after, and so is left out of the clearing party. What’s to be done?

You might callously abandon IE/Mac, but consider that many people who use older Macs can’t run Safari, or several other modern browsers. Thankfully this browser has been dropped by Microsoft, and at some future time the numbers of such IE/Mac users will become miniscule. Remember that even if a float appears to stick out of a container, no content will actually be obscured. It just won’t look as pretty for those few viewers, that’s all. Each author will have to decide on this issue according to their specific needs.

This page once described a Javascript method to force compliance in IE/Mac, but now thanks to Mark Hadley and Matt Keogh it’s now possible to dispense with that ugly Javascript and go with a straight CSS fix. Woohoo!

Taming the IE/Mac Float Problem

Basically the fix is just a matter of applying a display: inline-block; to the .clearfix class, and hiding that property from all other browsers. That’s it! We can easily do this with our existing code, slightly modified.

<style type="text/css">

  .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

.clearfix {display: inline-block;}  /* for IE/Mac */

</style><!-- main stylesheet ends, CC with new stylesheet below... -->

<!--[if IE]>
<style type="text/css">
  .clearfix {
    zoom: 1;     /* triggers hasLayout */
    display: block;     /* resets display for IE/Win */
    }  /* Only IE can see inside the conditional comment
    and read this CSS rule. Don't ever use a normal HTML
    comment inside the CC or it will close prematurely. */
</style>
<![endif]-->

The .clearfix {display: inline-block;} is seen by all browsers, and fixes IE/Mac. Then, inside the rule set that is hidden from IE/Mac, the display is reset to block. That’s all she wrote! Simply stick the above code into your CSS, and use .clearfix on any box that has to contain a sizable float. Ain’t that cool? Just watch out for previous external floats triggering the IE Float Model, as mentioned earlier.

Kudos to Alex Robinson for finding that inline-block is superior to the older inline-table fix for IE/Mac.

A Word Of Warning (this is important!)

The W3C float specification requires that a cleared element shall stay below all previous floats. There are no exceptions to this requirement! “Previous” in this case means any float that comes earlier in the source document.

Up until November of 2004, Firefox was still incorrectly clearing only the floats that were vertically above the clearing element, rather than all previous floats. This meant that in those earlier Gecko browsers you could place a floated column down one side of the screen, and inside another column (possibly another floated column) you could clear a smaller interior float, without that cleared element dropping below the previous floated column. Since only Gecko had this problem, it was obvious that something was wrong every time this happened to a page. Normally Gecko is the good browser, but in this one case it was the culprit. See, IE is not always the bad guy!

However, this easy clearing method has muddled the issue quite a bit, since now Explorer is not actually being cleared at all, while Gecko browsers have finally been corrected so they do clear all previous floats.

…Oh no! Do you see what will now happen in our hypothetical float page? IE, seeing no real clearing elements, will look great. Meanwhile, in newer Gecko browsers and Opera 7, the CSS generated clearing element in the first easycleared box will drag the height of that box waaaay down the page, until that invisible clearer is vertically below the bottom of the previous float column (assuming there is a bottom!). This can “generate” a huge empty space inside that once-small easycleared box, depending on the actual height of the neighboring float column.

Of course Opera 7 has always correctly implimented the clearing specs just like IE does (aside from bugs), and the Mac browsers are not involved either. If you are wondering how this issue can be fixed, well, it can’t. Gecko and Opera are now both following the float clearing specs correctly, and IE only fails because of the faked “clearing” we are forcing upon it.

Preventing External Clearing

If you have the above described problem, one way to prevent the clearer from clearing the adjacent float column is to make the container a float itself. Of course once you float the container you no longer need easyclearing, sigh…

Note that when all the main elements in a column setup are floats, the worst IE float bugs simply do not happen. Thus using an all-float approach to column design can actually be easier to accomplish, at least within a rigid-width layout.

Them That Done It

Thanks to Tony Aslett for showing us the way. His site, csscreator.com is a killer CSS forum where newbies and gurus alike hang out and exchange CSS know-how. Tony’s original demo page for this method can be found here, and the relevant forum thread is here.

Kudos also to Doug for pointing out the “period problem” in FireFox, and to Mark Hadley for that elegant IE/Mac fix, and to Matt Keogh for showing how “inline-table” also fixes IE/Mac while using an already-approved CSS property. Once more the CSS community comes thru for us all!

kaynak: http://www.positioniseverything.net/easyclearing.html

İlk olarak 1995′de ortaya çıkan CSS, 1996 yılında W3C (Dünya Çapında Ağ Birliği)’ne kabul edildi. W3C’ye katılması demek bu kodlama biçiminin tüm tarayıcılar tarafından destekleneceği anlamına geliyordu. Bu tarihten itibaren W3C’ye üye olan tüm tarayıcı grupları CSS’nin yeni versiyonlar tarafından desteklenmesini kabul etmiştir. Nitekim Mayıs 1998′de gerekli güncellemeler yapılarak CSS 2′ye geçiş yapılmıştır. Ardından CSS 2.1 ile bazı özellikler yenilenmiştir.

Gelelim CSS’nin ne işe yaradığına… Web sayfalarının iki önemli öğesi sayfalarda yayınlanan bilgi ile stilin birbirine uyarlanmasıdır. Bu nedenle HTML ve CSS’nin birbiriyle uyumlu olarak çalışması ve sayfa stillerinin birkaç değişiklikle güncellenebilmesi bize kolaylık sağlayacaktır. Terim olarak CSS’nin İngilizce’deki açılımı “Cascading Style Sheets” dir. Adından da anlaşıldığı gibi içerisinde geçen “style” kelimesi sayfada yer alan bilgilerin belirli bir stil (tarz) ile sunulması olayıdır.

Kısaca CSS, HTML sayfaların stil olarak düzenlenmesinde bize kolaylık sağlar. Mesela web sitenizde yer alan tüm sayfalarda yazı tipini “verdana”, yazı tipi boyutunu da “10 punto” olarak ayarlamak istiyorsunuz. Bunu “style” dosyasında tek bir satırla halledebilirsiniz. CSS kullanmıyorsanız bu değişikliği bütün sayfalarda yapmak zorunda kalırsınız. İşte bu noktada CSS’nin çok önemli faydası vardır.

CSS’nin temel özellikleri nelerdir?

Style dosyasında yapacağınız birkaç değişiklikle web sitenizde yer alan tüm sayfaların yazı tipini, boyutunu, rengini, arka planını vb kolayca değiştirebilirsiniz.

CSS, temel olarak kullanımı kolay bir dile sahiptir. HTML’yi bilen herkes CSS’den istifade edebilir. Ayrıca HTML’de kullandığımız etiketlerin başında ve sonunda yer alan < – > gibi işaretleri kullanmamıza gerek yoktur. Bu nedenle yazımı gayet basit ve sadedir.

Diğer bir özellik de yazı tipi gibi özelliklerin “style” dosyası ile ayarlanmasıyla belirli HTML kodların diğer sayfalarda kullanılmasına gerek kalmamasıdır. Böylece sayfaların boyutundan tasarruf edebiliriz.

CSS’yi nasıl öğrenebilirim?

CSS’yi öğrenmek hiç de zor değil. Ancak CSS’ye başlarken bir parça HTML bilginizin olması gerekir. Çünkü CSS, HTML’nin kullanımını kolaylaştıran bir tür web yazılımıdır.

Dış Stil Sayfası (External Style Sheets)

Birden fazla sayfada tek tip stil kullamak için “style” dosyası oluşturmamız gerekir. Oluşturacağımız stil dosyasının uzantısı .css şeklinde olmalıdır.

Bunu yaptıktan sonra HTML sayfalarda “style” dosyasını çağırmamız gerekir. Her sayfanın header bloğuna ekleyeceğimiz kısa satırla bunu sağlarız:

<link rel="stylesheet" type="text/css" href="stil.css" />

Bu örnekte “style” dosyasının ismi “stil.css” dir. Bu dosyanın ana dizinde olması gerekir. Başka bir dizinde bulunuyorsa bunu “dizin/stil.css” şeklinde ilgili klasörün ismini vererek belirtmemiz gerekir.

Bu tür “style” dosyalarına “dış stil sayfası” diyebiliriz. Tüm sayfalarda tek tip stil kullanmak için bunu tercih edebiliriz.

İç Stil Satırları (Internal Style Sheets)

Ayrıca “dış stil sayfası” kullanmak yerine stilimizin tamamını ilgili sayfada header bloğuna ekleyeceğimiz “iç stil satırları” ile sağlayabiliriz:

<style type="text/css">
P {color: black; font: verdana}
H1 {color: red; font: verdana}
</style>

“İç stil satırları” bazı eski tarayıcılar tarafından desteklenmeyebilir. Zaten günümüzde Firefox 2 ve Internet Explorer 6/7 gibi yeni kuşak tarayıcılar tercih edilir. Yine de eski tarayıcılarda bunu önlemek için yukarıdaki kodun başına <!– imlecini; sonuna ise –> imlecini yerleştirerek CSS komutunu aşağıdaki gibi kapatmamız gerekir:

<style type="text/css"> <!--
P {color: black; font: verdana} /* Satır Yorumu */
H1 {color: red; font: verdana} /* Satır Yorumu */
--> </style>


Ayrıca her bir satırda C dilindeki yapıya benzer şekilde /* */ iki işaret arasında ilgili satırlar hakkında yorum ekleyebilirsiniz.

Her bir sayfada farklı stil kullanmak için bu yöntemi tercih edebiliriz.

CSS’nin temel yapısında bir diğer özellik de bildirim bloğu (declaration)’dur. Bildirim bloğu süslü bir parantez ile açılır; benzer şekilde noktalı virgülün ardından süslü parantez ile kapanır.

Bildirim bloğunda “seçici” için istediğimiz kadar “özellik” ve “değer” atayabiliriz. Birkaç örnek vermek gerekirse;

Tek bir özellik:

H1 {font-family: Arial}

Birden fazla özellik:

H1 {font-family: Arial; font-size: 2; font-weight: bold; color: red;}

Yukarıdaki CSS kod dizilimini açıklayalım;

H1, seçici özelliktir; genellikle yazı/paragraf başlıklarını tanımlamak için kullanılan bir tür HTML kodudur. H1 kodunu kullandığımız satırlarda yer alan yazılar bildirim bloğunda bulunan özelliklere göre şekillenecektir.

Seçicinin ardından süslü parantez açıyoruz. Özellik ve değerler arasında iki nokta üst üste [:] işareti yer alır. Her bir değerin sonuna noktalı virgül [;] gelmelidir.

Seçici için tanımlayacağımız yazı tipi, yazı boyutu, kalınlık/italic ve renk gibi özellikleri her bir satırda belirtiyoruz. Ardından bildirim bloğunu süslü parantez ile kapatıyoruz.

Bu satırda kullandığımız özellikler:

font-family (yazı tipi)
font-size (yazı boyutu)
font-weight (kalın, italic, altı çizili yazı)
color (yazı rengi)

CSS kod diziliminde her bir özelliği aynı satıra yerleştirmek zorunluluğu yoktur. Yukarıda verdiğimiz örnekte yer alan özellikleri aşağıdaki gibi birden fazla satıra yayabiliriz:

H1 {
font-family: Arial;
font-size: 2;
font-weight: bold;
color: red;
}

<p align=”center” class=”paragraf”>Yazı...</p>

Sınıfı “paragraf” olan imleri CSS içerisinde şöyle tanımlayabiliriz:

.paragraf {color: black; font: Arial;}

Böylece “paragraf” sınıfıyla tanımlanan birimlerde yazı rengi siyah ve yazı tipi Arial olacaktır.

“Paragraf” sınıfını birimlere göre farklı ayarlamak için aşağıdakine benzer seçiciler kullanabiliriz:

p.paragraf {color: black; font: Arial;}
h1.paragraf {color: red; font: Arial;}

Böylece <p> biriminin kullanıldığı tüm alanlarda sınıf “paragraf” olarak belirlendiğinde yazı rengi siyah; <h1> biriminin kullanıldığı alanlarda sınıf “paragraf” olarak belirlendiğinde yazı rengi kırmızı olacaktır.

Ayrıca sınıf seçicileri yerine ID seçicileri de kullanabiliriz. ID seçici ile sınıf seçicileri arasındaki önemli bir fark, CSS içerisinde ID’lerin # işareti ile belirtilmesidir.

<p align=”right” ID="baslik2">Merhaba Dünya!</p>
<h1 ID="baslik2">Merhaba Dünya!</h1>

Böylece “baslik2” buyruğunu CSS içerisinde şu şekilde tanımlayabiliriz:

#baslik2 {color: blue;}

Böylece “baslik2” ID’sini kullandığımız birimlerde yazı rengi mavi olacaktır. Bu özellikleri arttırabilirsiniz.

Abstract:
Tüm site hakkında bilgi veren cümledir.
<META name=”Abstract” content=”Site özeti”>

Author:
Site yapımcısının adı, iletişim bilgilerinin bulunduğu etikettir.
<META name=”Author” content=”Adınız, E-Posta Adresiniz”>

Copyright:
Sitenin telif hakları konusunda bilgi veren etikettir.
<META name=”Copyright” content=”telif hakkı cümlesi”>

Description:
Bazı arama motorlarının temel aldığı, site hakkında bilgi veren temel etiketlerden biridir.
<meta name=”description” content=”Sitenizin içeriği hakkında geniş bilgi”>

Expires:
Sitenin içeriğinin hangi tarihte zaman aşımına uğradğını arama motorlarına ileten etiket.
<META name=”Expires” content=”Mon, 12 Jan 2007 17:45:05 GMT”>

Keywords:
Yine arama motorlarının temel aldığı, sitenizin içeriğini oluşturan kelimelerin bulunduğu etiket.
<meta name=”keywords” content=”kelime1 kelime2 kelime3 kelime4 kelime5″>

Language:
Sitenizin varsayılan dilini belirten etiket.
<meta http-equiv=”content-language” content=”tr”>

Revisit-After Tag:
Arama motorlarına, sitenin içeriğinin kaç günde bir güncellendiğini ileten etiket.
<meta name=”revisit-after” content=”7 days”>

Refresh:
Belli aralıklarla sayfanın yeilenmesini sağlayan etiket. Örnekteki 60, sayfanın 60 saniyede bir yenileneceğini belirtir.
<meta http-equiv=”refresh” content=”60″>

Redirect:
Sayfanın, belli bir zaman sonra başka bir sayfaya yönlenmesini sağlar. Örnekte, sayfa 2 saniye sonra başka bir sayfaya yönlenir.
<meta http-equiv=”refresh” content=”2;url=http://www.sanalbilisim.net”>

Robots:
Arama motoru robotlarının,  site içerisindeki linkleri takip edip etmeyeceklerini gösteren etikettir.
<meta name=”robots” content=”none”>
<meta name=”robots” content=”index,follow”>
<meta name=”robots” content=”noindex,follow”>
<meta name=”robots” content=”index,nofollow”>
<meta name=”robots” content=”noindex,nofollow”>
gibi kullanımları mevcuttur.

Bunlar dışında;
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859″>
gibi bir kodla, sayfanın karakter kodlamasını belirtebilirsiniz. Bu kod, sayfanızdaki Türkçe karakterlerin düzgün görünmesini sağlar.

Not:
Tüm meta etiketleri <head> .. </head> kodları arasına yazılır.
Ayrıca XHTML standartlarına göre, meta etiketleri > ile değil /> ile kapatılır.
Örnek: <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859″>

Algorithm (Algoritma)
Arama Motoru tarafından örümcekleri vasıtasıyla buldukları web sayfaları sıralamak için kullanılan Matematiksel formüldür.

ALT Tags
Web site içinde mouse ile bir fotoğrafın üzerine geldiğinizde görüntülenen kısa bir açıklama yazısıdır. Image ALT taglar sayfanızın ziyaretçileri için kullanılır. Tüm ALT taglar abahtar kelime yoğunluğuna bağlı olarak arama motorudaki sıranızı yükseltir.

Örn:
< img src = ” silver-porsche.jpg ” width = ” 150 ” height = ” 225 ”
ALT = ” Photo of a Silver Porsche “>

Anchor Text
Anchor text hyperlink içinde görünen, tıklanılabilir yazıdır.

Örn:
< a href:” http ://www.sanalbilisim-yardım.com/” > Burası Anchor Text < / a>

Apache Web Server
Yaygın olarak kullanılan bir web sunucu

ATW
AllTheWeb arama motorunun kısaltılmışıdır.

Backlinks
Başka bir web sayfasından sizin sayfanıza bağlı linklerdir. Incoming ya da inbound Link olarakta kullanılır. Bazende “IBLs” olarakta kullanılabilir.

Broken Link (Kırık Link)
Kullanıcının tıkladığında bulunamayan bir sayfaya yönlendirdiği linklerdir. Ölü link (dead link) olarakta bilinir.

Cloaking
Kullanıcılar tarafından çekici bir sayfa gibi görünen yüksek rank elde etmek için kullanılan aldatıcı arama motoru hilelerinden biridir.Hiç bir arama motoru bunu sevmez. Google da bunların başında gelir.

Content (içerik)
Web site içinde bulunan bilgidir. (metinler, resimler vs.)

Cookie
Cookie web site kullanıcılarının bilgisayarında depolanan küçük text dosyalarıdır. Kullanıcın sayfayı bir sonraki ziyaretinde tanınması için kullanılır.

Crawler
Arama Motorları tarafından sayfaları taramak için kullanılan bir programdır. Crawler arama motorlarının web sayfalarını bulum indekslemesi için kullanılır. Spider, robot yada bot olarak ta adlandırılırlar.

CSS
Cascading Style Sheet. Biçimlendirilmiş Stil Şablonlar. Web sayfalarınızın görüntüsünü istediğiniz gibi tasarlamanızı sağlar.

Description
Bir web sayfasındaki kısa bir cümle yada paragrafla açıklanan içerikler. Çoğunlukla Anchor textlerde kullanılır.

Description Meta Tag
Bulunan web sayfanın içeriğini açıklar.

Domain
Bir Web sitedeki URL dir.

Doorway Page
Çoğunlukla köprü sayfalar olarak bilinir. Giriş ve çıkış sayfalarını birbirleriyle köprülerler. Seçilen anahtar kelime ile iyi rank elde etmek için ve ziyaretçileri asıl sayfalarına göndermek için kullanılır. İki çeşit köprü sayfalar vardır. Birisi tema üzerine otomatik olarak oluşturulur bir diğeride manuel olarak oluşturulmuş anahtar kelime odaklı içerik sayfalarıdır.Bunlardan ilki bir çeşit spamdır ve çoğu arama motoru tarafından cezalandırılır., ikincisi ise önemli ve çok etkin bir SEO tekniğidir.

Dynamic Content (dynamic pages)
Web sayfaları içinde içerik yönetim sistemi bulunan veritabanından yönetilir. Dinamik sayfalar çoğunlukla URL nin içindeki soru işareti gibi karakterler içerir. Dinamik sayfalardaki URL ler çoğunlukla : .asp, .cgm yada .cgi dir. Google ın da içinde bulunduğu çoğu arama motoru dinamik sayfaları iyi indeksleyemezler.

Flash
Macromedia nın grafik programıdır. Grafikler ilgi çekicidir fakat spider ve robotlar bunları göremezler.İyi görünürler fakat iyi rank sağlayamazlar.

GoogleBot
Google ın kullandığı görevi bulmak ve yeni site indekslemek olan bi web tarayıcısıdır.

Google Toolbar
Google Toolbar Google ın web sitesini ziyaret etmeden arama yapabileceğiniz bir eklentidir.Google Toolbar browser da PageRank değerinide gösterir.

Header Tags
HTML tagları web sayfanın profiline yardımcı olur önemli bilgilere dikkat çekmek için kullanılır. Anahtar kelimeler header taglarının içine yazılabilir.Eğer doğru tasarlanmışsa arama motorlarındaki rankınızı arttırır.

Örn:
< h1 >Bu h1 header tagı< / h1 >
< h2 >Bu h2 header tagı< / h2>

Hidden Text and Hidden Links
Yazı rengini arka plan rengiyle aynı vermektir. Böylece yazı yada link görünmez veya okunması çok zor olur. Hidden text yada hidden links çoğunlukla yapay sayfanın anahtar kelime popülaritesini arttırmak için kullanılan bir aldatmaca yöntemidir.Bu yöntem Google ve diğer arama motorları tarafından onaylanmayan bir yöntemdir ve ceza almanıza maruz kalmanıza neden olabilir.

Hits
Hits terimi çoğunlukla yanlış anlaşılır.Hit bir web siteniz varsa onun ziyaret edilmesi olarak bilinir.Ama bu değildir.Hit web sitenizde her zaman bulunan bir dosyadır.

Home Directory
Sitenizin ana içerik sayfasının bulunduğu yerdeki ana dizindir.

HTML(Hyper Text Markup Language)
Internet üzerinde web sayfası oluşturmak için kullanılan bir betik dilidir.

HTTP(Hyper Text Transfer Protocol)
HTML dosyalarının aktarımı için kullanılır.

Image map
Aynı resimde ayrı hyperlinkleri farklı alanlara yerleştirmek. Resmin farklı alanlarını tıkladığınızda sizi farklı farklı sayfalara götürür.Arama motoru dostu değildir.

Inbound Links
Başka bir web sayfasından sizin sayfanıza bağlı linklerdir. Incoming ya da Backlinks olarakta kullanılır.

Indexing
İndeksleme işlemi. Arama motoru web taraması yaptığında URL leri farklı kriterler kullanarak dercelendirir ve içeriğine ekler.

IP Address
Internet Protocol Address in kısaltmasıdır. Her bilgisayarı internete bağlar ve tekil olarak numaralandırılmıştır.IP adresler statik(asla değişmeyen) yadar dinamik(internete her bağlanışta değişen) olabilir.

Keyword (Key Phrase)
Bir kullanıcının herhangi bir siteyi bulmak için sitenin konusuyla ilgili olarak arama motoruna yazdığı kelime yada kelime gruplarıdır.

Link Farm
Yalnızca Arama Motorlarında rank elde etmeyi amaçlayarak oluşturulmuş bir Web sayfasıdır.tamamen ilişkisiz linklerin bulunduğu bir listeden ibarettir.Bu tip sayfalar çoğu arama motorları tarafından cezalandırılır.

Linking
Bir Web sayfasından başka bir Web sayfasına geçmek için kullanılan URL dir.

Log Files
Web Server ınızda devamlı ve otomatik olarak oluşturulmuş ve güncellenmiş dosyalardır.Log doyalarında URL ler, IP adresleri ziyaret edilmiş sayfalar, Tekil ziyaretçi numaraları, Toplam sayfa görüntüsü, Toplam hit ve daha fazlası vardır.

META Data / META Tag
Meta Data Bir sayfa yada dökümana ait olan bilgidir. Sayfa açıklaması içerebilir. Uygun anahtar kelime listesini yada yazar adı içerebilir.

Örn:
< META NAME = ” TITLE ” CONTENT = ” Burası sayfa başlığı “>

Outbound Links
Web sayfanızdan başka bir web sayfasına olan bağlantıdır. Çoğunlukla diğer sizin sitenizden başka bir sitede bulunur.

Page Title
Sayfa başlığı bir sayfadaki en önemli yerdir.Sayfa başlıkları arama sonuçlarında link olarak görünürler.

PageRank / PR
PageRank Google ın bulucularından Larry Page ve Sergey Brin tarafından geliştirilen bir algoritmadır. Bu algoritma size sıralanmış en iyi web sayfalarını görüntülemek için kullanılır.

Pay-Per-Click
Arama Sonuçlarında ilan veren kişilerin kullanıcıların ilanlarını tıkladığı kadar para ödedikleri sistem.

Robot
Arama motorları tarafından yeni web sayfaları bulmak, sıralamak ve taramak için kullanılan bir programdır. Daha çok bots olarak bilinir.

Robots.txt
Web sitenizin ana dizinine koyulan özel bir text dosyadır. Arama motorları sitenizi gezerken tüm sayfalarınızı tek tek ziyeret edip içeriğini depolar. Eğer sitenizde hazır olmayan sayfalar varsa yada arama motorları tarafından görünmesini istemediğiniz bölümler varsa Robots.txt dosyasına koyabilirsiniz.

Search Engine Friendly(Arama Motoru Dostu)
Aldatıcı yöntemler kullanmadan Arama Motorları ile aynı düşünerek dizayn ve optimize etme işlemi.

Search Enginee Optimization(Arama Motoru Optimizasyonu)
Bir Web sayfasını Arama Motoru sıralamalarında yüksek rank elde etmek için optimize(iyileştirme) etme işlemidir.

Search Engine Results Pages (SERPS-Arama Motoru Sonuç Sayfaları)
spesifik bir arama sorgusu sonucunda geri dönen web sayfa sıralamasıdır. Basit olarak, Arama Motoruna arama sorgunuzu yazıp arama yaptıktan sonra size sunulan arama motoru sonuç sayfasıdır.

Search Query-Search Term
İlginizi çeken konularla ilgili bir web siteyi bulmak için Arama Motoruna yazdığınız anahtar kelime veya anahtar cümledir.

Spam
Diğer sayfalara nazaran daha yüksek rank elde etmek için adaletsiz olarak kullanılan her türlü tekniktir.Genel olarak istenmeyen mail olarak bilinir.Açık olarak spam karalisteye alınmanıza neden olurlar.

URL
URL (Uniform Resource Locator)basit deyimle Web adresidir.

Spider
Daha çok crawler olarak adlandırılan bu programlar arama motorları tarafından oluşturulmuş web üzerinde sayfaları indekslemek için kullanılır. Web sayfalarını ziyaret ederler ve sitelerin içeriklerini toplarlar.

Site Map
site haritası herhangi bir web sitenin içinde kullanıcılara yardımcı olmak için ve arama motorlarının siteyi kolaylıkla taraması için dizayn edilmiş bir sayfadır.Bu sayfada web sitenin içindeki tüm sayfalar görünür ve tüm sayfalara erişilebilir.

Top Ten Ranking
Google da arama sorgusu sonucunda listelenmiş ilk 10 siteyi gösteren bir Web sayfasıdır.

Visitor-User
Sitenizi ziyaret eden kişiler yada kullanıcılar.

Arama Motorlarının listelerinde üst sıralarda kalmanın garantisi yoktur. Fakat sıralamada siteyi üst sıralarda tutmak için 1-2 etken vardır.Bunlar on page ve off page faktörlerdir.

On Page faktör sayfada yapılacak olan optimizasyon işlemi ile kendi elimizde olan faktördür.
Off Page faktör sayfanın haricinde, kendi elimizde olmayan faktördür.Sayfaya başka sitelerden verilen linklere bağlı faktördür.

Arama Motorları için Sitelerde anasayfalardaki metinlerin ilk birkaç satırları önem taşır.Bu yüzden bu satırların anlamlı olması sitelerin yararına olacaktır.Bir sitenin arama motorlarına yaptığı kaydın indekslenmesi ve arama sonuçlarında bulunması için iyi optimize edilmiş olması gerekir.Arama Motorları yapılan kaydın indekslenmesi için başvuran sitenin tümünün gezilmesine yardımcı olan, örümcek(Web-Spiders) veya robot denilen programlar kullanırlar. Dolayısıyla indekslenmesi için sitenin bir de içeriği olması şarttır.Ayrıca sitenin server ının bulunduğu ana klasöre robots.txt dosyası konulması örümceklere yardımcı olacaktır.

Sitenin tasarımından ve programlanmasından önce nasıl optimize edilmesi gerektiği düşünülmelidir. Bunun için kullanılacak anahtar kelime ve kelimelerinin belirlenmesi gerekir.

Site Tasarımı da arama motoru optimizasyonunda büyük önem taşır.

• Arama motorlarında siteleri incelemek için örümcek ve robotların kullanıldığından bahsetmiştik.Sitelerin yapım aşamasında daha çok metin kullanılması uygun olacaktır.Kullanılan bol miktarda resim ve grafikler arama motorlarındaki konumu olumsuz etkileyecektir.Çünkü örümcekler resimleri okuyamazlar.Metinler CSS kullanarak çok daha güzel bir hale getirilebilir. Çok sayıda grafik ve resim kullanmak sağlıklı olmayacaktır.
• Eğer resim kullanılıyorsa mutlaka bir alt tag kulanılmalıdır.Ayrıca kullanılan resimlere de anahtar kelimelerle isim vermek te yerinde olur.