Internal CSS

Part of the Styling with CSS section of Coddy's HTML journey — lesson 7 of 76.

Internal CSS is a method of adding CSS styles to an HTML document by placing them within a <style> tag in the <head> section of the document. This approach allows you to apply styles to multiple elements on a single page without the need for external stylesheets. Internal CSS is useful for styling a single document or making quick style changes.

Here's the basic syntax for using internal CSS:

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

In this example, the <style> tag contains CSS rules that set the background color of the body to light blue, and the color of the p (paragraph) to blue, and the font size to 16 pixels. These styles will apply to all elements within the HTML document.

Challenge

Easy

You are given an HTML document. Use internal CSS to style the document with the following properties:

Set the background color of the body to lightgreen.
Set the text color of all h1 headings to red.
Set the font size of all paragraphs (p) to 18px.

You are given starter CSS code for it.

Cheat sheet

Internal CSS is added within a <style> tag in the <head> section of an HTML document:

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

Internal CSS allows you to apply styles to multiple elements on a single page without external stylesheets.

Try it yourself

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