CSS

CSS (Cascading Style Sheets – tạm dịch: Tập tin định kiểu tầng) là ngôn ngữ dùng để mô tả cách trình bày (giao diện) của một tài liệu HTML. Nói đơn giản, CSS giúp làm đẹp trang web: chỉnh màu sắc, font chữ, bố cục, khoảng cách, hiệu ứng chuyển động, v.v.

CSS được phát triển bởi W3C (World Wide Web Consortium) vào năm 1996, vì HTML không được thiết kế để gắn tag để giúp định dạng trang web.

Phương thức hoạt động của CSS là nó sẽ tìm dựa vào các vùng chọn, vùng chọn có thể là tên một thẻ HTML, tên một ID, class hay nhiều kiểu khác. Sau đó là nó sẽ áp dụng các thuộc tính cần thay đổi lên vùng chọn đó.

Mối tương quan giữa HTML và CSS rất mật thiết. HTML là ngôn ngữ markup (nền tảng của site) và CSS định hình phong cách (tất cả những gì tạo nên giao diện website), chúng là không thể tách rời.

Cấu trúc một đoạn CSS

selector {
property: value;
property: value;
}

Trong đó:

• Selector (bộ chọn): Chỉ định phần tử HTML cần áp dụng kiểu (ví dụ: h1, .class, #id)
• Property (thuộc tính): Tên thuộc tính cần thay đổi (màu sắc, kích thước…)
• Value (giá trị): Giá trị cụ thể của thuộc tính

Ví dụ:

h1 {
color: blue;
font-size: 30px;
text-align: center;
}

Cách áp dụng CSS cho đoạn mã HTML: 

Internal CSS: viết trong thẻ <style> bên trong file HTML. Ví dụ:

<style>
h1 {
color: blue;
font-family: Arial;
text-align: center;
}
p {
color: gray;
font-size: 18px;
}
</style>

<h1>Chào mừng bạn đến với trang web của tôi</h1>
<p>Đây là đoạn văn giới thiệu.</p>

External CSS: viết trong file .css riêng và liên kết bằng:

<link rel="stylesheet" href="style.css">

Inline CSS: viết trực tiếp trong thẻ HTML:

<p style="color: red;">Xin chào</p>

Lợi ích khi sử dụng CSS

• Giao diện chuyên nghiệp, hiện đại.
• Responsive (giao diện tự co giãn theo màn hình).
• Hiệu ứng chuyển động, animation.
• Quản lý giao diện dễ dàng bằng cách tách biệt code HTML và CSS.

Bài viết khác

Web Security

Khái niệm Web Security Web Security là tập hợp các nguyên tắc, biện pháp và công nghệ nhằm bảo vệ website, ứng dụng web và dữ liệu khỏi các hành vi truy cập trái phép, tấn công độc hại hoặc khai thác lỗ hổng. Nó không chỉ bao gồm việc ngăn chặn hacker, mà còn […]

Đọc thêm

Markdown

Markdown là một ngôn ngữ đánh dấu nhẹ (lightweight markup language) dùng để định dạng văn bản thuần túy (plain text), thường được sử dụng trong các tài liệu như README, bài viết blog, tài liệu hướng dẫn, và cả trong GitHub, Stack Overflow, hoặc các trình soạn thảo như VS Code, Obsidian… Markdown được […]

Đọc thêm

HTML

HTML (HyperText Markup Language) là ngôn ngữ đánh dấu siêu văn bản, được dùng để xây dựng cấu trúc của một trang web. Nói cách khác, HTML cho trình duyệt biết nội dung nào sẽ hiển thị và hiển thị như thế nào (như tiêu đề, đoạn văn, hình ảnh, liên kết…). Một tài liệu […]

Đọc thêm

Browser

Browser (Web Browser, Trình duyệt web) là phần mềm trên máy tính, điện thoại hoặc thiết bị thông minh, cho phép người dùng truy cập, hiển thị và tương tác với các trang web, tài nguyên Internet. Về bản chất, trình duyệt gửi các yêu cầu (HTTP/HTTPS request) đến máy chủ web, nhận về mã […]

Đọc thêm

Tìm hiểu DNS

DNS là gì? DNS (Domain Name System) là một dịch vụ phân giải tên miền, giúp chuyển đổi các tên miền (ví dụ: www.ducphat.com) thành địa chỉ IP (ví dụ: 93.184.216.34) và ngược lại. Thay vì phải nhớ dãy số IP, chúng ta chỉ cần nhập tên miền, DNS sẽ tìm kiếm địa chỉ IP […]

Đọc thêm

Tìm hiểu giao thức HTTP

HTTP là gì? HTTP (HyperText Transfer Protocol) là giao thức truyền tải siêu văn bản, dùng để trao đổi dữ liệu giữa client (thường là trình duyệt web) và server (máy chủ web) qua mô hình request–response. HTTP hoạt động ở tầng ứng dụng (Application Layer) trong mô hình OSI/TCP-IP, dựa trên kết nối TCP […]

Đọc thêm