Style Sheets Session Objectives ► Describe ► Use Dynamic HTML Style Sheet What is DHTML ? (1) ► “Dynamic HTML” is typically used to describe the combination of HTML, style sheets and scripts that allows documents to be animated ► Script is a small program can be executed in the browser The advent of scripting added dynamism to the Web page ► What is a Dynamic Web Page ?  A dynamic web page is one whose appearance and content can be altered without the browser making a new request to the web server, even after page has fully loaded What is DHTML ? (2) ► Microsoft and Netscape each have their own way of implementing Dynamic HTML Microsoft focuses on the use of Cascading Style Sheets (CSS) Script code can be used to manipulate the elements of CSS ► Netscape also uses style sheets However, the approach to Dynamic HTML is based mainly on the used of layers The LAYER tag is used to provide most of the features of Dynamic HTML What is DHTML ? (3) ► Cascading Style Sheets are a feature implemented in HTML 4.0 The World Wide Web Consortium (W3C) has implemented three CSS recommendations-called CSSI, CSS-P, and CSS2  CSS-I allows you to implement basic style changes to a document, such as changing its font styles  CSS-P gives you control over the position of page elements, using a layers metaphor CSS-P layers can be transparent and absolutely positioned, and not necessary affect the elements on other layers  CSS-2 combines both CSS-I and CSS-P and introduces several new features, such as electronic audio Features of Dynamic HTML ► Dynamic Styles ► Dynamic Content ► Positioning and Animation ► Downloadable Fonts (for Netscape Navigator) ► Filter ► Data and Transitions binding ► Object Structure or Dynamic HTML Object Model ► Scripting Introduction to Style Sheets ►A style sheet is the place where we manage and control styles ► The style sheet describes the appearance and presentation of an HTML document as it will be presented on screen, or even in print ► We can also precisely specify the location and appearance of elements on a page and create special effects Methods of changing Style of Web Page ► Inline style Style information can be used inline We can include it within the tag of the HTML element The STYLE Attribute is used to apply style sheets to individual elements  Using the Style Attribute we can bypass the Style Element and put declarations directly into individual start tags    /H2> ► Writing Script  Uses Style Object  Style Object supports every property of CSS Advantages of Style Sheet ► Override the browser ► Page layout ► Style sheets can be re-used ► One time effort Style Sheet Terminology ► Style Rule  A cascading style sheet is a set of rules A rule defines the style of the document ► Style Sheet  It is a list of style rules and can be embedded in the HTML document ► Rules  A style sheet can contain one or more rules  RuleSelector {Declarations property: value; property: value; …} 10 Simple Selectors ►A simple selector describes an element irrespective of its position in the document structure The H1 heading identifier is a typical simple selector H1 { color: blue } 13 HTML Selector ► These selectors use the names of HTML elements ► The only difference is that we remove the brackets So, the HTML tag become P 14 CLASS Selector ► These selectors use the CLASS attribute of HTML elements ► We can assign a class identifier to several elements of a single type when we want to display variations from the norm ► The CLASS Selector is preceded with a dot (.) called the flag character, followed by the 'class name' of our choice 15 ID Selector ► An ID selector uses the ID attribute of an HTML element ► It is used to apply a style to an individual element on the Web page ► An ID selector is preceded by a hash (#) mark 16 Contextual Selectors ►A contextual selector refers to the context of elements ► It is based on the concept of inheritance, where the child element inherits the style assigned to the parent element ►A typical example is that of the element When we add an element to each element contained within inherits the styles of 17 Style Sheet combined with HTML ► ► ► STYLE element Style Attribute Link element 18 Style Elements ► We can embed the required style information within the HTML document ► This ► The is done using the STYLE element STYLE element is inserted into the element of a document with all of the rules placed between the opening and closing tags 19 Style Attribute ► The STYLE Attribute is used to apply style sheets to individual elements ► Using the Style Attribute we can bypass the Style Element and put declarations directly into individual start tags 20 Linking style sheets ► Style sheets can also be created as separate documents and linked to the required HTML document ► The LINK element is used to include a reference to the required style sheet [...]... in Style Sheet List Properties list -style listStyle (type, position, image) (disc, circle, lower-roman) list -style- type listStyleType list -style- image:url(dot.gif) list -style- image listStyleImage (inside, outside) list -style- position listStylePosition 26 Summary ► Describe Dynamic HTML  Features of Dynamic HTML ► Use Style Sheet  Style Rules, Style Sheet, Rules  Selectors in Style Sheets  Apply Style. .. to apply style sheets to individual elements ► Using the Style Attribute we can bypass the Style Element and put declarations directly into individual start tags 20 Linking style sheets ► Style sheets can also be created as separate documents and linked to the required HTML document ► The LINK element is used to include a reference to the required style sheet