1 / 24

CSS: text chapter 3

CSS: text chapter 3. Stylesheet supplement. XHTML and CSS. XML is concerned primarily with document content – elements and their attributes.

amena-beach
Download Presentation

CSS: text chapter 3

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. CSS: text chapter 3 Stylesheet supplement

  2. XHTML and CSS • XML is concerned primarily with document content – elements and their attributes. • There is technology for presenting XML. XSL can be used to generate HTML out of XML. FOP (Formatting objects) is another example, allowing XML to be presented as PDF, for example. We won’t cover any of that in this course. • It is true that some XHTML tags do carry presentation information (headings and font tags, for example). • CSS was developed to enhance and specify HTML presentation.

  3. CSS1, CSS2, and CSS3 • CSS1 was developed by W3C in 1996 and has been largely, but not completely, implemented by IE6 and Netscape 7. • CSS2 came out in 1998 and it has only been partly implemented. • CSS3 is under development. • The text only covers a subset of CSS1 and CSS2 which has been implemented by one or both IE and Mozilla.

  4. CSS • “cascading” style sheets are so named because there are 3 levels, and each lower level can override a higher level in determining document presentation. • Inline is the lowest level and it applies to the content of a single tag. • Document level is specified in the header as an html comment and covers the entire document. • External can apply to many documents.

  5. Validator http://jigsaw.w3.org/css-validator/validator

  6. pseudoclass • These are styles to be implemented because something happens rather than because a tag or id exists. • Hover and focus are examples: hover means the mouse “hovers” over a field and focus means a field has the focus (has been selected/clicked on) • Text example didn’t come in the support examples so I made my own.

  7. my pseudo-class example <!-- pseudo classes example--> <html> <head><style type ="text/css"> input:hover {color:red;} input:focus {color:green;} </style> </head><body> <form action =""> <p> name....<input type="text"/> </p> </form></body></html>

  8. Showing psuedo example with hover and focus

  9. Fonts.html text example <html> <head> <title> Font properties </title> <style type = "text/css"> <!-- /* Document-level style sheet */ p.big {font-size: 14pt; font-style: italic; font-family: 'Times New Roman'; } p.small {font-size: 10pt; font-weight: bold; font-family: 'Courier New'; } --> </style> </head><body> <p class = "big"> If a job is worth doing, it’s worth doing right.</p> <p class = "small"> Two wrongs don't make a right, but they certainly can get you in a lot of trouble.</p> <h2 style = "font-family: 'Times New Roman'; font-size: 24pt; font-weight: bold"> Chapter 1 Introduction</h2> <h3 style = "font-family: 'Courier New'; font-size: 18pt"> 1.1 The Basics of Computer Networks </h3></body></html>

  10. Fonts in firefox

  11. (my) External sheet /*styles.css*/ p.big {font-size: 14pt; font-style: italic; font-family:'Times New Roman';} p.small {font:10pt bold 'Courier New';} h2 {font-family:'Times New Roman';font-size: 24pt; font-weight:bold} h3 {font-family:'Courier New';font-size: 18pt}

  12. And an html that uses it <!-- external stylesheet ex--> <html><head> <link rel="stylesheet" type="text/css" href="mystyles.css"/> </head> <body> <p class ="big">All's well that ends well</p> <p class ="small">A short horse is soon curried</p> <h2>every dark cloud has a silver lining</h2> <h3>Enough is as good as a feast</h3></body></html>

  13. In mozilla – notice I didn’t get italics

  14. Decoration.html (text example) <!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- decoration.html An example that illustrates several of the possible text decoration values --> <html> <head> <title> Text decoration </title> </head> <body> <p style = "text-decoration: line-through"> This illustrates line-through </p> <p style = "text-decoration: overline"> This illustrates overline </p> <p style = "text-decoration: underline"> This illustrates underline </p> </body> </html>

  15. Decoration.html in firefox

  16. Inline CSS: A piece of text example sequence_types.html <head> <title> Sequence types </title> </head> <body> <h3> Aircraft Types </h3> <ol style = "list-style-type: upper-roman"> <li> General Aviation (piston-driven engines) <ol style = "list-style-type: upper-alpha"> <li> Single-Engine Aircraft <ol style = "list-style-type: decimal"> <li> Tail wheel </li> <li> Tricycle </li> </ol> </li> <li> Dual-Engine Aircraft <ol style = "list-style-type: decimal"> <li> Wing-mounted engines </li> <li> Push-pull fuselage-mounted engines </li> </ol> </li> </ol> </li> <li> Commercial Aviation (jet engines) <ol style = "list-style-type: upper-alpha"> <li> Dual-Engine <ol style = "list-style-type: decimal"> <li> Wing-mounted engines </li>

  17. Previous html in firefox

  18. Inline CSS: Float picture right…Float.html in text slideshow <!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- float.html An example to illustrate the float property --> <html> <head> <title> The float property </title></head> <body> <p> <img src = "c210new.jpg" alt = "Picture of a Cessna 210" style = "float: right" /> </p> <p>This is a picture o… </p> </body></html>

  19. A javascript/css example: borders.html <script type = "text/javascript"> <!-- var bordersize; bordersize = prompt("Select a table border size \n" + "0 (no border) \n" + "1 (1 pixel border) \n" + "4 (4 pixel border) \n" + "8 (8 pixel border) \n"); switch (bordersize) { case "0": document.write("<table>"); break; case "1": document.write("<table border = '1'>"); break; case "4": document.write("<table border = '4'>"); break; case "8": document.write("<table border = '8'>"); break; default: document.write("Error - invalid choice: ", bordersize, "<br />"); }

  20. borders document.write("<caption> 2001 NFL Divisional Winners </caption>"); document.write("<tr>", "<th />", "<th> American Conference </th>", "<th> National Conference </th>", "</tr>", "<tr>", "<th> East </th>", "<td> New England Patriots </td>", "<td> Philadelphia Eagles </td>", "</tr>", "<tr>", "<th> Central </th>", "<td> Pittsburgh Steelers </td>", "<td> Chicago Bears </td>", "</tr>", "<tr>", "<th> West </th>", "<td> Oakland Raiders </td>", "<td> St. Louis Cardinals </td>", "</tr>", "</table>"); // --> </script> </body>

  21. Prompts users to select pixels

  22. Borders.html

  23. My background image example <html> <head> <title> Background images </title> <style type="text/css"> body {background-image: url(fireguy0.gif);> p {margin-left: 30px; margin-right: 30px; margin-top: 50px; font-size: 14pt;} </style> </head> <body> <p> The Cessna 172 is the most common general aviation airplane in the world. … </p> </body> </html>

  24. My background image example

More Related