CSS nội bộ

Thuộc phần Tạo kiểu với CSS trong hành trình HTML của Coddy. Bài học 7 trên 76.

CSS nội bộ là cách thêm kiểu CSS vào tài liệu HTML bằng cách đặt chúng trong thẻ <style> ở phần <head> của tài liệu. Cách này cho phép bạn áp dụng kiểu cho nhiều phần tử trên cùng một trang mà không cần dùng bảng định kiểu bên ngoài. CSS nội bộ hữu ích khi tạo kiểu cho một tài liệu hoặc thay đổi kiểu nhanh chóng.

Đây là cú pháp cơ bản để sử dụng CSS nội bộ:

<!DOCTYPE html>
<html>
<head>
    <title>Internal CSS</title>
    <style>
        body {
            background-color: lightblue;
        }
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Page</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

Trong ví dụ này, thẻ <style> chứa các quy tắc CSS đặt màu nền của body thành xanh nhạt, màu của p (đoạn văn) thành xanh dương và cỡ chữ là 16 pixel. Các kiểu này sẽ áp dụng cho mọi phần tử trong tài liệu HTML.

Thử thách

Dễ

Bạn được cung cấp một tài liệu HTML. Dùng CSS nội bộ để định kiểu tài liệu với các thuộc tính sau:

Đặt màu nền của body thành lightgreen.
Đặt màu chữ của tất cả tiêu đề h1 thành red.
Đặt cỡ chữ của tất cả đoạn văn (p) thành 18px.

Bạn được cung cấp đoạn code CSS khởi đầu cho tài liệu này.

Tự làm thử

<!DOCTYPE html>
<html>
<head>
    <title>Internal CSS</title>
    <style>
        body {
            
        }
        h1 {
            
        }
        p {
            
        }
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>