Scribd
Upload
21 views8 pages

Understanding CSS Style Sheets

The document discusses different ways to insert style sheets into HTML documents using CSS. It describes external, internal, and inline style sheets. External style sheets are ideal for applying styles to many pages using the <link> tag. Internal style sheets use the <style> tag for styles within a single document. Inline styles are applied directly using the style attribute but are not preferred. Multiple style sheets are also discussed, where more specific styles override general styles. JavaScript event handlers and common dialog boxes like alert, confirm, and prompt are also summarized.

Uploaded by

Esther Grace Vinitha
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
21 views8 pages

Understanding CSS Style Sheets

The document discusses different ways to insert style sheets into HTML documents using CSS. It describes external, internal, and inline style sheets. External style sheets are ideal for applying styles to many pages using the <link> tag. Internal style sheets use the <style> tag for styles within a single document. Inline styles are applied directly using the style attribute but are not preferred. Multiple style sheets are also discussed, where more specific styles override general styles. JavaScript event handlers and common dialog boxes like alert, confirm, and prompt are also summarized.

Uploaded by

Esther Grace Vinitha
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

STYLE SHEETS :CSS CSS stands for Cascading Style Sheets and is a simple styling language which allows

s attaching style to HTML elements.

Style Sheets are templates, very similar to templates in desktop publishing applications, containing a collection of rules declared to various selectors (elements). Cascade is a method of defining the weight (importance) of individual styling rules thus allowing conflicting rules to be sorted out should such rules apply to the same selector. External Style Sheets can save a lot of work External Style Sheets are stored in CSS files

link element associates style sheet with doc, type attribute specifies style language used, href attribute provides style sheet URL, title attribute provides style sheet name. Alternatively, user selectable style sheets can be specified. CSS Syntax: Selector Strings

Three Ways to Insert CSS There are three ways of inserting a style sheet: External style sheet Internal style sheet Inline style External Style Sheet An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section: <head> <link rel="stylesheet" type="text/css" href="[Link]" /> </head> An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a .css extension. An example of a style sheet file is shown below: hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/[Link]");} Do not leave spaces between the property value and the units! "margin-left:20 px" (instead of "margin-left:20px") will work in IE, but not in Firefox or Opera. Internal Style Sheet An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, by using the <style> tag, like this: <head> <style type="text/css"> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/[Link]");} </style> </head> Inline Styles An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly! To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph: <p style="color:sienna;margin-left:20px">This is a paragraph.</p>

Multiple Style Sheets If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet. For example, an external style sheet has these properties for the h3 selector: h3 { color:red; text-align:left; font-size:8pt; } And an internal style sheet has these properties for the h3 selector: h3 { text-align:right; font-size:20pt; } If the page with the internal style sheet also links to the external style sheet the properties for h3 will be: color:red; text-align:right; font-size:20pt; The color is inherited from the external style sheet and the text-alignment and the font-size is replaced by the internal style sheet. 1. Event Handlers in Java Script Special-purpose functions that come predefined with JavaScript. They are unusual in the sense that they are mostly called from the HTML part of a Web page and not the <SCRIPT> </SCRIPT> part Events handlers are placed in the BODY part of a Web page as attributes in HTML tags Events can be captured and responded to directly with JavaScript one-liners embedded in HTML tags in the BODY portion Alternatively, events can be captured in the HTML code, and then directed to a JavaScript function for an appropriate response

<INPUT type=submit name=sendEmail value=SendeMail onMouseOver=if([Link]<1)[Link](EmptyFromfield! Please correct)> That was event handling through what we may call in-line JavaScript In-Line JavaScript Event Handling Event handlers are placed in the BODY portion of a Web page as attributes of HTML tags The event handler attribute consists of 3 parts: 1. The identifier of the event handler 2. The equal sign 3. A string consisting of JavaScript statements enclosed in double or single quotes Multiple JavaScript statements (separated by semicolons) can be placed in that string, but all have to fit in a single line; no newline characters are allowed in that string Due to this limitation, sophisticated event handling is not possible with in-line event handling JavaScript that goes between the <SCRIPT>, </SCRIPT> tags: function checkForm() { if ( [Link] < 1) { [Link]( Empty From field! Please correct ); } } JavaScript included as an attribute of the Send eMail button: onMouseOver=checkForm( ) The code in the HEAD portion is the right choice for developing larger JavaScript scripts It makes the code easier to read It allows the reuse of a function for multiple event handlers For very short scripts, all code in the tag works well JavaScript Code - Simple JavaScript Calculator <html>

