Associating an XML file with a CSS style sheet part22 [w/ subs]



00:00:00 – in this example we're going to see how
00:00:01 – to associate some styling information
00:00:04 – with XML tags so let's begin by opening
00:00:07 – up the first xml file to xml code in
00:00:11 – chapter 4 and if you did the previous
00:00:14 – exercise then this document should
00:00:16 – already have some content and let's also
00:00:19 – open the example snippets and we're
00:00:22 – going to do is open up the first xml
00:00:24 – file that CSS file here right now it's
00:00:27 – blank so over in the snippets i'm going
00:00:30 – to scroll down to my chapter 4 section
00:00:31 – and i'm going to copy lines 23-26 here
00:00:36 – and i'm going to copy those lines and
00:00:38 – paste them into the CSS file here
00:00:43 – ok so let's take a moment to go through
00:00:46 – the CSS file line by line and see what's
00:00:48 – happening so right here on line one
00:00:51 – I have the word first tag and that
00:00:53 – corresponds with the XML tags over here
00:00:56 – in our XML document so just like you
00:00:59 – would normally do in HTML you can define
00:01:02 – a CSS stylesheet that applies to an XML
00:01:04 – tag now inside the XML tags style
00:01:08 – declaration i have display block because
00:01:11 – i want the information to display as a
00:01:13 – block level element otherwise the
00:01:15 – browser doesn't really know how to
00:01:17 – display it i'm gonna give it a font
00:01:18 – family of aerial i'm going to give it a
00:01:21 – large font size and a color of blue
00:01:25 – ok so now i want to save this file and
00:01:27 – go back out to the file system now
00:01:30 – recall that when we open up the file in
00:01:32 – the browser let's go ahead and do that
00:01:34 – i'm going to open this up in chrome and
00:01:37 – you can see that it's just the xml data
00:01:39 – right so now we need a way of
00:01:41 – associating the CSS style sheet with the
00:01:45 – xml file itself so let's go back to the
00:01:47 – code
00:01:48 – alright so back here in aptana studio
00:01:51 – what I'm going to do is go to the
00:01:52 – snippets and right here i'm going to
00:01:54 – copy this line and i'm going to copy
00:01:58 – that and paste it into the xml file
00:02:01 – right below the xml document declaration
00:02:04 – and you can see that it starts with an
00:02:06 – angle bracket and a question mark which
00:02:08 – means that this is a processing
00:02:10 – instruction it's going to tell the
00:02:12 – browser
00:02:13 – that there's a processing instruction
00:02:15 – called xml dash style sheet which means
00:02:18 – hey browser there's a stylesheet that
00:02:20 – goes along with this xml file the type
00:02:23 – attribute is set to text / CSS and the
00:02:26 – HR field points to the path to the CSS
00:02:30 – style file and since it's in the same
00:02:32 – directory just called first xml file
00:02:34 – that CSS alright so now let's save this
00:02:37 – document and now let's go back over to
00:02:39 – the browser and let's refresh the page
00:02:42 – and you can see that when we refresh the
00:02:44 – page now the xml document tree has gone
00:02:47 – away and it's been replaced by the text
00:02:50 – that's in the file and you can see that
00:02:52 – sure enough it's arial font it's blue
00:02:54 – and it's relatively large alright let's
00:02:57 – try the same thing in some of the other
00:02:59 – browsers
00:02:59 – ok so let's right click and open in
00:03:03 – firefox and you can see that we're
00:03:06 – getting the right result and let's try
00:03:09 – the same thing in internet explorer and
00:03:12 – you can see that the same thing is
00:03:14 – happening so using an XML stylesheet
00:03:16 – declaration you can associate CSS
00:03:19 – information with your xml files and give
00:03:22 – the xml and appearance


Video Url:
http://youtu.be/o19z71P_dpQ

(Visited 3 times, 3 visits today)

Comments

comments