CSS: text chapter 3 Stylesheet supplement
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.
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.
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.
Validator validator/validator
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.
my pseudo-class example input:hover {color:red;} input:focus {color:green;} name....
Showing psuedo example with hover and focus
Fonts.html text example Font properties <!-- /* 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'; } --> If a job is worth doing, it’s worth doing right. Two wrongs don't make a right, but they certainly can get you in a lot of trouble. <h2 style = "font-family: 'Times New Roman'; font-size: 24pt; font-weight: bold"> Chapter 1 Introduction <h3 style = "font-family: 'Courier New'; font-size: 18pt"> 1.1 The Basics of Computer Networks
Fonts in firefox
(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}
And an html that uses it All's well that ends well A short horse is soon curried every dark cloud has a silver lining Enough is as good as a feast
In mozilla – notice I didn’t get italics
Decoration.html (text example) <!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN" " <!-- decoration.html An example that illustrates several of the possible text decoration values --> Text decoration This illustrates line-through This illustrates overline This illustrates underline
Decoration.html in firefox
Inline CSS: A piece of text example sequence_types.html Sequence types Aircraft Types General Aviation (piston-driven engines) Single-Engine Aircraft Tail wheel Tricycle Dual-Engine Aircraft Wing-mounted engines Push-pull fuselage-mounted engines Commercial Aviation (jet engines) Dual-Engine Wing-mounted engines
Previous html in firefox
Inline CSS: Float picture right…Float.html in text slideshow <!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN" " The float property <img src = "c210new.jpg" alt = "Picture of a Cessna 210" style = "float: right" /> This is a picture o…
A javascript/css example: borders.html <!-- 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(" "); break; case "1": document.write(" "); break; case "4": document.write(" "); break; case "8": document.write(" "); break; default: document.write("Error - invalid choice: ", bordersize, " "); }
borders document.write(" 2001 NFL Divisional Winners "); document.write(" ", " ", " American Conference ", " National Conference ", " ", " East ", " New England Patriots ", " Philadelphia Eagles ", " ", " Central ", " Pittsburgh Steelers ", " Chicago Bears ", " ", " West ", " Oakland Raiders ", " St. Louis Cardinals ", " ", " "); // -->
Prompts users to select pixels
Borders.html
My background image example Background images body {background-image: url(fireguy0.gif);> p {margin-left: 30px; margin-right: 30px; margin-top: 50px; font-size: 14pt;} The Cessna 172 is the most common general aviation airplane in the world. …
My background image example