1 / 9

Mastering CSS for Effective Web Design

Explore the basics of CSS, including separating content from appearance, defining styles, and utilizing different methods like inline styles and external style sheets. Learn why CSS is essential for modern web design practices.

bmaldonado
Download Presentation

Mastering CSS for Effective Web 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 Session #6CSS, XML/XSLT Jimmy Lin The iSchool University of Maryland Wednesday, October 8, 2008 This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United StatesSee http://creativecommons.org/licenses/by-nc-sa/3.0/us/ for details

  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