Styling XML tags with CSS part18 [w/ subs]



00:00:00 – now let's take a look at a slightly more
00:00:01 – advanced example of associating CSS
00:00:04 – style sheets with xml so here in my
00:00:08 – example snippets scroll down to the
00:00:10 – styling tags with CSS section and i'm
00:00:13 – going to open up the business card
00:00:16 – underscore no style dot XML so this is
00:00:20 – the business card xml data that we've
00:00:22 – been working with up until now in the
00:00:23 – course and what I'm going to do is save
00:00:27 – this and let's take a quick look at this
00:00:29 – in the browser and see how it looks so
00:00:32 – i'm gonna click on this open it up and
00:00:36 – you can see that because we haven't yet
00:00:37 – to find a style sheet we get the
00:00:39 – familiar-looking xml document tree so
00:00:43 – let's fix that let's go back to the code
00:00:45 – let's go to the snippets and we've done
00:00:48 – this before but let's just copy this
00:00:50 – line right here and paste it into the
00:00:55 – xml document now again this isn't any
00:00:58 – different so far then what we did in the
00:01:00 – previous exercise so let's say this now
00:01:02 – let's go back out to the browser again
00:01:04 – and refresh document and see what
00:01:05 – happens
00:01:06 – ok so let's refresh and now you can see
00:01:10 – that the xml has an appearance but all
00:01:13 – the contents of the business card or
00:01:15 – kind of just jumbled together they're
00:01:17 – not on their own lines there no all
00:01:19 – squished up they're not labeled properly
00:01:21 – so let's go back and fix that
00:01:25 – alright so back here in the code the
00:01:27 – reason why that's happening is because
00:01:29 – in the previous example we only had one
00:01:32 – tagged with some text content and now we
00:01:36 – have a root tagged with other tags
00:01:39 – embedded inside of it and the browser is
00:01:41 – just simply taking the text content of
00:01:43 – all of those tags and putting them into
00:01:45 – the browser window without styling them
00:01:48 – individually so we can fix that by going
00:01:50 – back over to the example snippets and
00:01:54 – what I'm going to do is copy all of
00:01:56 – these lines right here
00:01:57 – so starting with name all the way down
00:02:00 – to email a copy that and i'm going to
00:02:02 – open up the business card dot CSS file
00:02:05 – and I'm going to paste all of that down
00:02:09 – here
00:02:11 – alright so let's take a look at what's
00:02:12 – happening here here is the CSS for the
00:02:16 – business card and you can see it's
00:02:18 – pretty similar to the CSS that we looked
00:02:21 – at for the first tag example I've got a
00:02:24 – font family in some background color in
00:02:26 – this case i'm doing a display of block
00:02:28 – i'm also giving it with some font
00:02:30 – information and stuff that should look
00:02:32 – familiar to you by now what I've also
00:02:34 – done by pasting in that code down here
00:02:36 – though is to find CSS stylesheets not
00:02:40 – just for the business card root AG but
00:02:42 – for each one of the child elements that
00:02:44 – are inside the business card so we've
00:02:47 – got name you've got phone we've got
00:02:49 – email and if we go back and look at the
00:02:51 – xml code that's all of these tags right
00:02:53 – here so now each one of those is going
00:02:55 – to have its own style sheet so let's go
00:02:57 – ahead and save the business cards CSS
00:03:00 – file and we'll go back to business card
00:03:05 – underscoring no style and we've got the
00:03:07 – CSS now associated with it so make sure
00:03:10 – that saved and now let's go back to the
00:03:11 – browser and refresh
00:03:13 – ok so back here in the browser when i
00:03:15 – refresh the page you can see now that
00:03:18 – each one of the individual elements is
00:03:21 – being styled by itself so here's the
00:03:23 – name it has its own style hear the phone
00:03:25 – numbers they have their own style and
00:03:27 – here's the email address
00:03:29 – now of course if you're paying attention
00:03:30 – you'll notice that there are no labels
00:03:32 – now that's a different animal and we
00:03:35 – have to handle that problem a little bit
00:03:37 – differently so we'll take a look at that
00:03:39 – in the next exercise


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

Comments

comments