1 / 25

Separating Content from Presentation by CSS

Lab of COMP 102 Mar . 7- Mar . 8 , 2012. Separating Content from Presentation by CSS. Shenghua ZHONG Department of Computing The Hong Kong Polytechnic University zsh696@gmail.com. Outline. Standard Attributes of HTML Basic HTML Elements Separating Content from Presentation by CSS

gloria
Download Presentation

Separating Content from Presentation by CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Lab of COMP 102Mar. 7-Mar. 8, 2012 Separating Content from Presentation by CSS Shenghua ZHONG Department of Computing The Hong Kong Polytechnic University zsh696@gmail.com

  2. Outline Standard Attributesof HTML Basic HTML Elements Separating Content from Presentation by CSS Rule of CSS and CSS Selectors Specificity and the Cascade CSS Document

  3. Outline Standard Attributes of HTML Basic HTML Elements Separating Content from Presentation by CSS Rule of CSS and CSS Selectors Specificity and the Cascade CSS Document

  4. Review-The Parts of Markup: Tags, Elements, and Attributes 4 • Basic components of HTML • Tags • The linchpin of HTML • Surrounded by angle brackets (< and >) to distinguish them from ordinary text (the tag name must be lowercase in XHTML) • Element • The twin tags and everything between them • Attribute • Element’s opening tag can carry attributes to provide more information about element • An attribute consists of an attribute name followed by an attribute value

  5. Standard Attributes of Element Why we discuss it here? Some common attributes can be assigned to practically any element (and are almost always optional) General category and definition Core attributes Include general information about the element and can be validly included almost any element Internationalization attributes Contain information about the natural language in which an element’s contents are written Can be included in almost any element, especially those that contain text in a language different from the rest of the document’s content Focus attributes Apply these focus attributes to some elements to enhance accessibility for people using a keyboard to navigate your web pages

  6. Some Common Attributes Core attributes class Indicates the class or classes to which a particular element belongs Elements that belong to the same class may share aspects of their presentation id Specifies an unique identifier for an element style Specifies CSS properties for the element (it should almost always be avoided because it mixes presentation with your content) title Supplies a text title for the element Internationalization attributes dir Sets the direction in which the text should be read (ltr/rtl) lang Specifies the language in which the enclosed content is written (en for English) xml:lang Specifies the language in which the enclosed content is written for XML format Focus attributes accesskey Assigns a keyboard shortcut to an element tabindex Specifies the element’s position in the tabbing order

  7. Outline Standard Attributesof HTML Basic HTML Elements Separating Content from Presentation by CSS Rule of CSS and CSS Selectors Specificity and the Cascade CSS Document

  8. Review: HTML • Basic HTML document <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN” "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en“ xml:lang="en"> <head> <title>My first web page</title> </head> <body> <p>XHTML is easy!</p> </body> </html>

  9. The Html Element: <html> • <html> • Actual markup begins after the doctype with the html element • Act as a container for the entire document • Attributes of <html> • Required Attributes • xmlns: A URL specifying an XML namespace, which is http://www.w3.org/1999/xhtml for XHTML documents • Optional Attributes • There are no optional attributes for the html element. • Standard Attributes • dir/id/lang/xml:lang

  10. Other Html Element: <head>,<body> • <head> • Head element contains information about the document itself (including the required title element) • <body> • Body element contains all the content will ultimately be rendered by a browser, to be seen and used by your visitors • These elements are covered in detail later • Basic structure of an XHTML • A doctype, a root element, a head with a title, and a body

  11. The Document Tree A sample document tree

  12. Outline Standard Attributesof HTML Basic HTML Elements Separating Content from Presentation by CSS Rule of CSS and CSS Selectors Specificity and the Cascade CSS Document

  13. Why Need Cascading Style Sheets • Without CSS • Presentational markup makes the website messy, overcomplicated, hard to maintain • Have nothing to do with what the content meant but only how it should look • CSS was born in late 1990s • An entirely different language • Describe the visual presentation while leaving the structural markup clean and meaningful • A style sheet written in CSS can be applied to an HTML or XHTML document by adding an attractive layer of visual design

  14. Outline Standard Attributesof HTML Basic HTML Elements Separating Content from Presentation by CSS Rule of CSS and CSS Selectors Specificity and the Cascade CSS Document

  15. Anatomy of a CSS Rule • Example of CSS Rule • Selector is the part of the rule that targets an element that will be styled • declaration • property: aspect of an element’s presentation that is being modified • value: delivers the specific style that should be applied to the selected element • The property is that • Some rule about CSS rule • Declarations reside in a set of curly braces ({ and }) • Multiple declarations can apply to the same selector • A property and its value are separated by a colon (:) and the declaration ends with a semicolon (;) • Validation in http://jigsaw.w3.org/css-validator/

  16. CSS Selectors (I) :link { color: blue; } :visited { color: purple; } :active { color: red; } :hover { color: green; } :focus { color: orange; } • Function of selectors • With varying levels of specificity Specificity is a means of measuring a given selector’s scope (how many or few elements it selects) • Different categories • Universal Selector • Select any and all elements in the document * { color: blue; } • Element Selector • Selects all instances of an element, specified by its tag name em { color: red; } • Class Selector • Targets any element with given class name in its class attribute .info { color: purple; } • ID Selector • Selects only the element carrying the specified identifier #introduction { color: green; } • Pseudo Class Selector • Selects an element in a particular state

  17. CSS Selectors (II) • Different categories • Descendant selector • Can be assembled from more basic selector types to select elements matching the position in the document tree #introduction em { color: yellow; } • Combining selectors • Combine two or more selector types p.info { color: blue; } • Grouping selectors • Group several selectors together as part of a single rule p, h1, h2 { color: blue; }

  18. Outline Standard Attributesof HTML Basic HTML Elements Separating Content from Presentation by CSS Rule of CSS and CSS Selectors Specificity and the Cascade CSS Document

  19. Specificity and the Cascade h2 { color: red; } .title { color: blue; } .info h2 { color: purple; } h2.title { color: orange; } p { color: black; color: green; } • Conflict in two CSS rules • Specificity determine the priority • Example • Rule • Priority: Universal selector < Element selector < Class or Pseudo selector < ID selector < Inline style attribute • Cascade determine the priority • Example • Rule • Style declarations are applied in the order in which they are received, later declarations override prior ones

  20. !important • Function of keyword • !important can force a browser to honor the value above all others • A powerful and dangerous tool should be used only as a last resort • Example • h1 { color: red !important; }

  21. Outline Standard Attributesof HTML Basic HTML Elements Separating Content from Presentation by CSS Rule of CSS and CSS Selectors Specificity and the Cascade CSS Document

  22. Attaching Style Sheets to HTML: Inline Styles • Comments • Mix presentation with your structural markup • Should avoid it • Example

  23. Attaching Style Sheets to HTML: Embedded Style • Comments • Can embed style rules within the head element • Will be honored only for the document in which they reside • Isn’t efficient if style more than one page • Example

  24. Attaching Style Sheets to HTML: External Style • Comments • Place all your CSS rules in a separate, external style sheet and directly connected to your documents • An external style sheet is a plain-text file saved with the file extension .css • Example

  25. Comments of CSS • Function of comments • Make notes • Pass along instructions to other web developers • Temporarily hide or disable parts of the style sheet during testing • How to use it • /* and ends with */ • Example

More Related