เริ่มต้นกับ Cascading Style Sheet

Cascading Style Sheet (CSS) เป็นภาษาหนึ่งในการอธิบายการจัดเอกสาร Markup Language ไม่ว่าจะเป็น HTML, XHTML, XML ฯลฯ

ในหลายปีที่ผ่านมานี้การใช้งาน Style Sheet มีการใช้งานที่เพิ่มมากขึ้น เนื่องจากการความสามารถที่จัดเอกสารได้อย่างมีประสิทธิภาพ ได้รูปแบบสวยงาม และง่ายต่อการแก้ไข

การใช้งาน Style Sheet สามารถใช้งานได้ง่ายๆ โดยมีโครงสร้างดังนี้

selector{
    property1: value1;
    property2: value2;
}

ยกตัวอย่างเช่นการอธิบายการจัดรูปแบบของ tag P

P {
    text-align: left;
    color: #FFFFFF;
    font-family: Tahoma;
}

โดยจะให้การแสดงผลในทุกๆตัวอักษรที่อยู่ในนั้นเป็นอักษรสีขาวด้วย font ตระกูล Tahoma และจัดอักษรชิดซ้าย

การใช้งาน Style Sheet มีการใช้งานได้ 3 แบบกล่าวคือ

1. Inะternal Style โดยการวาง tag STYLE ไว้ในส่วน HEAD ของเอกสาร HTML

<head>
    <title>การใช้งาน Style Sheet</title>
    <style type="text/css">
        P {
            font-size: 3;
            color: blue;
            font-family: Arial;
        }
        A {
            font-size: 3;
            color: red;
            font-family: Arial; }
    </style>
</head>

2. Inline Style โดยการเพิ่ม attribute STYLE ลงใน tag ที่ต้องการ

<p style="color: #00FF00; font-family: Arial">ตัวอักษรนี้มีสีเขียวและเป็น font Arial</p>

3. External CSS File โดยการเพิ่ม tag LINK ลงในส่วน HEAD ของเอกสาร HTML โดยในเอกสาร stylesheet.css ก็เป็นการเขียนอธิบายตามภาษา CSS

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

การใช้งาน Class และ ID

Class เป็นกลุ่มคุณสมบัติต้นแบบ สามารถนำไปใช้ได้กับหลายๆ element ต่างจาก ID ซึ่งเป็นการระบุคุณสมบัติของ element ใด element หนึ่งเท่านั้นซึ่งมีการระบุในเอกสาร

การประกาศ Class

.whiteColor {
    color: #FFFFFF;
}
.blackColor {
    color: #000000;
}

หรืออาจจะระบุ tag ที่ต้องการให้มีการใช้งาน class ได้เช่น

P.whiteColor {
    color: #FFFFFF;
}
A.blackColor {
    color: #000000;
}

ซึ่งจะมีผลกับ tag ที่ระบุเท่านั้น เช่น

<p class="whiteColor">ตัวอักษรนี้สีขาว</p>

แต่จะไม่สามารถนำ whitecolor ไปใช้กับ tag อื่นๆ ได้

การประกาศ ID

#header {
    font-size: 16px;
    font-weight: bold;
}

เช่นเดียวกับ Class เราสามารถระบุ tag ลงไปก็ได้เช่น

P#header {
    font-size: 16px;
    font-weight: bold;
}

การใช้งานเช่น

<p id="header">ตัวอักษรตัวหนาขนาด 16 pixel</p>

เริ่มต้นกับ Cascading Style Sheet เขียนเมื่อ 2009.06.30 โดย Sheroku