top of page
Picsart_25-11-01_00-39-09-356.png

SidSharmaji

Search

Frames and Framesets tags, Inline frames, Meta Tags. CSS: Introduction to CSS, CSS Syntax, CSS Selectors, Ways to Insert CSS, Background image handling, Background color management using CSS, Text man

  • Writer: Siddharth Sharma
    Siddharth Sharma
  • Mar 1, 2025
  • 3 min read

Frames and Framesets in HTML

Frames allow a web page to be divided into multiple sections, where each section loads a different document.

1. Frameset Tag

Framesets replace the <body> tag and are used to define multiple sections.

Example: Creating a Frameset


<!DOCTYPE html>
<html>
<head>
    <title>Frameset Example</title>
</head>
<frameset cols="50%,50%">
    <frame src="page1.html">
    <frame src="page2.html">
</frameset>
</html>
Creating a Frameset
Creating a Frameset

This divides the page into two columns, each loading a different HTML file.


2. Inline Frames (Iframe)

An iframe (<iframe>) is used to embed another webpage inside the current page.

Example: Using Iframe


<!DOCTYPE html>
<html>
<head>
    <title>Iframe Example</title>
</head>
<body>
    <h2>Inline Frame Example</h2>
    <iframe src="https://www.example.com" width="500" height="300"></iframe>
</body>
</html>
Using Iframe
Using Iframe

This embeds the webpage from example.com inside the current page.


3. Meta Tags

Meta tags provide metadata about an HTML document, such as character set, viewport settings, and SEO keywords.


Example: Using Meta Tags

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Learn about HTML and CSS">
    <meta name="keywords" content="HTML, CSS, Web Design">
    <meta name="author" content="Siddharth Sharma">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meta Tags Example</title>
</head>
<body>
    <p>Check out the meta tags in the HTML head section!</p>
</body>
</html>
Using Meta Tag
Using Meta Tag

  • charset="UTF-8" → Defines character encoding.

  • description → Describes the page.

  • keywords → Helps with SEO.

  • author → Specifies the author.

  • viewport → Makes the page responsive.


CSS (Cascading Style Sheets)

CSS is used to style HTML elements.

1. CSS Syntax

CSS Syntax
CSS Syntax

Example


body { 
	background-color: lightblue; 
}

This changes the background color of the page.


2. CSS Selectors

Selectors define which elements a style applies to.

Types of CSS Selectors

Selector Type

Example

Explanation

Element Selector

p { color: red; }

Selects all <p> elements.

Class Selector

.highlight { font-weight: bold; }

Selects elements with class="highlight".

ID Selector

#unique { font-size: 20px; }

Selects an element with id="unique".

Group Selector

h1, h2 { color: blue; }

Selects multiple elements.

Universal Selector

* { margin: 0; }

Selects all elements.

Example

Example Of CSS Selectors
Example Of CSS Selectors

3. Ways to Insert CSS

a) Inline CSS (Inside an element)

html

<p style="color: blue;">This is inline CSS</p>

b) Internal CSS (Inside <style> tag)

html

<head>
   <style>
        p { color: green; }
    </style>
</head>

c) External CSS (In a separate file)

  1. Create a CSS file (style.css)

css

p {
  color: purple;
}

  1. Link it to the HTML

html

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

4. Background Image Handling in CSS

css

body {
    background-image: url("background.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}
Background Image Handling
Background Image Handling

This applies an image as the background and ensures it covers the full screen.


5. Background Color Management using CSS

css

body {
    background-color: lightgray;
}

This sets a light gray background color.


6. Text Management using CSS

css

p {
    color: navy;
    text-align: center;
    text-transform: uppercase;
    text-decoration: underline;
}

This styles text with color, alignment, uppercase transformation, and underlining.


7. Font Management using CSS

css

p {
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
}

This sets the font type, size, and weight.


8. Combining Internal, External, and Inline CSS

Example

html


<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css"> <!-- External CSS -->
    <style>
        p { color: green; } /* Internal CSS */
    </style>
</head>
<body>
    <p style="color: red;">This is inline CSS</p> <!-- Inline CSS -->
    <p>This text follows internal CSS</p>
</body>
</html>
Combining Internal, External, and Inline CSS
Combining Internal, External, and Inline CSS

Priority Order: Inline > Internal > External.


Conclusion

  • Frames divide a page into sections using <frameset>, while <iframe> embeds another webpage.

  • Meta Tags provide metadata for SEO and responsiveness.

  • CSS is used for styling:

    • Selectors (class, id, element)

    • Ways to apply CSS (Inline, Internal, External)

    • Background, text, and font management.

 
 
 

Comments

bottom of page