DynamicHTML Cascading Style Sheet Internet Technology
What is DHTML? A collection of enhancements to HTML Combination of 11/23/2018 What is DHTML? A collection of enhancements to HTML To create dynamic and interactive websites Combination of Static Markup language (e.g., HTML) Client-side Scripting language (e.g., JavaScript) Presentation Definition Language (e.g., CSS) Document Object Model Defines the object-oriented model of a document To allow programs to manipulate content/structure/style of documents Example Internet Technology
Cascading Style Sheets 11/23/2018 Cascading Style Sheets CSS defines how to display HTML documents Specifies document’s font, color, margin, background image, etc. Enables separation of document content from presentation Change one external CSS file to change the display of an entire website A webpage can have multiple display formats CSS Types External CSS → in an external file Example Save CSS in an external .css file Reference the CSS file with <link> tag in the HEAD section <head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head> Document-level CSS → embedded in the HEAD section Example Define CSS in the HEAD section Inline CSS → within an element tag Example Use the style attribute in an HTML tag Internet Technology
11/23/2018 Why “Cascading”? Multiple CSS can be applied to one document (in a cascading order) Styles defined later have a higher preference than those defined earlier e.g., External CSS Document-level CSS Inline CSS Institution-level styles (e.g., corporate logo and colors) Department-level styles Styles defined for a group of documents (e.g., report) Styles defined directly in HTML pages Internet Technology
CSS: Basic Syntax Selector HTML element to style/format 11/23/2018 CSS: Basic Syntax Selector HTML element to style/format e.g., body, h1, p, hr, ul, ol, etc. Declaration Consists of Property & Value Declarations are separated by semicolon Property and value are separated by colon Property Style attribute to change e.g., color, font-size, font-family, etc. Internet Technology
CSS: ID & Class Selectors 11/23/2018 CSS: ID & Class Selectors ID Selector Specifies a style for a single HTML element ID Selector name starts with ‘#’ #para1 { text-align:center; color:red; } Uses the ‘id’ attribute of HTML element to apply the style <p id=“para1’>CSS ID selector applied</p> Class Selector Specifies a style for a group of HTML element Useful for setting a same style for several elements Class Selector name starts with ‘.’ .center { text-align:center; color:red; } Uses the ‘class’ attribute of HTML element to apply the style <h1 class="center">Center-aligned heading</h1> <p class="center">Center-aligned paragraph.</p> Example Internet Technology
External CSS Style document is defined in an external .css file 11/23/2018 External CSS Style document is defined in an external .css file HTML document calls style sheet through <link> element <HEAD> <LINK REL=“stylesheet” TYPE="text/css" href="style1.css“ > </HEAD> One CSS can be applied to multiple HTML Multiple CSS can be used by one HTML Example CGI JavaScript Internet Technology
Document-Level CSS Style is defined within a document’s HEAD section 11/23/2018 Document-Level CSS Style is defined within a document’s HEAD section <head> <title>CSS Examples</title> <style type=“text/css”> <!-- use the HTML comment to hide the style definitions from older browsers H1 { font-family: Verdana; font-size: 24px; } --> </style> </head> Example Internet Technology
Inline CSS Style is defined within an HTML element 11/23/2018 Inline CSS Style is defined within an HTML element <P STYLE="text-indent: 1in; text-align: center”> Takes precedence over other styles Override styles for a specific element Tips use external CSS to apply to a group of pages use document-level CSS to override external CSS for a given page use inline CSS to override for a given element (use sparingly) Example Internet Technology
CSS: DIV & SPAN DIV Tag SPAN Tag Apply a style to a group of tags 11/23/2018 CSS: DIV & SPAN DIV Tag Apply a style to a group of tags Group any number of HTML elements Block-level (i.e. includes a paragraph break) <div style=“text-align: center;”> <h1>Using DIV to group tags</h1> <p>Using DIV to group tags</p> </div> SPAN Tag Change the style of an element at a non-block level Enclose text No implied paragraph break <h3>Using <span style=“color:red;”>SPAN</span> to change color</h3> Example Internet Technology
CSS: Box Model CSS can control the layout of elements as boxes 11/23/2018 CSS: Box Model CSS can control the layout of elements as boxes Box Model = a box (padding, border, margin) around HTML elements Margin – transparent area around border Border – colored area around padding & content Padding – area around content Content – area where text and images appear div.ex { width:220px; padding:10px; border:5px solid green; margin:10px; } Example Internet Technology
CSS: Positioning Position Properties top, bottom, left, right 11/23/2018 CSS: Positioning Position Properties top, bottom, left, right Positioning Method Static Position (default) Element is placed according to the normal flow of the page top/bottom/left/right properties have no effect Relative Positioning Element is placed relative to its normal position “relative to” (top/bottom/left/right distance) away from Fixed Positioning Element is placed in a fixed location relative to browser window Absolute Positioning Element is placed relative to its nearest positioned ancestor Absolutely positioned elements do not affect other elements’ positions Overlapping Elements Use “z-index” to set the stack order of elements Example Internet Technology