<head> <title>Simple Javascript Calculator - Basic Arithmetic Operations</title> <script language="javascript" type="text/javascript"> function multiply(){ a=Number([Link]); b=Number([Link]); c=a*b; [Link]=c; } </script> <script language="javascript" type="text/javascript"> function addition(){ a=Number([Link]); b=Number([Link]); c=a+b; [Link]=c; } </script> <script language="javascript" type="text/javascript"> function subtraction(){ a=Number([Link]); b=Number([Link]); c=a-b; [Link]=c; } </script> <script language="javascript" type="text/javascript"> function division(){ a=Number([Link]); b=Number([Link]); c=a/b; [Link]=c; } </script> <script language="javascript" type="text/javascript"> function modulus(){ a=Number([Link]); b=Number([Link]); c=a%b; [Link]=c; } </script> </head> <body> <!-- Opening a HTML Form. --> <form name="calculator">

<!-- Here user will enter 1st number. --> Number 1: <input type="text" name="number1"> <!-- Here user will enter 2nd number. --> Number 2: <input type="text" name="number2"> <!-- Here result will be displayed. --> Get Result: <input type="text" name="total"> <!-- Here respective button when clicked, calls only respective artimetic function. --> <input type="button" value="ADD" onclick="javascript:addition();"> <input type="button" value="SUB" onclick="javascript:subtraction();"> <input type="button" value="MUL" onclick="javascript:multiply();"> <input type="button" value="DIV" onclick="javascript:division();"> <input type="button" value="MOD" onclick="javascript:modulus();"> </form> </body> </html>

2. Various Dialog boxes in Java script with an example. Three Types of Dialog Boxes in JavaScript * alert() * confirm() * prompt() alert () The simplest to direct output to a dialog box is to use the alert() method. alert ("Click Ok to continue."); NOTICE: that the alert() method doesnt have an object name in front of it. This is because the alert() method is part of the window Object. As the top-level object in the Navigator Object Hierarchy, the window Object is assumed when it isnt specified. The script alert ("Click Ok to continue."); and HTML holding the script will not continue or execute until the user clicks the OK button. Generally, the alert() method is used for exactly that to warn the user or alert him or her to something. Examples of this type of use include: * Incorrect information in a form * An invalid result from a calculation * A warning that a service is not available on a given date Nonetheless, the alert() method can still be used for friendlier messages. NOTICE: that Netscape alert boxes include the phrase "<url> [JavaScript Application]" in the title bar of the alert while IE has "Microsoft Internet Explorerin the title bar of the alert. Both have yellow triangles to "alert" you. This done in order to distinguish them form those generated by the operating system or the browser. This done for security reasons so that malicious programs cannot trick users into doing things they dont want to do. <INPUT TYPE="button" VALUE="alert" onClick="alert ('This is an alert!!')">

