Đồ án tốt nghiệp: Website khóa học hỗ trợ kiểm tra và thanh toán online

Tài liệu đồ án tốt nghiệp xây dựng website khóa học trực tuyến tích hợp thi kiểm tra và thanh toán online. Phân tích thiết kế hệ thống chi tiết.

• Tác giả: Nguyễn Viết Vũ
• Người hướng dẫn: ThS. Phạm Thị Miên
• Trường học: Trường Đại học Giao thông Vận tải Phân hiệu tại TP. Hồ Chí Minh
• Chuyên ngành: Công nghệ thông tin
• Đề tài: Xây dựng website khóa học, hỗ trợ kiểm tra và thanh toán online
• Loại tài liệu: Báo cáo đồ án tốt nghiệp
• Năm xuất bản: 2021
• Địa điểm: TP. Hồ Chí Minh

Tóm tắt

I. Tổng quan đồ án website khóa học hỗ trợ kiểm tra thanh toán online

Thời đại công nghệ số thúc đẩy sự phát triển mạnh mẽ của phương thức giáo dục trực tuyến. Các cơ sở đào tạo cần hệ thống quản lý học tập hiện đại để tối ưu hóa nguồn lực. Đề tài đồ án website khóa học hỗ trợ kiểm tra, thanh toán online ra đời nhằm đáp ứng nhu cầu cấp thiết này. Mô hình mang lại giải pháp công nghệ toàn diện cho trung tâm đào tạo và người học. Hệ thống được thiết kế phân tầng rõ ràng gồm phân hệ người học và phân hệ quản trị viên. Phân hệ người học cung cấp trải nghiệm tiếp cận bài giảng đa phương tiện mượt mà. Học viên tra cứu thông tin khóa đào tạo trực quan. Quá trình đăng ký và kích hoạt khóa học diễn ra tự động thông qua cổng thanh toán. Chức năng làm bài kiểm tra trắc nghiệm cung cấp kết quả chấm điểm tức thì. Phân hệ quản trị trao quyền kiểm soát toàn diện cho trung tâm. Người quản trị dễ dàng đăng tải tài liệu học tập mới. Công cụ quản lý ngân hàng câu hỏi giúp cấu hình đề thi linh hoạt. Doanh thu từ các đơn hàng khóa học được thống kê minh bạch theo thời gian thực.

1.1. Mục tiêu xây dựng website khóa học trực tuyến

Mục tiêu trọng tâm của dự án là xây dựng nền tảng E-learning hoàn chỉnh. Hệ thống loại bỏ rào cản địa lý và thời gian trong giáo dục. Nền tảng số hóa toàn bộ lộ trình học từ lý thuyết đến thực hành. Giao diện trực quan giúp học viên thao tác thuận tiện trên nhiều thiết bị. Tốc độ tải trang nhanh mang lại trải nghiệm học tập liền mạch. Bên cạnh đó, hệ thống hướng đến tự động hóa công tác hành chính đào tạo. Ban quản lý cắt giảm chi phí vận hành lớp học truyền thống. Tỷ lệ chuyển đổi ghi danh khóa học tăng trưởng nhờ quy trình thanh toán số hóa tinh gọn. Nền tảng đảm bảo tính bảo mật dữ liệu người dùng tuyệt đối.

1.2. Đối tượng thụ hưởng và phạm vi ứng dụng đề tài

Đề tài hướng tới phục vụ trực tiếp hai nhóm đối tượng chính. Nhóm thứ nhất là học viên có nhu cầu tiếp cận kiến thức chuyên môn linh hoạt. Học viên chủ động lựa chọn các khóa học miễn phí hoặc có phí. Nhóm thứ hai là giảng viên và ban quản lý trung tâm đào tạo. Quản trị viên sử dụng công cụ để phân phối nội dung giảng dạy và giám sát học tập. Phạm vi ứng dụng của website bao gồm việc quản lý khóa học offline và phân phối bài giảng video online. Hệ thống đáp ứng nhu cầu đánh giá năng lực qua các bài thi trắc nghiệm định kỳ. Toàn bộ quy trình thanh toán học phí được xử lý trực tiếp trên website.

II. Phân tích hệ thống website khóa học kiểm tra thanh toán online

