CSS là gì? CSS được dùng như thế nào?

CSS là gì?

CSS là chữ viết tắt của Cascading Style Sheets. Nó là một ngôn ngữ được sử dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (HTML). Nói ngắn gọn hơn là ngôn ngữ tạo kiểu cho trang web. Bạn có thể hiểu đơn giản rằng, nếu HTML đóng vai trò định dạng các phần tử trên website như việc tạo ra các đoạn văn bản, các tiêu đề, bảng,…thì CSS sẽ giúp chúng ta có thể thêm style vào các phần tử HTML đó như đổi bố cục, màu sắc trang, đổi màu chữ, font chữ, thay đổi cấu trúc…

Cascading Style Sheets được phát triển bởi W3C (World Wide Web Consortium) vào năm 1996. Đơn gian 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 Cascading Style Sheets 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.

Ngoại tuyến (External CSS)

Trong External CSS, chúng ta sẽ sử dụng phần tử “link” để thêm các style sheet ở bên ngoài vào trong tài liệu HTML.

Trước hết chúng ta cần tạo các rules (quy tắc) trong một file riêng có phần đuôi mở rộng là .css. Tiếp theo, bạn cần thêm file CSS này vào phần tử head trong tài liệu HTML.

Đây là phương pháp phổ biến nhất để nhúng Cascading Style Sheets vào tài liệu HTML. Với cách chèn này, các lập trình viên có thể viết Cascading Style Sheets cho nhiều trang web khác nhau. Và bổ sung cùng một file Cascading Style Sheets cho tất cả các trang tương tự.

Hãy tham gia khóa học Frontend của Akdemy ngay hôm nay để trở thành một Front-end Developer. Đăng ký và khám phá cơ hội mới đang chờ đón bạn! Link khóa học: https://akdemy.net/cac-khoa-hoc/hoc-frontend/

Tham khảo:

+) https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/What_is_CSS

+) https://www.geeksforgeeks.org/css-introduction/