Scribd
Upload
10 views

CSS_Frames_Layers_Forms_Lecture

CSS frames

Uploaded by

Rida Irfan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
10 views

CSS_Frames_Layers_Forms_Lecture

CSS frames

Uploaded by

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

CSS, Frames, No Frames, Layers, Forms, and

Form Objects
1. Introduction to CSS (Cascading Style Sheets)

Definition and Importance:


Cascading Style Sheets (CSS) is a language used to define the visual appearance of web pages. It
allows developers to control the layout, color schemes, fonts, spacing, and overall design across multiple
pages. The separation of HTML (structure) and CSS (presentation) is a key principle in modern web design.

CSS Syntax:
A CSS rule consists of a selector and a declaration block:
selector {
property: value;
}

- Selector: Targets the HTML element to be styled (e.g., `p` for paragraphs, `h1` for headings).
- Property: The aspect of the element to style (e.g., `color`, `font-size`).
- Value: The setting applied to the property (e.g., `blue`, `16px`).

Types of CSS:
1. Inline CSS:
Directly within the HTML tag using the `style` attribute.
Example:
<p style="color:blue;">This is a blue paragraph.</p>
2. Internal CSS:

Defined inside the `<style>` tag within the `<head>` section of an HTML document.
<style>
p { color: blue; }
</style>

3. External CSS:
Written in a separate CSS file and linked using the `<link>` tag.
<link rel="stylesheet" href="styles.css">

CSS Box Model:


The box model describes how CSS elements are structured on a page. Every element in CSS is a box
that consists of four parts:

1. Content: The actual text or media inside the element.


2. Padding: Space around the content (inside the element's border).
3. Border: The boundary around the padding (optional).
4. Margin: Space outside the border between the element and others.
Styling Elements:
CSS can style elements in a variety of ways:
- Color: Change text or background colors.
p{

color: red;

- Fonts: Set custom fonts or font sizes.


h1 {

font-family: Arial, sans-serif ;

font-size: 24px;

2. Frames
Frames in HTML allow dividing a web page into multiple sections, with each section capable of
loading a different HTML document. This technique was common in the early days of web design for
creating multi-view interfaces.

Syntax and Example:

<frameset cols="30%,70%">
<frame src="menu.html">
<frame src="content.html">
</frameset>

3. No Frames
The `<noframes>` element provides alternative content for browsers that don’t support frames.

4. Layers
Layers were used in early web development to manage multiple overlapping elements on a page. The
`<layer>` tag was part of early Netscape browsers but has since been deprecated.

5. Forms
Forms allow users to send data to a server. They are an essential part of web applications, enabling
functions like registration, login, or data entry.

Form Structure:

<form action="/submit" method="POST">


<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>
6. Form Objects
Form objects are the interactive components within a form, such as input fields, buttons, and
checkboxes. These objects can be accessed and manipulated using JavaScript.

You might also like