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

เป็นแท็กที่มีลักษณะพิเศษ ต้องประกาศไว้ตอนต้นของเอกสาร โดยไม่้ต้องมีแท็กปิด (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>

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