Các trung tâm giáo dục truyền thống đối mặt với nhiều khó khăn trong khâu vận hành. Việc quản lý học viên bằng sổ sách hoặc bảng tính rời rạc gây thất thoát dữ liệu. Quy trình thu học phí thủ công tốn kém nhân sự và dễ phát sinh nhầm lẫn. Người học phải chuyển khoản thủ công hoặc đến trực tiếp trung tâm để thanh toán. Sự bất tiện này làm giảm đáng kể tỷ lệ ghi danh khóa học. Bên cạnh đó, khâu đánh giá chất lượng học tập còn nhiều hạn chế. Việc in ấn đề thi giấy và chấm bài thủ công gây tốn thời gian. Giảng viên gặp áp lực lớn khi phải tổng hợp kết quả của hàng trăm học viên. Sự chậm trễ trong việc phản hồi điểm số làm giảm động lực học tập. Thiếu công cụ giám sát dẫn đến việc đánh giá năng lực chưa thực sự khách quan. Ngoài ra, trải nghiệm học trực tuyến cũ thường thiếu tính tương tác. Bài giảng video tải chậm và không tương thích tốt với thiết bị di động. Hệ thống phân quyền chưa chặt chẽ dẫn đến nguy cơ rò rỉ tài liệu nội bộ. Xây dựng một nền tảng chuyên biệt là yêu cầu cấp thiết để giải quyết toàn bộ các rào cản trên.

2.1. Thách thức trong xử lý kiểm tra và chấm điểm thủ công

Phương thức kiểm tra truyền thống bộc lộ nhiều điểm nghẽn nghiêm trọng. Việc tạo đề thi thủ công tiêu tốn nhiều nhân lực và thời gian của ban chuyên môn. Đề thi trên giấy thiếu tính ngẫu nhiên, dễ xảy ra tình trạng sao chép kết quả. Quy trình chấm bài thủ công tiềm ẩn sai sót và thiếu tính đồng nhất. Học viên mất nhiều ngày để nhận kết quả bài kiểm tra và nhận xét. Sự chậm trễ này cản trở quá trình ôn tập và bổ trợ kiến thức kịp thời. Ngoài ra, việc lưu trữ hồ sơ điểm thi giấy gây khó khăn cho công tác tra cứu. Hệ thống cũ thiếu các báo cáo thống kê trực quan về phổ điểm và chất lượng đào tạo.

2.2. Bất cập trong kiểm soát đơn hàng và thanh toán học phí

Quy trình thanh toán truyền thống thiếu tính liên kết tự động giữa ngân hàng và hệ thống. Nhân viên kế toán phải đối soát thủ công từng giao dịch chuyển khoản mỗi ngày. Sự chậm trễ trong xác nhận ủy nhiệm chi khiến học viên phải chờ đợi kích hoạt khóa học. Tình trạng gian lận qua hình ảnh biên lai giả mạo gây thất thoát tài chính cho đơn vị. Bên cạnh đó, việc quản lý đơn hàng thủ công dễ xảy ra nhầm lẫn thông tin khách hàng. Hệ thống không có cơ chế tự động gửi email xác nhận và hóa đơn điện tử. Quản lý doanh thu thiếu tính chính xác và không hỗ trợ dự báo tăng trưởng kịp thời.

III. Giải pháp công nghệ website khóa học hỗ trợ kiểm tra thanh toán

Đề tài triển khai mô hình kiến trúc MVC hiện đại trên nền tảng PHP và Laravel Framework. Kiến trúc này tách biệt rõ ràng giữa tầng dữ liệu, xử lý nghiệp vụ và giao diện hiển thị. Cấu trúc module hóa giúp mã nguồn tối ưu, dễ mở rộng và bảo trì trong tương lai. Cơ sở dữ liệu quan hệ MySQL lưu trữ an toàn thông tin khóa học, người dùng và đề thi. Phía giao diện người dùng ứng dụng HTML5, CSS3, JavaScript và Bootstrap. Giao diện đáp ứng tiêu chuẩn Responsive Web Design, hiển thị hoàn hảo trên mọi kích thước màn hình. Các tác vụ phía máy khách sử dụng kỹ thuật bất đồng bộ AJAX nhằm tăng tốc độ tải trang. Người dùng có trải nghiệm làm bài trắc nghiệm và xem video mượt mà, không bị gián đoạn. Hệ thống tích hợp cổng thanh toán trực tuyến qua API bảo mật chuẩn quốc tế. Mọi giao dịch tài chính được mã hóa đầu cuối và xác thực tức thì qua Webhook. Thuật toán tự động kích hoạt tài khoản ngay sau khi hệ thống nhận phản hồi thanh toán thành công.

