DHTML & CSS

Ravinder KambojAssistant ProfessorLCET, Katani Kalan

What is DHTML?

•DHTML is the combination of several built-in browser features that enable a web page to be more dynamic. •DHTML is NOT a scripting language (like JavaScript or VBscript), but a browser feature- or enhancement- that makes the browser dynamic.•It uses a host of different technologies - JavaScript, VBScript, the Document Object Model (DOM), layers, cascading stylesheets - to create HTML that can change even after a page has been loaded into a browser.

What is DHTML?

It is considered to be made up of–HTML–Cascading Style Sheets (CSS)–Scripting language

All three of these components are linked via Document Object Model (DOM)

DOM is the interface that allows scripting languages to access the content, style, and structure of the web documents and change them dynamically

Tools of DTHML

•HTML and XML• Partitions and Organizes the content

•CSS• Defines the Presentation of the content

•Scripting - JavaScript, JScript, VBScript • Adds interactivity to the page

•DOM- Document Object Model• Defines what and how elements are exposed for

script access

Components of DHTML

• DHTML requires four independent components to work: HTML, Cascading Style Sheets, Scripting and the Document Object Model. The section provides a brief description of each component.

• HTML– HTML defines the structure of a Web page, using such basic

elements as headings, forms, tables, paragraphs and links. – On December 18, 1997, HTML 4.0 attained "recommended"

status at the W3C. Changes and enhancements introduced in HTML 4.0 made DHTML possible.

Cascading Style Sheets (CSS):

• Similar to a template in a word-processing document, a style sheet controls the formatting of HTML elements.

• Like in traditional desktop publishing, one can use style sheet to specify page margins, point sizes and leading.

• Cascading Style Sheets is a method to determine precedence and to resolve conflicts when multiple styles are used.

Scripting

• Scripting provides the mechanisms to interpret user actions and produce client-side changes to a page.

• For example, scripts can interpret mouse actions (such as the mouse passing over a specified area of a page through the event model) and respond to the action by using a set of predefined instructions (such as highlighting the text activated by the mouse action).

• Although DHTML can communicate with several scripting languages, JavaScript is the de facto standard for creating cross-browser DHTML pages.

JavaScript• JavaScript is a simple, powerful, and popular programming

language that is built into web browsers. • Learning JavaScript is especially useful if you are a web

designer and already know HTML and CSS, because it is used to make web pages interactive.

• However, JavaScript is not limited to making interactive web pages; you can also use it for server-side programming using a framework like Node.js.

• Using HTML and JavaScript, you can change the contents of HTML elements in response to user events, such as a button click.

Document Object Model (DOM)

• The DOM outlines Web page content in a way that makes it possible for HTML elements, style sheets and scripting languages to interact with each other.

• The W3C defines the DOM as "a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure, and style of documents.

• The document can be further processed and the results of that processing can be incorporated back into the presented stage."

•DHTML can make your browser dynamic and interactive

•Content and design can be separated using Style sheets & uniformity of the site can be maintained using them

•Validation of input’s given by the user can be done at the client side, without connection to the server

•Drop down menus can be used to put a lot of information on the site

DHTML

CSS in detail• CSS is an abbreviation for Cascading Style Sheets. • CSS works with HTML and other Markup Languages (such as

XHTML and XML) to control the way the content is presented. • Cascading Style Sheets is a means to separate the appearance

of a webpage from the content of a webpage.• The presentation is specified by styles, which are presented in

a style sheet. • Instead of using <FONT> tags over and over again to control

little sections of your page, you can establish some rules to apply globally, to a single page or all the pages on your site.

• CSS is a great time saver.

What's the "Cascade" part of CSS?

• The cascade part of CSS means that more than one stylesheet can be attached to a document, and all of them can influence the presentation.

• For example, a designer can have a global stylesheet for the whole site, but a local one for say, controlling the link color and background of a specific page.

• Or, a user can use her own stylesheet if he/she has problems seeing the page, or if she just prefers a certain look.

Why Use CSS? • Makes Pages More Accessible

– Your pages become more accessible. – By separating the styling (CSS) from the content and structure (HTML), you are

well on your way to satisfying Accessibility requirements. – This is an important thing to consider, if you are creating sites that might be

used by the visually impaired. • Reduces Time

– It is much easier to update pages. – It is much faster to update a page that uses styles over using <FONT> tags and

the like. – With CSS, you can decide how headings should appear, and enter that

information once.– Every heading in every page that is linked to this style sheet now has that

appearance. – With cascading style sheets, whole organizations can share a small number of

style sheets, ensuring consistency across the site with no need for constant updating and editing to accommodate changes.

• Multiple Style Sheets Cascade Into One – Style Sheets allow style information to be

specified in many ways. – Styles can be specified inside a single HTML

