Scribd
Upload
48 views

Inline CSS: Inline CSS Hello World

The document contains instructions for 3 exercises on using different types of CSS - inline, internal, and classes/IDs. In the first exercise, the user is asked to add inline CSS to a paragraph to make the text red. In the second, internal CSS is added to style the paragraph and remove the inline CSS. In the third, internal CSS is used to style paragraphs with a class and ID differently by color.

Uploaded by

Michelle Malabanan
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
48 views

Inline CSS: Inline CSS Hello World

The document contains instructions for 3 exercises on using different types of CSS - inline, internal, and classes/IDs. In the first exercise, the user is asked to add inline CSS to a paragraph to make the text red. In the second, internal CSS is added to style the paragraph and remove the inline CSS. In the third, internal CSS is used to style paragraphs with a class and ID differently by color.

Uploaded by

Michelle Malabanan
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

Inline CSS

INSTRUCTIONS: Add inline CSS to this paragraph to make the text red.

<!doctype html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>

Answer:

<!doctype html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p style="color:red;">Hello World</p>
</body>
</html>
Internal CSS
INSTRUCTIONS: Update the webpage from the previous exercise to add the styling as Internal CSS and
remove the inline CSS.

<!doctype html>
<html>
<head>
<title>Internal CSS</title>
</head>
<body>
<p style="color:red;">Hello World</p>
</body>
</html>

Answer:

<!doctype html>
<html>
<head>
<title>Internal CSS</title>
<style type="text/css">
p{
color:red;
}
</style>
</head>
<body>
<p>Hello World</p>
</body>
</html>
Classes And Ids
INSTRUCTIONS: Add internal CSS to the following webpage to make the first paragraph red and the
second paragraph blue.

<!doctype html>
<html>
<head>
<title>Classes and Ids</title>
</head>
<body>
<p class="red">This is a paragraph.</p>
<p id="blue">This is another paragraph!</p>
</body>
</html>

Answer:

<!doctype html>
<html>
<head>
<title>Classes and Ids</title>
<style type="text/css">
.red {
color:red;
}

#blue {
color:blue;
}
</style>
</head>
<body>
<p class="red">This is a paragraph.</p>
<p id="blue">This is another paragraph!</p>
</body>
</html>

You might also like