OR <INPUT TYPE="button" VALUE="alert" onClick="[Link] ('This is an alert!!')"> The alert dialog box is used to display an alert message to the user. prompt () The alert() method still doesn't enable you to interact with the user. The addition of the OK button provides you with some control over the timing of events, but it still cannot be used to generate any dynamic output or customize output based on user input. The simplest way to interact with the user is with the prompt() method. The user needs to fill in the field and then click OK. prompt("Enter Your Name:", "Name"); * Note 1: you are providing two "arguments" to the method in the parenthesis. The prompt() method "requires two pieces of information". The first is text to be displayed, and the second is the default data in the entry field. * Note 2: In JavaScript, when a method requires more than one argument, they are separated by commas. <INPUT TYPE="button" VALUE="prompt" onClick="respPrompt()"> The prompt() method dialog box allows the user the opportunity to enter information. It takes two parameters; a message and a default string for the text entry field. With function code: <SCRIPT LANGUAGE="JavaScript"> function respPrompt() { var favorite = prompt('What is your favorite color?', 'RED'); // OR var favorite = [Link]('What is your favorite color?', 'RED'); // if (favorite) equivalent to if (favorite != null && favorite != ""); if (favorite) alert("Your favorite color is: " + favorite); else alert("You pressed Cancel or no value was entered!"); } </SCRIPT> confirm () Confirm displays a dialog box with two buttons: OK and Cancel. If the user clicks on OK the window method confirm() will return true. If the user clicks on the Cancel button confirm() returns false. <INPUT TYPE="button" VALUE="confirm" onClick="respConfirm()"> The confirm dialog box returns a Boolean value based on the user's selection. With function code: <SCRIPT LANGUAGE="JavaScript"> function respConfirm () { var response = confirm('Confirm Test: Continue?'); // OR var response = [Link]('Confirm Test: Continue?'); if (response) alert("Your response was OK!"); else alert("Your response was Cancel!"); } </SCRIPT> 3. Compare HTML, SGML and XML.

SGML (Standard Generalized Markup Language) is the standard for encoding paper documents into an electronic format. With the evolution of the internet, it became clear that HTML is no longer able to provide the need for more dynamic content as it has reached its limitations. XML (Extensible Markup Language) is a language that was derived from SGML and is too is too comprehensive and complex for the intended use. Since XML is simply a subset of SGML, SGML parsers are capable of reading and decoding valid XML files. HTML, which stands for Hypertext Markup Language, is the predominant markup language for web pages. HTML is the basic building-blocks of webpages. 4. Define Objects. List the attributes associated with it The concept of an object is: a collection of data along with the functions to work with that data.
5. Various types of client/server architectural model.

The client/server model - model 1 - client/server Model 2 www Database Client/Server Model 3 web server / application server, Model 4 web server / application server/database server, Model 5: web server / transaction server/database server Model 6: web server / transaction server 6. What is DTD? Types Document Type Definition (DTD) is a set of markup declarations that define a document type for SGML-family markup languages (SGML, XML, HTML). DTDs were a precursor to XML schema and have a similar function, although different capabilities.

Common questions

Powered by AI

When multiple style sheets are applied, CSS uses the specificity of the rules to determine which styles take precedence. Specificity depends on the type of selectors used (e.g., id selectors are more specific than class selectors), the order in which styles are added to the page, and whether the style is defined in an external or internal style sheet. The most specific rules according to these criteria will be applied, allowing different style sheet types to work together while resolving conflicts .

The alert() method generates a dialog box that displays a message to the user and halts script execution until the user clicks OK. It is beneficial for simple notifications or warnings. The prompt() method, on the other hand, displays a dialog box that asks for user input and requires two arguments: a message and a default input value. It is useful when user interaction is necessary, such as collecting a user's name .

Objects in programming encapsulate data and functions that operate on that data, facilitating structured code and reuse. Typical attributes associated with objects include properties (data values) and methods (functions or procedures that can manipulate object data).

Document Type Definitions (DTDs) define the structure and legal elements and attributes of an XML document. They serve a similar purpose to XML schemas in that they ensure the XML document adheres to a defined structure. XML schemas, however, provide more features and greater flexibility compared to DTDs, such as data types support and namespace awareness, which makes them more suitable for complex XML data formats .

Inline JavaScript event handlers require the entire script string to be on a single line without line breaks because HTML treats carriage returns and line feeds as new line characters, which would break the script execution. This limitation constrains the complexity of scripts that can be written inline and necessitates either writing concise, simple scripts or using external script functions for more complex logic, thus promoting better code organization and reusability .

External JavaScript separates functionality from content by storing scripts in separate .js files, promoting reuse and reducing clutter within HTML files. This approach benefits maintainability and scalability, as a single change in the external script updates all references across pages. Inline JavaScript, by embedding functions directly within HTML, can make the document harder to maintain and understand, especially with growing complexity or frequent updates, as it mixes logic with HTML content .

External style sheets offer the advantage of maintaining consistency across multiple web pages, making them ideal for large websites; a single change can affect all linked pages, reducing maintenance effort. However, the disadvantage is a potential delay in page loading as the browser must fetch an additional file . Internal style sheets are beneficial for applying unique styles to a single page without affecting others, which can be useful for single-page sites or pages with specific styling needs; however, they can lead to code duplication and maintenance challenges if used extensively .

The JavaScript confirm() dialog box presents the user with two buttons, OK and Cancel, and returns a Boolean value based on the user's choice: true if OK is clicked and false if Cancel is clicked. This is useful for capturing user confirmation before proceeding with an action, such as submitting a form or deleting data .

The cascade in CSS is a method used to determine the importance of individual styling rules when there are conflicts. It employs a system of priorities to resolve the conflicts by applying the most specific rules or those in the most appropriate position. For instance, rules defined in an internal style sheet can override an external style sheet for specific selectors, reflecting their higher specificity and placement .

HTML is derived from and a subset of SGML, designed specifically for web pages and provides the structure for displaying information on the web. XML, also derived from SGML, is used for storing and transporting data due to its extensible and flexible format. SGML is the parent language used to define the structure and syntax for both HTML and XML. HTML is best used for creating web page interfaces, XML for data interchange and configuration, and SGML for complex document structures that require rigorous formality in data representation .

You might also like