CSS Complete Guide

What is CSS

CSS (Cascading Style Sheets) เป็นภาษาสไตล์ชีตที่ใช้สำหรับการจัดรูปแบบและออกแบบเว็บเพจ ทำงานร่วมกับ HTML เพื่อควบคุมการแสดงผลขององค์ประกอบต่างๆ บนหน้าเว็บ

Quick Started

index.html

html

<!-- External CSS -->
<link rel="stylesheet" href="styles.css">

<!-- Internal CSS -->
<style>
  body { font-family: Arial; }
</style>

<!-- Inline CSS -->
<p style="color: blue;">ข้อความนี้สีน้ำเงิน</p>

styles.css

css

/* เปลี่ยนสีพื้นหลังและฟอนต์ */
body {
  background: #f8f9fa;
  font-family: 'Segoe UI', sans-serif;
}

/* สไตล์ปุ่ม */
.button {
  background: #4285f4;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
}

Selectors

Selector Type	Example	Description
Element	`p { }`	เลือกทุกแท็ก `<p>`
Class	`.class { }`	เลือก element ที่มี class="class"
ID	`#id { }`	เลือก element เดียวที่มี id="id"
Attribute	`[type="text"]`	เลือก element ที่มี attribute ตรงตามเงื่อนไข
Pseudo-class	`a:hover`	เลือก element ในสถานะต่างๆ เช่น hover, focus
Pseudo-element	`p::first-line`	เลือกส่วนย่อยของ element
Combinator	`div p`	เลือก element ตามความสัมพันธ์
Universal	`* { }`	เลือกทุก element

Values and Units

Type	Values	Description
Absolute Units	`px`, `cm`, `mm`, `in`	หน่วยวัดแบบสัมบูรณ์ (px = 1/96 ของ 1 นิ้ว)
Relative Units	`em`, `rem`, `%`, `vw`, `vh`	หน่วยวัดแบบสัมพัทธ์กับองค์ประกอบอื่น
Color Values	Hex (`#RRGGBB`), RGB (`rgb(255,0,0)`), RGBA, HSL, ชื่อสี	รูปแบบค่าสีต่างๆ

Properties

Layout

Property	Description	Example
`display`	กำหนดการแสดงผล	`block`, `inline`, `flex`, `grid`
`position`	กำหนดตำแหน่ง	`static`, `relative`, `absolute`
`flex-direction`	ทิศทาง flex	`row`, `column`
`grid-template-columns`	กำหนดคอลัมน์ grid	`repeat(3, 1fr)`

Display

Value	Description	Example
`block`	ใช้พื้นที่เต็มบรรทัด	`div`, `p`
`inline`	อยู่ในบรรทัดเดียวกับข้อความ	`span`, `a`
`inline-block`	ผสมระหว่าง inline และ block	`button`
`flex`	จัด layout แบบ flexible box	`.container { display: flex; }`
`grid`	จัด layout แบบ grid	`.container { display: grid; }`
`none`	ซ่อน element	`.hidden { display: none; }`

Box Model

box-model.css

css

.box {
  width: 300px;
  padding: 20px;
  margin: 30px;
  border: 2px solid black;
}

Flexbox

flexbox.css

css

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Grid

grid.css

css

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

Color

Property	Description	Example
`color`	สีข้อความ	`#000000`, `red`
`background-color`	สีพื้นหลัง	`#ffffff`
`border-color`	สีเส้นขอบ	`blue`
`opacity`	ความโปร่งใส	`0.5`

Color Values

colors.css

css

/* Hex */
color: #4285f4;

/* RGB */
color: rgb(66, 133, 244);

/* RGBA */
background-color: rgba(66, 133, 244, 0.5);

/* HSL */
color: hsl(213, 90%, 61%);

/* Named colors */
border-color: red;

Color Functions

color-functions.css

css

/* Lighten */
background-color: lighten(#4285f4, 20%);

/* Darken */
border-color: darken(#4285f4, 15%);

/* Mix */
color: mix(red, blue, 50%);

Font

Property	Description	Example
`font-family`	ชนิดตัวอักษร	`Arial, sans-serif`
`font-size`	ขนาดตัวอักษร	`16px`, `1rem`
`font-weight`	ความหนา	`bold`, `700`
`line-height`	ระยะห่างบรรทัด	`1.5`, `24px`

Font Properties

font.css

css

.text {
  font-family: 'Segoe UI', sans-serif;
  font-size: 1rem;
  font-weight: 600; /* bold */
  font-style: italic;
  line-height: 1.5;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: underline;
}

Google Fonts Example

google-fonts.css

css

/* Import in HTML <head> */
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

/* Usage in CSS */
body {
  font-family: 'Roboto', sans-serif;
}

Animation

Property	Description	Example
`animation-name`	ชื่อ keyframe	`slidein`
`animation-duration`	ระยะเวลา	`0.3s`
`animation-timing-function`	การเคลื่อนไหว	`ease-out`
`animation-iteration-count`	จำนวนครั้ง	`infinite`

Keyframes

animation.css

css

@keyframes slidein {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.element {
  animation: slidein 0.3s ease-out;
}

Animation Properties

animation-props.css

css

.box {
  animation-name: slidein;
  animation-duration: 0.3s;
  animation-timing-function: ease-out;
  animation-delay: 0.2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Transition

Property	Description	Example
`transition-property`	คุณสมบัติ	`all`, `opacity`
`transition-duration`	ระยะเวลา	`0.2s`
`transition-timing-function`	การเปลี่ยนแปลง	`ease-in-out`
`transition-delay`	ดีเลย์	`0.1s`

transition.css

css

.button {
  transition: all 0.2s ease;
  background: #4285f4;
}

.button:hover {
  background: #34a853;
  transform: scale(1.05);
}

Design System

Responsive Design

Media Queries

responsive.css

css

@media (max-width: 768px) {
  /* Mobile styles */
}

Design Tokens

tokens.css

css

:root {
  /* Colors */
  --primary-500: #4285f4;
  --white: #ffffff;
  
  /* Fonts */
  --font-sans: 'Segoe UI', sans-serif;
  
  /* Spacing */
  --space-md: 1rem;
}

Theme

theme.css

css

:root {
  --primary-color: #4285f4;
  --text-color: #202124;
}

body {
  color: var(--text-color);
}

CSS Complete Guide ​

What is CSS ​

Quick Started ​

Selectors ​

Values and Units ​

Properties ​

Layout ​

Display ​

Box Model ​

Flexbox ​

Grid ​

Color ​

Color Values ​

Color Functions ​

Font ​

Font Properties ​

Google Fonts Example ​

Animation ​

Keyframes ​

Animation Properties ​

Transition ​

Design System ​

Responsive Design ​

Media Queries ​

Design Tokens ​

Theme ​