Thêm hover và đổi thiết kế website bằng CSS

```css .slogan:hover { color: blue; font-style: italic; } ``` Khi con trỏ ở trong slogan, chữ của vùng chuyển xanh dương và nghiêng theo mẫu; đưa ra ngoài để đối chiếu. Các h2 và p ở vùng này không đặt màu riêng nên nhận màu từ slogan. Nếu một phần tử con có color riêng, không mặc định nó luôn nhận màu hover của cha. Trên thiết bị chỉ có cảm ứng, cách kích hoạt hover có thể khác chuột. Nội dung và liên kết vẫn cần đọc, dùng được khi không có trạng thái hover.

```css /* Đổi thiết kế bằng các khai báo viết sau trong cùng tệp. */ body { font-family: Georgia, serif; color: #562b43; } .banner { background-image: none; background-color: #f8eaf1; padding: 2rem 1rem; } nav, .footer { background-color: #f8f1e5; } .slogan { background-color: #fbf5f9; } .content .row { flex-direction: row-reverse; } ``` Tạo một bản sao thư mục dự án để thử. Giữ các HTML và media, thay nội dung css/style.css trên bản sao bằng nội dung css/style_khac.css có sẵn. Các khai báo phía trên là phần đổi thêm ở cuối tệp thứ hai; tệp đó vẫn chứa đầy đủ CSS nền của mẫu. Tải lại từng trang. Phông chuyển sang Georgia hoặc phông serif dự phòng; banner đổi nền hồng nhạt; hai cột nội dung đổi hướng xếp ở màn hình rộng. Các tệp HTML, tên và đích liên kết, dữ liệu câu lạc bộ vẫn giữ. Đây là một thiết kế khác dùng chung HTML. Khi tự đổi cả cấu trúc bố cục hoặc tên class, phải sửa HTML và CSS tương ứng; không phải mọi thiết kế mới đều chỉ cần thay một màu.