1 / 9

Basics of CSS for Document Design

Learn how to separate content and structure from appearance using CSS. Understand the different ways of applying styles to HTML tags and the advantages of using CSS. Explore XML and XSLT for transforming XML documents.

mdanny
Download Presentation

Basics of CSS for Document Design

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. LBSC 690: Week 6CSS, XML/XSLT Jimmy Lin College of Information Studies University of Maryland Monday, March 5, 2007

  2. What’s a Document? • Content • Structure • Appearance • Behavior

  3. CSS • Separating content and structure from appearance • Rules for defining styles “cascade” from broad to narrow: • Browser default • External style sheet • Internal style sheet • Inline style

  4. Basics of CSS • Basic syntax: • Example: Causes • Font to be center-aligned • Font to be Arial and black selector {property: value} HTML tag you want to modify… The property you want to change… The value you want the property to take p { text-align: center; color: black; font-family: arial }

  5. Different Ways for Using CSS • Inline style: • Causes only the tag to have the desired properties • Internal stylesheet: • Causes all tags to have the desired properties <p style="font-family:arial; color:blue">…</p> … <head>… <style type="text/css"> p { font-family:arial; color:blue} </style> </head> <body> <p>…</p> …

  6. Customizing Classes • Ability to define customized styles for standard HTML tags: … <head>… <style type="text/css"> p.style1 { font-family:arial; color:blue} p.style2 { font-family:serif; color:red} </style> </head> <body> <p class=“style1">…</p> <p class=“style2">…</p> …

  7. External Style Sheets • Store formatting metadata in a separate file mystyle.css p.style1 { font-family:arial; color:blue} p.style2 { font-family:serif; color:red} … <head>… <link rel="stylesheet" href="mystyle.css" type="text/css" /> </head> <body> <p class=“style1">…</p> <p class=“style2">…</p> …

  8. Why Use CSS? • What are the advantages of CSS? • Why have three separate ways of using styles?

  9. XML and XSLT • XML document: contains the content • DTD (Document Type Definition): defines a well-formed XML document • XSLT (eXtensible Stylesheet Language Transformations): language for converting one XML document into another

More Related