โค้ดข้างล่างเป็นการนำเอา วิธีการ CSS แต่ละตัวของ selector มารวมกัน
และเมื่อเราทำการบันทึกเป็นไฟล์ CSS และนำไปใช้กับไฟล์ HTML ก็จะเห็น
ผลที่เกิดขึ้น
body {
font-family: arial, helvetica, sans-serif;
font-size: 80%;
color: black;
background-color: #ffc;
margin: 1em;
padding: 0;
}
/* สำหรับกำหนด comment */
p {
line-height: 1.5em;
}
h1 {
color: #ffc;
background-color: #900;
font-size: 2em;
margin: 0;
margin-bottom: 0.5em;
padding: 0.25em;
font-style: italic;
text-align: center;
letter-spacing: 0.5em;
border-bottom-style: solid;
border-bottom-width: 0.5em;
border-bottom-color: #c00;
}
h2 {
color: white;
background-color: #090;
font-size: 1.5em;
margin: 0;
padding: 0.1em;
padding-left: 1em;
}
h3 {
color: #999;
font-size: 1.25em;
}
img {
border-style: dashed;
border-width: 2px;
border-color: #ccc;
}
a {
text-decoration: none;
}
strong {
font-style: italic;
text-transform: uppercase;
}
li {
color: #900;
font-style: italic;
}
table {
background-color: #ccc;
}
เนื้อหาที่เี่กี่ยวข้อง
- การใช้งาน CSS - ศึกษาิวิธีการนำ CSS ไปใช้กับ HTML
- สิ่งที่เรียกว่า Selects, Properties , and Values - สิ่งที่เป็นองค์ประกอบของ CSS
- สี Colours - การใช้งานสี
- ข้อความ Text - การจัดการเกี่ยวกับขนาดและรูปร่างของข้อความ
- Margins and Padding - การจัดการพื้นที่ระหว่างสิ่งต่างๆ
- Borders - การจัดการเกี่ยวกับขอบ
- รวมส่วนประกอบต่างข้างบนเป็น CSS
