Trang web của bạn có trông tốt hơn nếu logo được dịch chuyển năm pixel sang phải hoặc có nền xanh dương? Việc thêm viền hoặc bóng cho hình ảnh trong các bài viết nổi bật có làm chúng nổi bật hơn không? Các trình duyệt hiện đại như Firefox đi kèm với Công cụ nhà phát triển Web (Web Developer Tools) cho phép bạn kiểm tra cấu trúc bên trong của trang web và thực hiện chỉnh sửa trực tiếp (live edits), xem kết quả theo thời gian thực.
Trong hướng dẫn này, bạn sẽ học cách sử dụng Công cụ nhà phát triển Web của Firefox để chỉnh sửa trực tiếp bất kỳ trang web nào.
Lưu ý: Hướng dẫn này áp dụng cho hầu hết các trình duyệt, bao gồm Chrome, Opera và Safari.
Gặp gỡ Công cụ nhà phát triển Web
Công cụ nhà phát triển Web của Firefox là một bộ công cụ toàn diện, từ hiển thị tất cả các phần tử DOM đến có thể đo tốc độ của nó. Cho hướng dẫn này, bạn chỉ cần công cụ "Inspector" (Trình kiểm tra) và "Style Editor" (Trình chỉnh sửa kiểu).
Khởi động Firefox và truy cập bất kỳ trang web nào/của bạn. Từ menu hamburger của Firefox (ở góc trên bên phải theo mặc định), chọn "Web Developer -> Style Editor" hoặc nhấn tổ hợp phím Shift + F7 trên bàn phím.
Bảng điều khiển Web Developer của Firefox sẽ xuất hiện ở một bên cửa sổ của nó – thường ở phần dưới cùng. Bạn có thể thay đổi vị trí của nó bằng cách nhấp vào nút ba chấm ở góc trên bên phải của bảng điều khiển và chọn "Dock to Right/Left" (Ghim phải/trái) hoặc "Separate Window" (Cửa sổ riêng). 
Lưu ý: Hướng dẫn này không chỉ cho bạn cách code HTML và CSS. Bạn có thể học cơ bản ở đây.
Kiểm tra phần tử (Inspecting the element)
Để có thể ảnh hưởng đến giao diện của một phần tử, bạn phải có thể xác định nó. Nhấp vào nút đầu tiên trên thanh công cụ của nó hoặc nhấn Ctrl + Shift + C trên bàn phím để bật chế độ chọn phần tử (element-picker mode).
Di chuyển chuột quanh trang web để thấy các phần tử khác nhau của trang web được làm nổi bật. Bên cạnh chúng, bạn sẽ thấy định danh chính của chúng hiển thị trong một pop-up.
Khi bạn nhấp vào một phần tử, nó sẽ được chọn trong tab Inspector của Công cụ nhà phát triển.
Khi bạn tìm thấy phần tử bạn muốn điều chỉnh, nhấp chuột phải vào mục của nó trong Inspector của Công cụ nhà phát triển và chọn từ cửa sổ pop-up xuất hiện – "Copy -> CSS Selector".
Bắt đầu chỉnh sửa trực tiếp (Live Edit)
Với CSS Selector của phần tử đã được sao chép vào clipboard, quay lại tab Style Editor trong cửa sổ Công cụ nhà phát triển. Nhấp vào nút "+" ở góc trên bên trái để "Create and append a new stylesheet to the document" (Tạo và thêm stylesheet mới vào tài liệu).
Dán CSS Selector của bạn vào stylesheet mới, trống. Thêm một khoảng trắng, theo sau là một cặp ngoặc nhọn mở và đóng.
Trong CSS, giao diện của một phần tử được định nghĩa bằng cách trước tiên "nhắm mục tiêu nó" (targeting it) bằng một định danh như CSS Selector đó, sau đó thêm một số quy tắc ảnh hưởng đến giao diện của nó, được nhóm bên trong ngoặc nhọn. Mọi thứ được đặt giữa ngoặc nhọn mở và đóng ảnh hưởng đến "phần tử được nhắm mục tiêu".
Ví dụ, nếu bạn thêm quy tắc dưới đây:
display: none;
Điều này sẽ ẩn phần tử nơi nó được sử dụng khỏi tầm nhìn. Có lẽ đây là cách dễ nhất để biết rằng bạn đang nhắm mục tiêu đúng phần tử trên trang của mình. Nếu nó biến mất, nó thực sự là cái bạn muốn, và bạn có thể xóa quy tắc này để thử các quy tắc khác. Nếu nó không biến mất, đã đến lúc quay lại Inspector và chọn thứ khác.
Chúng tôi sẽ không chỉ cho bạn cách code CSS ở đây, nhưng bạn có thể thử một số quy tắc phổ biến như:
border: 2px solid rgba(255,0,0,0.5); color: #333; font-size:20px;
Bạn sẽ nhận thấy phần tử của trang web thay đổi khi bạn thêm quy tắc vào stylesheet CSS.
Làm một ghi chú kết thúc, hãy nhớ rằng không có gì được lưu. Nếu bạn thích giao diện của các điều chỉnh của bạn, hãy sao chép mã của bạn ở đâu đó – trong file TXT hoặc ứng dụng ghi chú yêu thích của bạn – để bạn hoặc một nhà thiết kế/phát triển sẽ có thể thêm nó vào stylesheet của trang web để làm cho thay đổi vĩnh viễn. Nếu bạn cần học về CSS, hãy xem một số trò chơi trực tuyến giúp bạn thành thạo kỹ năng.