Web Designing

R.KARTHIKEYAN
Assistant Professor
Department of Commerce(CA)
Vivekananda College, Tiruvedakam West
Madurai – 625 234
E-mail : vishalkarthi12@gmail.com
Contact No: 97893 89135

 What is DHTML?
 Difference between HTML and DHTML?
 What is CSS?
 CSS Elements
 Example Program
 Types of Style Sheet
 Inline Style Sheet
 Internal Style Sheet
 External Style Sheet
 Example Program
Outline

 DHTML stands for Dynamic HTML
 DHTML is NOT a language or a web standard.
 DHTML is a term used to describe the technologies
used to make web pages dynamic and interactive.
 DHTML is combination of HTML, JavaScript, DOM and CSS.
.
What is DHTML?

 DHTML is Dynamic HTML.
 DHTML create dynamic pages.
 A page with HTML, CSS, DOM and Scripts
called as DHTML.
 DHTML creates dynamic web pages with
the use of CSS, JavaScript and DOM.
CSS - Cascading Style Sheet
DOM - Document Object Model
Difference between HTML and DHTML?
 HTML is Hypertext Markup Language.
 HTML create only static pages.
 A plain page without any styles and Scripts
called HTML.
 HTML creates static web pages by the use
of text, images, styles, tables and
heading.

What is CSS?
 CSS stands for Cascading Style Sheets.
 CSS describes how HTML elements are to be displayed on
screen, paper, or in other media.
 It can control the layout of multiple web pages all at once.
 CSS is used to define styles for your web pages, including the
design, layout and variations in display for different devices and
screen sizes.

 A CSS rule-set consists of a selector and a declaration block.
 The declaration block contains one or more declarations
separated by semicolons.
 Each declaration includes a CSS property name and a value,
separated by a colon.
 A CSS declaration always ends with a semicolon, and
declaration blocks are surrounded by curly braces.
CSS Syntax

Example 1 - CSS element Selector
The element selector selects HTML elements based on the
element name.
<html>
<head>
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p> Hai friend.</p>
<p> welcome</p>
</body>
</html>

CSS id Selector
 The id selector uses the id attribute of an HTML element to
select a specific element.
 The id of an element is unique within a page
 To select an element with a specific id, write a hash (#)
character, followed by the id of the element.
.
Note:
An id name cannot
start with a number!

Example 2 - CSS id Selector
<html>
<head>
<style>
#para1
{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello Students!</p>
<p> Happy Day.</p>
</body>
</html>
Here id="para1"

Example 3 - CSS Universal Selector
<html>
<head>
<style>
* {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Ram</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
The universal selector (*) selects all HTML
elements on the page.

Example 4 - CSS Grouping Selector
<html>
<head>
<style>
h1, h2, p
{
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p> Welcome students.</p>
</body>
</html>
The CSS Grouping Selector
The grouping selector selects all
the HTML elements with the
same style definitions.

Types of Style Sheet
CSS can be added to HTML elements in 3 ways:
 Inline style sheet - by using the style attribute in
HTML elements
 Internal style sheet - by using a <style> element in the
<head> section
 External style sheet - by using an external CSS file
.

 An inline CSS is used to apply a unique style to a single HTML element.
 An inline CSS uses the style attribute of an HTML element.
 It can be attached to an element using the style attribute.
 The style attribute includes a series of CSS property and value pairs.
Example:
<html>
<body>
<h1 style="color:blue;">Computer Applications</h1>
</body>
</html>
Above the example sets the text color of the <h1> element to blue
Inline style sheet

Internal Style Sheet
 The internal style sheet is used to add a unique style for a single
document.
 It is defined in <head> section of the HTML page inside the
<style> tag.
 An internal style sheet holds CSS rules for the page in the head
section of the HTML file
 A single change to the CSS rule will apply to all tagged elements
on the page

<html>
<head>
<style>
body {
background-color: yellow;
}
h1 {
color: Red;
margin-left: 80px;
}
p
{
color: blue;
}
</style>
</head>
<body>
<h1> hai friends</h1>
<p> hello </p>
</body>
</html>
Example - Internal Style Sheet

 An external style sheet is a separate file linked to an HTML web
page.
 It comes with a . css filename extension.
 The external style sheet is generally used when you want to
make changes on multiple pages.
 It is ideal for this condition because it facilitates you to change
the look of the entire web site by changing one file.
 It uses the <link> tag on every pages and the <link> tag should
be put inside the head section.
External Style Sheet

<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>welcome</h1>
<p>External Style Sheet</p>
</body>
</html>
Example - External Style Sheet
File Name: styles.css
body
{
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}

Types of Style Sheet
Placed directly in
the HTML
document
Inline style sheet
External style
sheet
Internal style sheet
CSS
Saved as a
separate .CSS
file linked to
the HTML page
Placed in
the head
section of
the HTML
.html .html .css

Web Designing

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to Web Designing

Similar to Web Designing (20)

More from R.Karthikeyan - Vivekananda College

More from R.Karthikeyan - Vivekananda College (20)

Recently uploaded

Recently uploaded (20)

Web Designing