1. Tổng thể

• Toàn bộ khung được bao quanh bởi một viền màu tím (purple).
• Bên trong chia thành 2 cột ngang song song:
• • Cột bên trái: CSS
  • Cột bên phải: HTML

2. Phần tiêu đề

• Mỗi cột có một thanh tiêu đề màu xám nhạt ở phía trên.
• Nội dung tiêu đề:
• • Bên trái: chữ “CSS”
  • Bên phải: chữ “HTML”
• Chữ hiển thị dạng in đậm, rõ ràng.
• Hai tiêu đề nằm trên cùng một hàng, phân cách bởi một đường dọc.

3. Phần nội dung

• Cả hai cột bên dưới tiêu đề đều là vùng màu đen (background đen).
• Hiện tại:
• • Không có nội dung nào bên trong (để trống).
  • Có thể là vùng để nhập hoặc hiển thị code.

4. Bố cục chi tiết

• Cột CSS (bên trái):
• • Chiếm khoảng 2/3 chiều rộng tổng thể.
• Cột HTML (bên phải):
• • Chiếm khoảng 1/3 chiều rộng.
• Giữa hai cột có một đường phân cách dọc màu tím.

5. Ý nghĩa / mục đích

- Giao diện này thường dùng để:

• So sánh hoặc viết song song CSS và HTML.
• Làm trình soạn thảo code đơn giản (giống CodePen mini).
• Hỗ trợ học tập hoặc demo giao diện web.

.highlight {
border: 1px solid #FFA500;
font-weight: bold;
color: black;
font-size: 30px
}