CSS interno

Parte de la sección Styling with CSS del Journey de HTML de Coddy — lección 7 de 76.

CSS interno es un método para añadir estilos CSS a un documento HTML colocándolos dentro de una etiqueta <style> en la sección <head> del documento. Este enfoque le permite aplicar estilos a múltiples elementos en una sola página sin la necesidad de hojas de estilo externas. El CSS interno es útil para dar estilo a un solo documento o realizar cambios de estilo rápidos.

Aquí tienes la sintaxis básica para usar CSS interno:

<!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>

En este ejemplo, la etiqueta <style> contiene reglas CSS que establecen el color de fondo del body a azul claro, y el color del p (párrafo) a azul, y el tamaño de fuente a 16 píxeles. Estos estilos se aplicarán a todos los elementos dentro del documento HTML.

Desafío

Fácil

Se te proporciona un documento HTML. Usa CSS interno para dar estilo al documento con las siguientes propiedades:

Establece el color de fondo del body a lightgreen.
Establece el color de texto de todos los encabezados h1 a red.
Establece el tamaño de fuente de todos los párrafos (p) a 18px.

Se te proporciona código CSS inicial para ello.

Hoja de referencia

El CSS interno se añade dentro de una etiqueta <style> en la sección <head> de un documento HTML:

<head>
    <style>
        body {
            background-color: lightblue;
        }
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>

El CSS interno le permite aplicar estilos a múltiples elementos en una sola página sin hojas de estilo externas.

Pruébalo tú mismo

<!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>