3.1. Xây dựng module kiểm tra trắc nghiệm và chấm điểm tự động

Module kiểm tra trực tuyến được thiết kế với cơ chế trộn đề thi tự động. Quản trị viên dễ dàng thiết lập ngân hàng câu hỏi phân cấp theo độ khó. Hệ thống hỗ trợ nhiều định dạng câu hỏi như lựa chọn đơn, chọn nhiều đáp án hoặc đúng sai. Trong quá trình làm bài, bộ đếm ngược JavaScript kiểm soát thời gian thi chính xác. Dữ liệu câu trả lời được lưu tạm thời để tránh mất mát khi gặp sự cố mạng. Ngay khi nộp bài, thuật toán xử lý dữ liệu đối chiếu đáp án và chấm điểm ngay lập tức. Kết quả thi cùng biểu đồ phân tích kiến thức được trả về trực tiếp cho học viên.

3.2. Tích hợp cổng thanh toán trực tuyến và phân quyền quản trị

Hệ thống tích hợp cổng thanh toán điện tử qua API bảo mật với chữ ký số MD5 và SHA-256. Quy trình thanh toán diễn ra tự động qua giao diện quét mã QR hoặc thẻ ngân hàng. Cơ chế IPN (Instant Payment Notification) cập nhật trạng thái đơn hàng tức thì trên cơ sở dữ liệu. Ngay sau giao dịch, quyền truy cập khóa học được mở tự động cho học viên. Song song đó, phân hệ quản trị áp dụng mô hình phân quyền chặt chẽ RBAC (Role-Based Access Control). Admin nắm toàn quyền quản lý nội dung, giảng viên kiểm duyệt bài tập, và nhân viên theo dõi hóa đơn. Giải pháp loại bỏ hoàn toàn nguy cơ truy cập trái phép.

IV. Ứng dụng đồ án website khóa học kiểm tra và thanh toán online

Đồ án hoàn thành trọn vẹn mục tiêu nghiên cứu và xây dựng thành công website khóa học. Sản phẩm cung cấp giải pháp toàn diện cho hoạt động giảng dạy và quản lý học tập trực tuyến. Hệ thống vận hành ổn định trên môi trường máy chủ cục bộ và đám mây. Tốc độ phản hồi giao diện nhanh và tỷ lệ lỗi giao dịch ở mức tối thiểu. Nền tảng chứng minh tính khả thi cao khi ứng dụng vào các trung tâm đào tạo thực tế. Mô hình mang lại giá trị thiết thực trong việc cắt giảm chi phí vận hành cơ sở vật chất. Đơn vị đào tạo mở rộng quy mô tuyển sinh mà không bị giới hạn bởi không gian lớp học. Quy trình kiểm tra trắc nghiệm tự động nâng cao tính công bằng và tiết kiệm thời gian chấm thi. Cổng thanh toán trực tuyến hỗ trợ thu học phí minh bạch và tự động hóa khâu quản lý doanh số. Trong giai đoạn tiếp theo, hệ thống có thể tích hợp thêm các công nghệ hiện đại. Việc áp dụng trí tuệ nhân tạo để gợi ý lộ trình học tập cá nhân hóa sẽ nâng cao hiệu quả đào tạo. Công nghệ nhận diện khuôn mặt qua webcam giúp giám sát thi trực tuyến chống gian lận hiệu quả hơn.

4.1. Khả năng triển khai thực tế tại các trung tâm đào tạo

Website sở hữu khả năng đóng gói và triển khai linh hoạt trên các hạ tầng máy chủ phổ biến. Quá trình cấu hình tên miền và chứng chỉ bảo mật SSL diễn ra nhanh chóng. Nền tảng dễ dàng tùy biến giao diện và logo theo bộ nhận diện thương hiệu riêng của từng trung tâm. Hệ thống tương thích với các cổng thanh toán nội địa phổ biến tại Việt Nam. Các trung tâm tin học, ngoại ngữ và kỹ năng mềm có thể đưa vào vận hành ngay mà không tốn chi phí phát triển lại từ đầu. Đội ngũ quản lý tiết kiệm đáng kể thời gian đào tạo nhân sự nhờ giao diện trực quan.

4.2. Hướng mở rộng và nâng cấp hệ thống trong tương lai

