External CSS Tutorial [w/ subs]



00:00:00 – good afternoon today we're going to be
00:00:04 – looking at our external CSS tutorial it
00:00:08 – might be worthwhile to reviewing what an
00:00:11 – external CSS is so first of all an
00:00:17 – external CSS is a separate CSS file that
00:00:20 – controls what each page looks like so
00:00:23 – instead of having the internal CSS that
00:00:26 – we had before for each individual page
00:00:28 – what we've done is we're going to create
00:00:31 – an external style that controls what
00:00:33 – each page looks like now remember the
00:00:36 – fun was not the same format as the HTML
00:00:39 – files that we have been worked on for
00:00:41 – example on you know if at home HTML a
00:00:45 – history HTML but now we're going to have
00:00:48 – something called my style dot CSS and
00:00:51 – the dot CSS determines that it is a CSS
00:00:55 – file and not an HTML file we still use
00:00:58 – the same software to edit it will be
00:01:01 – using Dreamweaver but it's important to
00:01:03 – note that there is a difference the
00:01:05 – other thing you need to remember is that
00:01:06 – the way CSS work it's a cascading style
00:01:11 – sheet so the external CSS dictates with
00:01:14 – the style of each page will look like
00:01:16 – however if you have an internal CSS for
00:01:23 – example under page one even though you
00:01:25 – might change the background color in the
00:01:28 – external CSS because the page one
00:01:32 – internal HTML has a CSS file declaration
00:01:37 – in those it says that it's not going to
00:01:39 – change the color then whatever you do
00:01:41 – the external page won't change the HTML
00:01:44 – page same with the inline so essentially
00:01:48 – the external is very broader change the
00:01:53 – internal is a secondary change but the
00:01:56 – predominant one the dominating one is
00:01:59 – the inline change I'll talk to you about
00:02:01 – that before again it's more easier to
00:02:05 – dictate what your style looks like by
00:02:08 – using that external one because it's
00:02:11 – less typing in there's a lot less air
00:02:12 – in doing that all right so let's go back
00:02:16 – and open up Dreamweaver so we can have a
00:02:19 – look at what we are dealing with so here
00:02:24 – is our dream weaver file and you want to
00:02:28 – open up all the previous fall that we
00:02:30 – have been working with so I am simply
00:02:33 – going to click the command o or go file
00:02:40 – open I'll navigate to my folder and
00:02:44 – Sullivan where I had my three folders as
00:02:48 – we filed and I've been working with them
00:02:49 – but I open them all up alright so as you
00:02:55 – can see I've got my three folders in my
00:03:00 – three documents i have my punch cards
00:03:03 – documents i have my HTML on my index
00:03:07 – document and i have my history doctorate
00:03:09 – you'll notice the only one that has any
00:03:11 – CSS in it will be the index so I need to
00:03:18 – create a new document and so what I'm
00:03:21 – going to do is I'm going to go to here
00:03:23 – and these are my three documents and
00:03:27 – I've gone so I want to create a new
00:03:29 – document so when I go file new or
00:03:31 – commands noon and I'm going to choose
00:03:34 – GSS and i'm going to create my name is
00:03:38 – CSS 12 alright so here is my CSS
00:03:42 – document and right now I need to start
00:03:46 – typing in the codes that I want to apply
00:03:51 – to all of my documents so let's take for
00:03:55 – example if you remember I had a
00:03:57 – background color set up for my web site
00:04:05 – so I'm going to go body and then I'm
00:04:10 – going to put that squiggly line like
00:04:11 – we've done before and i'm going to type
00:04:16 – in background color i'm going to choose
00:04:25 – let's go on Alice blue and then I'm
00:04:34 – going to close that so I've got my body
00:04:39 – that's going to be that background color
00:04:40 – I might want to change my h1 to be color
00:04:50 – let's go blue violet um and then i might
00:05:06 – go text-align center so there is my page
00:05:16 – those are some just some generic
00:05:19 – declarations that got set forth and then
00:05:26 – what I need to do is let me state it so
00:05:28 – I'm going to go the command s and I'm
00:05:33 – going to save it as my style GSS keeping
00:05:38 – the same folder that you put everything
00:05:39 – else and save it okay now how do I apply
00:05:46 – it to my other documents so I'm gonna go
00:05:51 – to my history here and in the header
00:05:55 – I'll do it after the title I'll need to
00:06:01 – actually make the link at this stage to
00:06:07 – that particular document so i'm going to
00:06:11 – plug in link and then the Arielle's
00:06:15 – style sheet and this tells us that i'm
00:06:23 – looking for looking for a style sheet
00:06:26 – then i need to put in the type and it's
00:06:33 – a text CSS and then i need to write the
00:06:36 – eight reference because where the file
00:06:38 – is located
00:06:39 – and so that i can just scroll down here
00:06:42 – click on that and now i have linked my
00:06:48 – style sheet if i say that and we click
00:06:54 – on this you'll see that the changes have
00:06:56 – happened the try to click on index for
00:07:04 – example it hasn't now once it's going to
00:07:08 – happen I'll go back to my HTML and the
00:07:11 – save myself from talking all of this i'm
00:07:12 – just going to cut and paste ctrl c going
00:07:16 – to go back to my index here and we've
00:07:21 – got this title page that this style here
00:07:25 – now you know this is the stone that I've
00:07:27 – already set up but I don't want that
00:07:30 – style I want my new style so I'm going
00:07:34 – to replace it and there we go now you'll
00:07:38 – notice even though I've done that how
00:07:43 – they look it's like over this history
00:07:47 – you know it's good I corporal head over
00:07:49 – to what type of my index here I still
00:07:51 – don't have a purple header now why is
00:07:53 – that well that's because I've got an
00:07:56 – internal inline CSS so I'm going to have
00:08:00 – to get rid of that inline style if I
00:08:03 – want to make anything the same so now um
00:08:09 – everything will look the way I want to
00:08:12 – look alright so let's go back up going
00:08:17 – to copy my link all right and I'm going
00:08:21 – to put it on every single one of my page
00:08:23 – that I'm out there every single one of
00:08:26 – my fates i have i'm going to make all
00:08:28 – the song sheets all of them linked to
00:08:32 – the same so now all of our pages will
00:08:38 – look the same all of my stars in to
00:08:39 – protect and that's what you need to do
00:08:41 – um so great a stylesheet don't spend a
00:08:46 – lot of time let's make one chains on
00:08:47 – your stocks you make sure that all of
00:08:50 – your pages have the same style sheets
00:08:52 – there
00:08:53 – and they're working and then all you
00:08:55 – have to do is go back to your style
00:08:57 – sheet here and to make some changes so I
00:08:59 – look I don't like the flu I want to make
00:09:02 – another blue I want to change this blue
00:09:04 – something else so I want to change it to
00:09:08 – the Navy because I like Navy instead if
00:09:12 – I save that and I go back to any of my
00:09:14 – previous pages it's changed do you know
00:09:18 – that Navy that looks the neighbor looks
00:09:19 – pretty bad who wants to be you know a
00:09:22 – navy let's go to a nice maroon color
00:09:26 – right there we go can't go wrong with
00:09:31 – them runs right much better than the
00:09:33 – blues we'll save that and then we have a
00:09:37 – look at our color and there we go we
00:09:38 – have a winner anyway hopefully that will
00:09:41 – help you out and you might play around
00:09:44 – with that today and give any questions
00:09:47 – feel free to ask


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

Comments

comments