CSS_Demo1 - CSS Demo: Creating your first style sheet for...

Info iconThis preview shows pages 1–2. Sign up to view the full content.

View Full Document Right Arrow Icon
CSS Demo: Creating your first style sheet for XML The XML Document Begin by opening the file "address-book-nested-w-data.xml" in your notepad editor. Once open, insert the xml-stylesheet processing instruction and make a link to a new cascading style sheet that you will create in the following lines. You will call this style sheet "address_book_1.css". Save your XML instance document and load it inside of your Mozilla browser. The CSS Document Now that you have added your xml-stylesheet PI to your XML instance document, open a second notepad window and save this empty document as "address_book_1.css". (NOTE: Make sure both the XML instance document and the CSS files are in the same directory.) We will now begin to add style to your XML document via the style sheet we just created. Lets begin by defining which elements in the address book should be block level elements. 1. The first element that should be a block level element should be the root element of the document. I’ll let you determine which element that is. We will also make each contact within the document a block level element, which will make it easy to see each individual contact within the rendered browser output. Save your style sheet document and reload your XML instance document in your browser. You should now see three blocks of text rather than one large continuous block of text. 2. At this point in time you are probably thinking that it is somewhat difficult to identify each contact block (or record) of information in the output. Let us fix this problem at this point in time by adding two new rules to your style sheet that will insert content into the rendered XML instance document. The first rule will specify content (‘Contact Information:’) to be inserted BEFORE each contact block. The second rule will specify content (‘***‘) to be inserted AFTER each contact block. You may want to make further adjustments these pieces of information that you are inserting into the rendered document by making the appear as bold faced text or by centering them on the line where they occur. (Note that if you wish to make text appear centered, you must also make the rule appear as a block.) Save your style sheet document and reload your XML instance document in your browser. Your contact blocks should now be easy to identify in the rendered output document. 3. We will now continue to break down the content within each contact block so that we can easily see the content affiliated with each name element, personal-information element, employment-information element, email element, phone element and the comments element. You should now have 3 style sheet rules with the first possessing a complex selector matching a total of 8 different elements. Save your style sheet again and reload your XML instance document in your browser. Now the three blocks of text that you saw in step 1 should be further subdivided so that you can easily read the content on the screen. At this point in time your rendered output should extend about halfway down your browser
Background image of page 1

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
Image of page 2
This is the end of the preview. Sign up to access the rest of the document.

Page1 / 6

CSS_Demo1 - CSS Demo: Creating your first style sheet for...

This preview shows document pages 1 - 2. Sign up to view the full document.

View Full Document Right Arrow Icon
Ask a homework question - tutors are online