Hệ thống định hướng mở rộng thêm ứng dụng di động trên nền tảng iOS và Android. Tính năng phòng học trực tuyến tương tác thời gian thực qua WebRTC sẽ được tích hợp. Bên cạnh đó, hệ thống sẽ ứng dụng học máy để phân tích hành vi học tập và dự đoán kết quả thi. Công nghệ Blockchain có thể được nghiên cứu để cấp phát chứng chỉ số chống làm giả. Nền tảng cũng sẽ mở rộng giao diện lập trình ứng dụng RESTful API cho bên thứ ba tích hợp. Những nâng cấp này giúp website đáp ứng toàn diện tiêu chuẩn E-learning quốc tế.

Trích đoạn nội dung tài liệu

Mở đầu 1.2 Chương 2: Cơ sở lý thuyết 1.3 Chương 3: Phân tích và thiết kế 1.4 Chương 4: Triển khai chương trình 1.5 Chương 5: Kết quả - Kiến nghị Nguyễn Viết Vũ – K58 2 CHƯƠNG 2. Tổng quan về ngôn ngữ lập trình PHP PHP là một từ viết tắt của cụm từ Hypertext Pre Processor. Là một ngôn ngữ lập trình thường được sử dụng để phát triển ứng dụng. Những thứ có liên quan đến viết máy chủ, mã nguồn mở hay mục đích tổng quát.

Ngoài ra, nó còn rất thích hợp để lập trình web và có thể dễ dàng nhúng vào trang HTML. Ngày nay, PHP đã chiếm tới hơn 70% web hiện nay, trang web giới thiệu của các công ty như influxwebtechnologies, Monamedia đều được xây dựng bằng WordPress – một mã nguồn được viết bởi ngôn ngữ PHP. Bởi những tính năng như tối ưu hóa cho các ứng dụng web. Tốc độ load web nhanh, nhỏ gọn, cú pháp giống C và JAVA.

Rất dễ học và thời gian xây dựng sản phẩm tương đối ngắn hơn so với các ngôn ngữ khác hiện nay. Ưu và nhược điểm của PHP Qua những giới thiệu trên, ta có thể thấy ngôn ngữ này có khá nhiều tính năng hay. Tuy nhiên, cũng giống như các ngôn ngữ lập trình khác. Chúng đều có ưu và nhược điểm riêng, cụ thể là dưới đây.

Ưu điểm PHP được sử dụng miễn phí. Cú pháp và cấu trúc của PHP tương đối dễ dàng. Là ngôn ngữ thông dụng với các công ty hiện nay Nhược điểm PHP còn hạn chế về cấu trúc của ngữ pháp. Nó không được thiết kế gọn gàng và không được đẹp mắt như những ngôn ngữ lập trình khác.

PHP chỉ có thể hoạt động và sử dụng được trên các ứng dụng trong web. Ứng dụng thực tế của ngôn ngữ PHP Không phải tự nhiên mà PHP trở thành ngôn ngữ lập trình web phổ biến nhất hiện nay, nhất là khi nó được sử dụng trong các dịch vụ thiết kế website trọn gói của nhiều công ty lớn, đó là bởi vì tính linh hoạt của PHP, có thể chèn PHP ngay trong code HTML hoặc viết thành những file riêng, giúp cho các lập trình viên có thể dễ dàng quản lý code của mình. Với khả năng tương thích với HTML5 và có thể gắn trực tiếp vào code, PHP hiển nhiên trở thành ngôn ngữ thiết kế web phổ biến nhất hiện nay, được nhiều người sử dụng, cũng như các ưu điểm dễ học, ứng dụng cao và phù hợp với nhiều đối tượng, nhiều mục đích website khác nhau mà PHP ngày càng được thịnh hành, minh chứng chính là sự phát triển của các website viết bằng PHP và sự phổ biến hơn của các CMS như Joomla, Drupal và đặc biệt là WordPress – những mã nguồn được viết bằng PHP càng khiến nó trở nên phổ biến hơn. Nguyễn Viết Vũ – K58 3 Tất cả các cơ sở trên đây giải thích tại sao PHP được ứng dụng để thiết kế web trọn gói trong thực tế hiện nay mà không phải là bất kỳ ngôn ngữ nào khác.

