เป็นโปรแกรมสำหรับเขียน CSS ครับ มี property และ value ให้เลือกมากมายโดยไม่ต้องพิมพ์เอง มีทั้ง css level 1 และ level 2 เป็นโปรแกรมที่ต้องจ่ายเงินซื้อครับ ถ้าอยากได้ฟังก์ชั่น ที่ครบถ้วน สำหรับตัวที่นำมาให้ดาวน์โหลดนี้ คือ top style lite ครับ เป็น freeware ลองใช้กันดูครับ ช่วยได้มากเลย
ดาวน์โหลด top style lite

เป็นโปรแกรมฟรี ที่ดีมากเลยครับสำหรับใช้ทำ เมนูแบบ CSS ทั้ง แนวตั้ง แนวนอน มี template ให้เลือกหลายแบบครับ สามารถ generate เป็น Html และ CSS ได้เลย เหมาะสำหรับนำมาศึกษา ว่า ul li นำมาทำเมนู แบบ แท็ปได้อย่างไร ดาวน์โหลดได้ที่นี่เลยครับ css tab designer (1.3Mb)

เมื่อเราทำเว็บไซต์ ขึ้นมา หลายๆคน อาจจะคุ้นชินกับการ กำหนด font ในไฟล์ .css ใ้ห้เป็น 10pt บ้าง 12px หรือ 14px ซึ่งเป็นการ fix font ไม่ให้ขยายใหญ่ด้วยการกด ที่ menu ของ browser view/textsize เพราะจะทำให้ layout ของเราเละเทะนั่นเอง แต่ IE7 และ FF ได้ทำให้ผู้ใช้กด ctrl+ เพื่อขยายฟ้อนต์ได้แล้ว แม้ว่าคุณจะล็อกไว้ก็ตาม แต่ในขณะนี้(วันที่เขียนเรื่องนี้อยู่) ก็ยังมีคนอีกจำนวนมากเลยทีเดียว ที่ยังใช้ IE6 อยู่ หรือต่ำกว่า ก็จะไม่สามารถขยาย font ได้ หากเค้าสายตาไม่ค่อยดี ก็คงจะเลิกดูเว็บคุณไปเลย เพราะตัวหนังสือเ็ล็กเกินไป ดังนั้น ทางเลือกในการกำหนด font ก็มีอยู่หลายตัวด้วยกัน เริ่มจาก

• px ก็คือหน่วย pixel นั่นเอง มือโฟโต้ชอป ก็คงคุ้นเคยกันดีอยู่ เป็นหน่วยการวัด ขนาด ความละเอียดพื้นที่หน้าจอ
• em ย่อมาจาก emphasize คือ ขนาดจำนวนเท่า เช่น h1{fon-size:1.5em} h2{fon-size:1.4em} h3{fon-size:1.3em}
  ก็จะได้ว่า h1 มีขนาด 1.5 เท่า h2 มีขนาด 1.4 เท่า แล้วมันเท่าของอะไรล่ะ มันคือจำนวนเท่าของ body ครับ ถ้าคุณกำหนด ที่ body ไว้เป็น 14px h1 ก็จะใหญ่เป็น 1.5 เท่าของ 14px และถ้าคุณกำหนดไว้ 1em มันก็จะได้เท่ากับ 14px เท่าเดิม ถ้าคุณไม่ได้กำหนดขนาด font ไว้ที่ body ค่า default ของมันก็น่าจะอยู่ที่ 16px
• pt มาจาก point มืออิลัสเตรเตอร์ ก็คงคุ้นเคยกันดี 10pt ก็มีขนาดพอๆกับ 12px มักเป็นขนาดของฟ้อนต์ในงาน สิ่งพิมพ์แต่ใช้กับเว็บก็ได้เหมือนกัน เมื่อก่อนผมก็ชอบใช้
• % เปอร์เซ็นต์ ใช้บ่อยกับ layout แบบ liquid layout ก็คือ เปลี่ยนแปลงตามหน้าจอนั่นเอง หากจะใช้ กำหนดขนาด font ที่ body ขนาดกำลังดีก็จะอยู่ที่ประมาณ 76%ครับ
• ex คือ x-height ค่าความสูงของตัวอักษร x
• pc picas; 1pc=12pt

เมื่อเรามีไฟล์ .css เรียบร้อยแล้ว และได้ทำการเรียกไฟล์ในหน้า html แล้ว tag หลักๆที่เราจะใช้สำหรับกำหนด layout แทน table ก็คือ <div></div> นั่นเอง ส่วน <span></span> ก็ให้ผลอย่างเดียวกัน แต่ div จะมีคุณสมบัติในการขึ้นบรรทัดใหม่ tag ที่สามารถขึ้นบรรทัดใหม่ก็ เช่น <h1>,<p>,<li>,<div> แต่ span นั้น จะไม่ขึ้นบรรทัดใหม่ จึงมักจะใช้ ครอบส่วนที่เป็น text ครับ

Inheritance หากแปลตามตัวก็คือ การสืบทอด propertyบางตัว จะมีผลกับสิ่งที่อยู่ข้างในทั้งหมด เช่น

body{
color:green;
margin:5px;
}

สื่งที่อยู่ใน body จะมีฟ้อนต์เป็น สีเขียว ทั้งหมด แต่ margin จะทำเฉพาะ body เท่านั้น ไม่สืบทอดต่อไป

Commentการคอมเม้นในไฟล์ .css จะใช้ /* เป็นการเปิด และ */ เป็นการปิด เช่น

/* COMMENTS CANNOT BE NESTED */