Selectors 
อธิบายง่ายๆก็คือ tag ธรรมชาติที่เราใช้ๆกัน ใน html นั่นเอง ในไฟล์ .css เราจะเขียนเป็นรูปแบบ เช่น

body {
color:#000000;
font-size:14px;
}

หรือ

p {
color:red;
font-size:16px
}

รูปแบบจะเป็นแบบนี้ คือ tag { property : value ; } แต่ถ้ามีหลายๆ property ในบรรทัดสุดท้าย ไม่ต้องปิดด้วย ; ก็ได้ ให้ผลเหมือนกัน แต่ผมมักจะเขียน ; ทุกบรรทัดเพราะ กันพลาดนะครับ เมื่อกำหนดแบบนี้แล้ว text ที่อยู่ใน body ทั้งหมด จะเป็นสีดำ ฟ้อนต์ 14 และ ถ้าอยู่ใน <p>…..</p>จะเป็นสีแดง ขนาด 16

เป็นแท็กที่มีลักษณะพิเศษ ต้องประกาศไว้ตอนต้นของเอกสาร โดยไม่้ต้องมีแท็กปิด (closing tag)
มีรูปแบบการใช้ 3 รูปแบบ คือ

STRICT
-ใช้เมื่อไฟล์เอกสารของคุณ เป็น xhtml css แท้ๆ

TRANSITIONAL
-แบบนี้ค่อนข้างยืดหยุ่นกว่า คุณสามารถใช้ css และ attribute ปกติแทรกใน tag ได้ เช่น <p align=”left”>

FRAMESET
-ใช้เมื่อหน้าเว็บของคุณมีการใช้ frame

**จำเป็นต้องประกาศ DOCTYPE ถ้าต้องการให้ผ่าน Validator

ตรวจสอบความถูกต้องของ xhtml ได้ที่ http://validator.w3.org/

        XHTML (Extensible HyperText Markup Language) มาตรฐานใหม่ เพราะว่า html แบบเดิมๆนั้น ไม่สามารถแสดงผลได้ตรงกันในทุก browser ได้นั่นเอง ทาง องค์กร W3C  จึงได้กำหนดมาตรฐานใหม่ เป็น xhtml โดยนำข้อดีของ xml และ html มารวมเข้าด้วยกัน และเพิ่มกฎเกณฑ์บางประการ ให้มีความเข้มงวดมากยิ่งขึ้น เพื่อให้เป็นมาตรฐานเดียวกัน และแสดงผลในทุก browser ได้อย่างถูกต้อง อ่านต่อ คลิกที่นี่ »

6. Don’t worry about image borders
เลิกใช้ border=”0″ ในรูปภาพที่เป็น Link หากเราใช้ css จะง่ายกว่านั้นมาก

<style type="text/css">
    img { border : 0; }
</style>

<a href="#"><img src="/path/to/image.jpg" /></a>

7. Aligning text with form inputs
บ่อยครั้งที่เรา พิมพ์ข้อความ ถัดจากจาก ช่องกรอกข้อความ แต่มันไม่อยู่ในไลน์เดียวกัน วิธีง่ายๆที่จะจัดให้ช่องและข้อความอยู่ตรงกลาง ดังนี้

<style type="text/css">
    input, select { vertical-align : middle; }
</style>

Username: <input type="text" name="example" />

ตัวอย่างนี้อาจจะนึกไม่ออก ต้องลองใช้ดูนะครับ

อ่านต่อ คลิกที่นี่ »

      การเขียนเว็บด้วย CSS นั้นก็เพื่อลดปริมาณการ coding ลง ถ้ายิ่งเขียนแล้วโค้ดเพิ่มมากขึ้น นั่นก็คงไม่ใช่วิธีการเขียนที่ถูกต้อง เพราะเว็บที่ใช้ CSS นั้นจะต้อง

• ดาวน์โหลดเร็ว
• แสดงผลเร็ว
• แสดงผลเหมือนกันในหลาย browser
• สามารถแก้ไขปรับปรุงเปลี่ยนแปลงได้ง่าย

1. Use external style sheets
   คุณควรใช้ CSS โดยการการเรียกจากภายนอกทุกครั้ง เท่าที่จะเป็นไปได้ แทนที่จะเขียนอยู่ใน xhtml ของคุณโดยตรง แน่นอนว่าวิธีนี้จะช่วยให้หน้าเว็ยเพจของคุณมีขนาดเล็กลง และก็จะทำให้ดาวน์โหลดได้เร็วมากขึ้น และก็ช่วยเซฟ Bandwitch อีกด้วย

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

หรือสามารถเรียกโดยใช้ @import

<style type="text/css">       

    @import '/css/styles.css';       

</style>

อ่านต่อ คลิกที่นี่ »