Tổng quan về Laravel Laravel là một trong những PHP web framework phổ biến nhất theo mẫu MVC (Model-View- Controller). Laravel framework là nguồn mở và miễn phí giúp bạn đưa ra các sản phẩm chất lượng cao. Các code sẽ được giảm thiểu đi, nhưng vẫn đạt tiêu chuẩn ngành, giúp bạn tiết kiệm được hàng trăm giờ đồng hồ dành cho việc phát triển. Ưu điểm của Laravel Sử dụng các tính năng mới nhất của PHP Một trong những tính năng làm cho PHP Laravel framework trở nên nổi bật hơn tất cả đó là nó sử dụng tất cả các tính năng mới của PHP.

Các framework khác không tận dụng được điều này. Sử dụng Laravel 5 bạn sẽ sở hữu một số tính năng mới nhất mà PHP cung cấp, đặc biệt là trong Namespaces, Interfaces, Overloading, Anonymous functions và Shorter array syntax. Đã có rất nhiều bộ CMS nổi bật được viết trên nền Laravel framework ra đời, từ những bộ CMS đơn giản nhất đến những bộ "siêu mạnh", từ mã nguồn mở đến thương mại. Tài liệu tuyệt vời Tài liệu của Laravel rất thân thiện với nhà phát triển.

Tất cả các phiên bản của Laravel được phát hành cùng với các tài liệu phù hợp, bạn sẽ tìm thấy những giải thích chi tiết về coding style, methods và classes. Tích hợp với dịch vụ mail Các ứng dụng web bắt buộc phải thông báo cho người dùng về các deal và offer mới. Đăng ký người dùng mới cũng rất quan trọng (nghĩa là thông báo cho người dùng mới khi anh ấy/ cô ấy đăng ký). Framework được trang bị API sạch trên thư viện SwiftMailer.

Và có các driver cho SMTP, Mailgun, SparkPost, Mandrill, PHP's "mail" function, Amazon SES, và "sendmail" giúp bạn gửi thư qua các dịch vụ dựa trên đám mây hoặc dịch vụ local. Hỗ trợ cache backend phổ biến Laravel framework hỗ trợ các cache backend như Memcached và Redis out-of- the-box. Bạn cũng có thể tùy chỉnh nhiều cấu hình cache. Công cụ tích hợp cho dòng lệnh - Artisan Các nhà phát triển thường thấy tẻ nhạt khi thực hiện các nhiệm vụ lập trình lặp đi lặp lại vì chúng rất tốn thời gian.

Công cụ dòng lệnh có tên Artisan giúp họ tạo khung code và quản lý hệ thống cơ sở dữ liệu hiệu quả. Artisan giúp tạo các tệp MVC cơ bản và quản lý tài sản, bao gồm cả các cấu hình tương ứng của chúng. Gói và nguồn lực sẵn có Nguyễn Viết Vũ – K58 4 Bạn sẽ được hưởng lợi ích từ npm package và bower package bằng cách kết hợp framework với Gulp và elixir, giúp trong việc sửa đổi tài nguyên. Việc tích hợp này sẽ giải quyết các phụ thuộc và là nguồn đáng tin cậy nhất trong thế giới PHP.

Giảm chu kỳ phát triển sản phẩm Bạn có thể giảm đáng kể chu kỳ phát triển sản phẩm vì framwork giúp tích hợp nhanh hơn, bên cạnh đó là cộng đồng hỗ trợ rất lớn - Laracasts.2 Nhược điểm của Laravel Không hỗ trợ tính năng thanh toán Sẽ không đáng lo ngại nếu bạn không tự mình quản lý các khoản thanh toán, bởi vì bạn sẽ phải tuân thủ các quy tắc tuân thủ PCI. Trì hoãn các dịch vụ như Stripe và Paypal sẽ giải quyết vấn đề đó. Bạn cũng có thể thử bất kỳ trang web thương mại trực tuyến nào và xây dựng ứng dụng của mình trong kho template có sẵn, hoặc sử dụng các thư viện của Framework cho phép bạn tích hợp các phương thức thanh toán. Tuy nhiên, hầu hết các nhà giao dịch điện tử nên được nhúng bộ xử lý thanh toán của bên thứ ba nhằm thuận tiện hơn.

Thiếu sự liên tục giữa các phiên bản Không có chuyển đổi liền mạch từ Laravel 4 sang 5. Nếu cố cập nhật code, bạn có thể sẽ phá vỡ ứng dụng. Chất lượng Một số thành phần trong framework không được thiết kế tốt. Ví dụ, dependency injection đôi khi trở nên phức tạp không cần thiết.

