0% found this document useful (0 votes)
2 views

8. CSS, Frames, and More Tags in HTML

The document covers the use of CSS to style HTML elements, explaining three methods: inline, internal, and external CSS. It also introduces frames in HTML, which allow multiple web pages to be displayed in a single browser window. Additionally, it includes tasks for practicing HTML programming with CSS and frames.
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
2 views

8. CSS, Frames, and More Tags in HTML

The document covers the use of CSS to style HTML elements, explaining three methods: inline, internal, and external CSS. It also introduces frames in HTML, which allow multiple web pages to be displayed in a single browser window. Additionally, it includes tasks for practicing HTML programming with CSS and frames.
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

8.

CSS, Frames, and More Tags in HTML


WALT:

• Understand how CSS styles HTML elements.


• Learn how to use frames in HTML.
• Explore additional important HTML tags.
Keywords:
1. CSS (Cascading Style Sheets) – Used to style HTML elements.
2. Frame – A section of a web page that can load another page.
3. HTML Tags – Elements used to structure web pages.
CSS (Cascading Style Sheets):

• CSS is used to change the appearance of web pages.


• It can be written in three ways:
i) Inline CSS: Written inside the HTML tag.
<p style="color:blue;">This is blue text.</p>
ii) Internal CSS: Written inside the <style> tag in the <head> section.
<style>
p { color: red; }
</style>
iii) External CSS: Written in a separate file (style.css) and linked using <link>.
<link rel="stylesheet" href="style.css">
Frames in HTML:

• Frames allow multiple web pages to be displayed inside a single browser window.
Example:
<frameset cols="50%,50%">
<frame src="page1.html">
<frame src="page2.html">
</frameset>
Example HTML Program:
Using CSS to Style a Web Page:
<!DOCTYPE html>
<html>
<head>
<style>
h1 { color: blue; text-align: center; }
p { font-size: 16px; color: green; }
</style>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a paragraph styled using CSS.</p>
</body>
</html>
Tasks:
Task 1: Write an HTML program that displays a heading and a paragraph using inline CSS.
Task 2: Modify your program to include internal CSS to change the background color and text color.
Task 3: Create a webpage that uses an iframe to display another website along with a styled paragraph.

You might also like