CSS (viết tắt của từ Cascading Style Sheet) là ngôn ngữ định kiểu theo tầng được dùng để tạo bố cục, trang trí, thiết lập màu nền, màu chữ, kích thước... cho trang web.

Demo Giới Thiệu về Ngôn Ngữ CSS

Sử dụng HTML để thêm nội dung và mô tả cho trang. Sử dụng CSS giúp chúng ta tạo ra có được một website trông bắt mắt hơn.

CSS Là Ngôn Ngữ Định Kiểu Tầng

CSS được gọi là ngôn ngữ định kiểu theo tầng vì mã CSS được áp dụng theo nguyên tắc theo tầng (hay cascading). Điều này có nghĩa là nếu một đoạn code CSS được viết để định kiểu cho một phần tử HTML nào đó thì tất cả các các phần tử bên trong nó (hay phần tử con) của nó cũng sẽ được thừa kế kiểu trang trí này.

body {
    background-color: #32a4e7;
    color: #fff;
}

CSS Là Ngôn Ngữ Định Kiểu Theo Tầng

Ngoài việc thừa kế từ phần tử cha, thì các phần tử con có thể được thêm các kiểu trang trí khác hoặc viết đè các kiểu trang trí của phần tử cha.

Hãy xem ví dụ dưới đây để thấy các phần tử con h1 và p thừa kế cũng như viết đè các quy luật CSS áp dụng để trang trí cho phần tử cha body như thế nào:

body {
    color: black; /* thiết lập màu chữ */
    font-size: 14px; /* thiết lập cỡ chữ */
}

h1 {
    color: red; /* thiết lập màu chữ mới cho các phần tử h1 */
    font-size: 18px; /* thiết lập cỡ chữ mới cho các phần tử h1 */
}

p {
    color: blue; /* thiết lập màu chữ mới cho các phần tử p */
}

Định Kiểu Tầng CSS - Thừa Kế và Viết Đè Luật CSS Áp Dụng Cho Phần Tử Cha

HTML và CSS

HTML là ngôn ngữ đánh dấu với HTML từng thẻ sẽ được dùng với ý nghĩa khác nhau.

   
   


    
Tiêu Đề - Phần Tử H1
    
Nội dung văn bản, phần tử P
    
Nội dung văn bản, phần tử DIV

HTML được dùng để thêm nội dung và mô tả ý nghĩa của từng nội dung sử dụng các thẻ, tuy nhiên nó không quy định cách thức hiển thị các nội dung trên trang như thế nào.

Ngược lại với HTML, CSS không được sử dụng để thêm nội dung hay mô tả ý nghĩa của nội dung trên trang. CSS được sử dụng để thiết lập cách trình bày hay hiển thị của nội dung trên trang web.

Mới tìm hiểu về nghề lập trình website? Hãy cùng Green Academy tìm hiểu về ngôn ngữ CSS, một trong bộ ba công cụ không thể thiếu dành cho mọi lập trình viên website.

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

Ngôn ngữ CSS lần đầu tiên được đề xuất bởi Håkon Wium Lie vào ngày 10 tháng 10 năm 1994. Trong  thời điểm đó, Lie đang làm việc với Tim Berners-Lee (cha đẻ của ngôn ngữ HTML và mạng World Wide Web) tại CERN. CSS hoạt động dựa trên phương thức 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 (tag), lớp (class), ID hay nhiều kiểu khác. Sau đó, nó sẽ áp dụng các thuộc tính cần thay đổi lên vùng chọn đó.

Ví dụ về CSS:

p   {

    font-size:   100%;

    color:   dimgray;

  }

CSS hoạt động như thế nào?

Khi một trình duyệt web (browser) hiển thị một tài liệu, nó phải kết hợp nội dung cùng với kiểu trình bày thông tin của tài liệu đó. Trình duyệt sẽ xử lý tài liệu theo một số giai đoạn, mà Green Academy đã liệt kê bên dưới. Tuy nhiên, hãy nhớ rằng đây là một phiên bản rất đơn giản của một chuỗi những gì sẽ xảy ra khi một trình duyệt tải một trang web, và các trình duyệt khác nhau sẽ xử lý quá trình này theo những cách khác nhau. Và đây là những gì sẽ xảy ra:

1. Trình duyệt sẽ tải HTML (ví dụ như: tải nó từ mạng)
2. Trình duyệt chuyển đổi HTML thành DOM (Mô hình đối tượng tài liệu). DOM đại diện cho tài liệu trong bộ nhớ của máy tính. 
3. Sau đó, trình duyệt sẽ tìm nạp hầu hết các tài nguyên được liên kết với tài liệu HTML, chẳng hạn như hình ảnh và video được nhúng ... và CSS được liên kết! JavaScript được xử lý sau trong quá trình này. Green Academy sẽ nói về ngôn ngữ JavaScript sau ở bài viết sau để giữ cho mọi thứ đơn giản hơn.
4. Trình duyệt phân tích cú pháp CSS đã tìm nạp và sắp xếp các quy tắc khác nhau theo loại của chúng thành các "nhóm" khác nhau, ví dụ: phần tử, lớp, ID, v.v. Dựa trên các bộ chọn mà nó tìm thấy, trình duyệt sẽ tìm ra các quy tắc nên được áp dụng cho các nodes trong DOM và đính kèm kiểu cho chúng theo yêu cầu (bước trung gian này được gọi là cây kết xuất).
5. Cây kết xuất được bố trí trong cấu trúc mà nó sẽ xuất hiện sau khi các quy tắc đã được áp dụng cho nó.
6. Sau tất cả, hiển thị trực quan của trang sẽ được hiển thị trên màn hình (giai đoạn này được gọi là painting).

Có vẻ hơi khó hiểu phải không? Do đó sơ đồ sau đây sẽ cung cấp một cái nhìn đơn giản về quy trình hoạt động của CSS:

Tại sao trang web lại cần phải có CSS?

Để có thể tạo nên một trang web hoàn thiện cần phải có CSS bởi vì những lý do sau đây:

1. Giải quyết được nhiều vấn đề khác nhau

Nhờ có CSS, source code trang Web của bạn sẽ được tổ chức gọn gàng hơn, trật tự và dễ kiểm soát hơn. Nội dung trên website sẽ được tách bạch hơn, dễ dàng trong việc định dạng hiển thị hoặc chỉnh sửa lúc cần. Đồng thời, quá trình cập nhật nội dung sẽ rất dễ dàng và có thể hạn chế tối đa những sai sót trong phần soạn thảo HTML.

2. Tiết kiệm thời gian cho lập trình viên

Trước khi có ngôn ngữ CSS, các thẻ (tag) như phông chữ, màu sắc, kiểu nền, sắp xếp phần tử, kích thước, đường viền… phải được lặp lại trên mọi trang web. Đây là một quá trình rất dài, tốn rất nhiều thời gian và công sức của các lập trình viên. Nhờ có CSS, bạn sẽ dễ dàng kiểm soát, không mất thời gian oan uổng cho những dòng code không đáng.

Ví dụ: Nếu bạn đang phát triển một trang web lớn, nhiều thông tin, gồm nhiều mục với phông chữ và màu sắc khác nhau được thêm vào mỗi trang, đây sẽ là một nỗi ám ảnh vì bạn buộc phải code lại toàn bộ những thuộc tính trên ở mỗi trang dù chúng giống nhau.

3. Cung cấp thêm nhiều sự lựa chọn thuộc tính cho trang web

Một ưu điểm vượt trội khác của CSS, đó là nó sẽ cung cấp thuộc tính chi tiết hơn so với HTML trên cùng một giao diện trang web. Nhờ đó mà CSS cũng đem lại nhiều

CSS là phần mềm gì?

CSS trong dự án là gì?

Tại sao phải sử dụng CSS?

Class trong CSS để làm gì?