Các tài liệu khá nặng. Bạn phải học hỏi nhiều trước khi bắt đầu xây dựng các ứng dụng. Do đó, đây không phải là một lựa chọn tốt cho các nhà phát triển nghiệp dư. Tuy nhiên, framework vẫn đang được cải thiện rất nhiều.

Phiên bản 5 đã tốt hơn nhiều với số lượng sai sót cũng ít hơn. Một số nâng cấp có thể có vấn đề Đây không chỉ là vấn đề của Laravel mà là của các PHP framework. Vì vậy, các nhà phát triển nên có biện pháp phòng ngừa trước khi nâng cấp mobile application/website. Thường không cung cấp sự phong phú cho ứng dụng di động Việc tải lại toàn trang có thể hơi nặng trong các mobile app khi so sánh với các website.

Trong những trường hợp như vậy, các nhà phát triển web có xu hướng chỉ sử dụng framework như backend JSON API.1 Giới thiệu về HTML. HTML là chữ viết tắt của cụm từ HyperText Markup Language (dịch là Ngôn Nguyễn Viết Vũ – K58 5 ngữ đánh dấu siêu văn bản) được sử dụng để tạo một trang web, trên một website có thể sẽ chứa nhiều trang và mỗi trang được quy ra là một tài liệu HTML (sau đây có thể gọi là một tập tin HTML). Một tài liệu HTML được hình thành bởi các phần tử HTML (HTML Elements) được quy định bằng các cặp thẻ (tag), các cặp thẻ này được bao bọc bởi một dấu ngoặc nhọn (ví dụ <html>) và thường là sẽ được khai báo thành một cặp, bao gồm thẻ mở và thẻ đóng (ví <strong> dụ </strong> và ). Các văn bản muốn được đánh dấu bằng HTML sẽ được khai báo bên trong cặp thẻ (ví dụ <strong>Đây là chữ in đậm</strong>).

Nhưng một số thẻ đặc biệt lại không có thẻ đóng và dữ liệu được khai báo sẽ nằm trong các thuộc tính (ví dụ như thẻ <img>). Một tập tin HTML sẽ bao gồm các phần tử HTML và được lưu lại dưới đuôi mở rộng là. Vai trò của HTML. HTML là một ngôn ngữ đánh dấu siêu văn bản nên nó sẽ có vai trò xây dựng cấu trúc siêu văn bản trên một website, hoặc khai báo các tập tin kỹ thuật số (media) như hình ảnh, video, nhạc.

Điều đó không có nghĩa là chỉ sử dụng HTML để tạo ra một website mà HTML chỉ đóng một vai trò hình thành trên website. HTML – Xây dựng cấu trúc và định dạng các siêu văn bản. CSS – Định dạng các siêu văn bản dạng thô tạo ra từ HTML thành một bố cục website, có màu sắc, ảnh nền… Javascript – Tạo ra các sự kiện tương tác với hành vi của người dùng (ví dụ nhấp vào ảnh trên nó sẽ có hiệu ứng phóng to). Dễ hiểu hơn, bạn hãy nghĩ rằng nếu website là một cơ thể hoàn chỉnh thì HTML chính là bộ xương của cơ thể đó, nó như là một cái khung sườn vậy.

Như vậy, dù website thuộc thể loại nào, giao tiếp với ngôn ngữ lập trình nào để xử lý dữ liệu thì vẫn phải cần HTML để hiển thị nội dung ra cho người truy cập xem. Giới thiệu về CSS. CSS là chữ viết tắt của Cascading Style Sheets, nó chỉ đơn thuần là một dạng file text với phần tên mở rộng là. Trong Style Sheet này chứa những câu lệnh CSS.

Mỗi một lệnh của CSS sẽ định dạng một phần nhất định của HTML ví dụ như: font của chữ, đường viền, màu nền, căn chỉnh hình ảnh… Trước đây khi chưa có CSS, những người thiết kế web phải trộn lẫn giữa các thành phần trình bày và nội dung với nhau. Nhưng với sự xuất hiện của CSS, người ta có thể tách rời hoàn toàn phần trình bày và nội dung. Giúp cho phần code của trang web cũng gọn hơn và quan trọng hơn cả là dễ chỉnh sửa hơn. CSS được phát triển bởi W3C (World Wide Web Consortium) vào năm 1996, vì một lý do đơn giản.

HTML không được thiết kế để gắn tag để giúp định dạng trang web.