element, inside the <head> element of an HTML page, or in an external CSS file.

– Even multiple external Style Sheets can be referenced inside a single HTML document.

How Do Style Sheets Work?

• Style sheets are just text files, or text embedded in the head of an HTML document, that help separate content from appearance.

• The content of a page goes into an HTML file and the appearance goes into a style sheet.

• But how does all this end up as a web page in your browser? Think of a style sheet as a set of instructions, suggesting to a web browser how to draw a page.

• The style sheet suggests how the browser should display the page based on rules you define in the style sheet.

Syntax

• A CSS comprises of style rules that are interpreted by the browser and then applied to the corresponding elements in your document. A style rule is made of three parts: – Selector: A selector is an HTML tag at which a style will be

applied. This could be any tag like <h1> or <table> etc. – Property: A property is a type of attribute of HTML tag. Put

simply, all the HTML attributes are converted into CSS properties. They could be color, border, etc.

– Value: Values are assigned to properties. For example, color property can have the value either red or #F1F1F1 etc.

• You can put CSS Style Rule Syntax as follows: – selector { property: value }

• Example: You can define a table border as follows: – table{ border :1px solid #C00; }

Types of selectors

• HTML tag• ID• Class• Universal• Descendant Selectors • Child Selectors

HTML tag as Selector

• HTML tag can be used as selectorh1 { color: #36CFFF; } • A style can be applied to multiple tags :h1,p { color: #36CFFF; }

The Universal Selectors • Rather than selecting elements of a specific

type, the universal selector quite simply matches the name of any element type: * {

color: #000000; }

This rule renders the content of every element in our document in black.

The Descendant Selectors

• Suppose you want to apply a style rule to a particular element only when it lies inside a particular element.

• As given in the following example, the style rule will apply to <em> element only when it lies inside the <ul> tag.ul em { color: #000000; }

The Class Selectors • You can define style rules based on the class attribute of the

elements. • All the elements having that class will be formatted according to

the defined rule..black { color: #000000; }Applying style:<p class=“black"> This para will be styled by the classes center and bold. </p>

The ID Selectors • You can define style rules based on the id attribute of the elements. • All the elements having that id will be formatted according to the defined

rule. #black { color: #000000; }• The true power of id selectors is when they are used as the foundation for

descendant selectors. For example: #black h2 { color: #000000; }• In this example, all level 2 headings will be displayed in black color when

those headings will lie within tags having id attribute set to black.

The Child Selectors• You have seen the descendant selectors. • There is one more type of selector, which is very similar to

descendants but have different functionality. • Consider the following example:body > p { color: #000000; }• This rule will render all the paragraphs in black if they are a

direct child of the <body> element. • Other paragraphs put inside other elements like <div> or <td> would not have any effect of this rule.

Multiple Style Rules• You may need to define multiple style rules for a single element. • You can define these rules to combine multiple properties and

corresponding values into a single block as defined in the following example:

h1 { color: #36C; font-weight: normal; letter-spacing: .4em; margin-bottom: 1em; text-transform: lowercase; }• Here all the property and value pairs are separated by a semicolon (;)

Grouping Selectors • You can apply a style to many selectors if you like. • Just separate the selectors with a comma, as given in the following

example: h1, h2, h3 { color: #36C; font-weight: normal; letter-spacing: .4em; margin-bottom: 1em; text-transform: lowercase; }

• This define style rule will be applicable to h1, h2 and h3 element as well.

Types of style sheets

• Internal/Embedded• Inline• External

Internal CSS - The <style> Element • You can put your CSS rules into an HTML document using the <style>

element. • This tag is placed inside the <head>...</head> tags. Rules defined

using this syntax will be applied to all the elements available in the document.

• Here is the generic syntax: <head> <style type="text/css” media=“”> Style Rules ............ </style> </head>

Attributes

• Attributes associated with <style> elements are:

Example<html><head> <title>Internal Style Sheet</title><style type="text/css" media="all"> h1{ color: #36C; } </style> </head><body><h1>Hello! Students</h1></body></html>

Example 2<html><head> <title>Internal Style Sheet</title><style type="text/css" media="all"> h1, h2, h3 { color: #36C; font-weight: normal; letter-spacing: .4em; margin-bottom: 1em; text-transform: lowercase; }</style> </head><body><h1>Hello! Students</h1><h2>How are you?</h2><h3>How is your day</h3></body></html>

Example 3 width:1000px;• height:100px;• font:"Times New Roman", Times, serif;• color:#FFFFFF;• background:#990033;• float:left;• }• h2• {• font:"Times New Roman", Times, serif;• color:#FFFFFF;• }• </style>• </head>• <body>• <div id="main">• <div id="heading">• <center>• <h2>Internal CSS Styles</h2>• </center>• </div>• <table border="" width="1000px">• <caption>• <font color="white">• <marquee direction="right" loop="infinite" bgcolor="brown">• <h2>Welcome To Chitkara</h2>• </marquee>• </font>• </caption>• <tr>• <td width="222"><img src="1.jpg" width="222" height="155"/></td>• <th colspan="3" bgcolor="green"><h2>Chitkara University</h2></th>• </tr>• <tr>• <td bgcolor="pink">Home</td>• <td width="302" bgcolor="pink">Departments</td>• <td width="250" bgcolor="pink">Admission Cell</td>• <td width="144" bgcolor="pink">Courses</td>• </tr>• </table>• <div id="quality">• <p><strong>Quality Policy:</strong> Chitkara University </div>• <div id="vision">• <p><strong>Vision: </strong>To create a world class educational environment </div>• <div id="mission">• <p><strong>Mission:</strong> To develop dynamic technical professionals to lead the 21 </div>• </div>• </body>• </html>

<html><head><title>Internal StyleSheet</title><style>#main{width:1000px;margin:auto;}#heading{width:1000px;height:50px;background-color:#003399;}#quality{width:1000px;height:100px;font:"Times New Roman", Times, serif;color:#FFFFFF;background-color:#990033;float:left;}#vision{width:1000px;height:100px;font:"Times New Roman", Times, serif;color:#FFFFFF;background:#006600;float:left;}#mission{

Output

Inline CSS

• You can use style attribute of any HTML element to define style rules.

• These rules will be applied to that element only.

• Here is the generic syntax: <element style="...style rules...."> Example:<h1 style ="color:#36C;"> This is inline CSS </h1>

Example

<html><head> <title>Inline Style Sheet</title></head><body><h1 style ="color:#36C;"> This is inline CSS </h1></body></html>

Example 2<html><head><title>Inline StyleSheet</title></head><body><div id="main" style="width:1000px; height:auto; margin:auto;"> <div id="heading" style="width:1000px; height:50px; background-color:#CCCCCC"> <center> <h2 style="font:'Times New Roman', Times, serif; color:#990033">Inline CSS Styles</h2> </center> </div><div id="heading" style="width:1000px; height:50px; background-color:#FCFFCC"> <center> <h3 style="font:'Times New Roman', Times, serif; color:#CCCCFF">Hi! How r u?</h3> </center> </div></div></body></html>

External CSS

• The <link> element can be used to include an external stylesheet file in your HTML document.

• An external style sheet is a separate text file with .css extension.

• You define all the Style rules within this text file and then you can include this file in any HTML document using <link> element.

Syntax

• Here is the generic syntax of including external CSS file:

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

href="external.css" media="all" /> </head>

Attributes

• Attributes associated with <style> elements are:

Example

• Create three files– external.css– page1.html– Page2.html

external.css#main {

background-color:#33FFFF;}#one {

float:left;width:1000px;height:200px;background-color:#CCCCCC;

}#two {

width:1000px;height:100px;float:left;background-color:#CFFFCC;

}

#three{

width:1000px;background-color:#33FFFF;height:auto;float:left;

}#bottom {

width:1000px;height:auto;background-color:#990033;float:left;

}

page1<html><head><title>External CSS Demo</title><link type="text/css" rel="stylesheet" href="external.css" media="all" /> </head><body><div id="one">Any inline style sheet takes the highest priority. So, it will override any rule defined in <style>...</style> tags or the rules defined in any external style sheet file. </div><div id="two">Any rule defined in <style>...</style> tags will override the rules defined in any external style sheet file.</div><div id="three">Any inline style sheet takes the highest priority. So, it will override any rule defined in <style>...</style> tags or the rules defined in any external style sheet file.</div><div id="main">Any rule defined in <style>...</style> tags will override the rules defined in any external style sheet file.</div><div id="bottom">Any inline style sheet takes the highest priority. So, it will override any rule defined in <style>...</style> tags or the rules defined in any external style sheet file.</div></body></body></html>

Output (page1)

page2<html><head><title>External CSS Demo</title><link type="text/css" rel="stylesheet" href="external.css" media="all" /> </head><body><div id="two">Any inline style sheet takes the highest priority. So, it will override any rule defined in <style>...</style> tags or the rules defined in any external style sheet file. </div><div id="one">Any rule defined in <style>...</style> tags will override the rules defined in any external style sheet file.</div><div id="three">Any inline style sheet takes the highest priority. So, it will override any rule defined in <style>...</style> tags or the rules defined in any external style sheet file.</div><div id="bottom">Any rule defined in <style>...</style> tags will override the rules defined in any external style sheet file.</div><div id="one">Any inline style sheet takes the highest priority. So, it will override any rule defined in <style>...</style> tags or the rules defined in any external style sheet file.</div></body></body></html>

Output (page2)