Learn CSS in 12 Minutes [w/ subs]



00:00:00 – HTML is used to define the structure and
00:00:02 – the content of a webpage CSS is used to
00:00:04 – give style to that structure make it
00:00:06 – look nice and CSS is really easy to
00:00:08 – learn and we'll start on paper by
00:00:10 – drawing out the design that I want I
00:00:13 – want a header on my webpage you can see
00:00:16 – my website on the left-hand side i want
00:00:18 – the navigation with some links there are
00:00:20 – the main content to be to the right and
00:00:23 – Dennis pressure at the bottom can have a
00:00:25 – copyright notice so in HTML each box is
00:00:28 – going to be a div to define the
00:00:30 – structure even further
00:00:31 – i'm going to put everything in a diff so
00:00:33 – then i consent to that in the middle of
00:00:34 – the page I'm going to put this middle
00:00:37 – section in a div as well because in HTML
00:00:39 – it's good to define roles and dense but
00:00:41 – the rose up in two columns that
00:00:43 – necessary
00:00:43 – so we're going to call this is our want
00:00:46 – container want to get the ID content
00:00:49 – hush means the ID then we've got harsh
00:00:51 – header this middle content i'm gonna
00:00:54 – call content and inside of content to
00:00:57 – have got enough for navigation and hash
00:01:00 – main for the main section and then wash
00:01:03 – butter at the bottom
00:01:06 – I want the background of the whole page
00:01:08 – around here to be gray I want the
00:01:10 – background of container to be white on
00:01:14 – the background of headed to be blue and
00:01:17 – I want the background of further to be
00:01:19 – great as well on the whole thing to be
00:01:21 – 800 pixels wide
00:01:23 – I want to content to have a 10 pixels of
00:01:26 – padding around the outside so this space
00:01:28 – here on 10 pixels which leaves 802 track
00:01:31 – 10 and 10 780 pixels for the content if
00:01:34 – I want main to be 600 pixels wide
00:01:37 – this leaves a hundred and 80 pixels for
00:01:39 – navigation
00:01:41 – now i'm going to quickly create the HTML
00:01:42 – structure first in windows explorer you
00:01:45 – need to go to folder options and uncheck
00:01:47 – hide extensions for known file types
00:01:49 – then create a new text document i'm
00:01:52 – going to call it index and change the
00:01:54 – doc txt HTML indexes and then you give
00:01:57 – to the homepage of the website i'm going
00:02:00 – to use notepad plus plus there that
00:02:02 – there's any text editor will do so
00:02:04 – HTML types in our head tags and have a
00:02:08 – title my website body tags
00:02:12 – we have a Dave with the ID container
00:02:16 – then we have a div with the ID header
00:02:18 – content and sputter inside content we
00:02:28 – have enough and we have made just assume
00:02:39 – are you can see all of those games make
00:02:41 – up the structure we dry out and paper
00:02:43 – inside header we just want heading 1 sin
00:02:47 – my website inside now have had a three
00:02:51 – for the navigation links it's a good
00:02:52 – idea to put them in an unordered list
00:02:55 – just for some nice structure might have
00:02:58 – about you might have contact and so I
00:03:02 – men headed to home page I'm going to add
00:03:06 – a three paragraph paragraph one
00:03:08 – paragraph to paragraph 3 of Texas assist
00:03:11 – lorem ipsum which is nonsense texts and
00:03:14 – finally in the footer copyright
00:03:16 – cumbersome to copy semicolon gives you
00:03:19 – the copyright symbol 2014 cake right if
00:03:22 – we save that an open it in a browser you
00:03:24 – see all the content is there but it just
00:03:27 – doesn't look very nice at all and it
00:03:29 – doesn't have a layout that we want this
00:03:30 – is where CSS comes in with a new file
00:03:32 – i'm going to call it style N*** SS first
00:03:37 – we have to define a relationship between
00:03:39 – the HTML file under CSS file we do this
00:03:41 – with the link tag in head section of the
00:03:44 – HTML the first attribute is the
00:03:46 – relationship
00:03:47 – well and we tell at that it's a
00:03:49 – stylesheet the type of the file is text
00:03:52 – / CSS and then the link of the path to
00:03:55 – the file and sensitive the same folder
00:03:56 – we can use a very simple relative the
00:03:58 – path of style CFS and then itself
00:04:01 – doesn't I'd like that
00:04:03 – so the syntax of CSS first you define an
00:04:06 – element that you want to target so if i
00:04:09 – want to target an element with the ID
00:04:11 – header i type hush header and then open
00:04:15 – curly bracket and then further down
00:04:17 – close the curly bracket and everything
00:04:18 – inside these coal bracket will be
00:04:21 – applied to the anything on the page with
00:04:23 – the ID head for
00:04:25 – example I want to set the background
00:04:26 – color blue so set background hyphen
00:04:30 – color multiple ways to set colors i can
00:04:33 – just type blue but that doesn't give you
00:04:35 – much freedom and control the best way to
00:04:38 – do it is with a hex code if you google
00:04:40 – HTML color code you'll get a nice list
00:04:43 – of these and i found earlier that 660cc
00:04:46 – FF is a nice shade of blue when you do
00:04:49 – that you must prefix the number with a
00:04:51 – hush to preserve this and refresh our
00:04:53 – page we get a blue background for the
00:04:55 – header we might also want to make the
00:04:57 – text inside that Dave White we do that
00:04:59 – by saying color colon and we just type
00:05:01 – the word white then each line must end
00:05:03 – in a semicolon i mentioned that i wanted
00:05:06 – the background of the whole page to be
00:05:08 – creative and target the whole page by
00:05:10 – targeting the body tug you know you
00:05:13 – don't need a hash just the word body we
00:05:15 – set the background color wash de is the
00:05:20 – shade of gray that I want you often see
00:05:22 – when all of the numbers are less than
00:05:23 – the same you can show them just type 3
00:05:26 – ism then we wanted our container to have
00:05:29 – a white background
00:05:30 – I want the heading of the website to be
00:05:37 – centered you can do that with text
00:05:38 – hyphen align center remember the
00:05:41 – semicolon and I wanted the whole page to
00:05:43 – be centered in the middle and I wanted
00:05:46 – it to be 800 pixels wide
00:05:47 – this is why we wrapped everything in a
00:05:49 – content of so we can set the width to be
00:05:51 – 800 pixels as a center it you need to
00:05:54 – set the margin hyphen left to also and
00:05:58 – the margin hyphen right to also little
00:06:02 – Center div horizontally this doesn't
00:06:04 – work vertically but it's very useful for
00:06:06 – doing it horizontally because notice
00:06:08 – just got home page in there twice sorry
00:06:10 – about that our next problem is putting a
00:06:12 – navigation on the homepage side-by-side
00:06:14 – let's start by defining the Wits we
00:06:17 – wanted the content div to have 10 pixels
00:06:19 – of padding now we could do putting less
00:06:21 – 10 pixels of padding right 10 pixels but
00:06:24 – it quickly just to use the shorthand
00:06:26 – property money and then the first number
00:06:29 – is the top the second numbers that right
00:06:32 – the third number is the bottom and the
00:06:34 – fourth number is the left-hand side
00:06:36 – parting now since these are all
00:06:38 – then we can show them even more and
00:06:40 – simply just type 10 pixels and that
00:06:42 – applies to all sides we then wanted our
00:06:45 – now and give to have a width of 180
00:06:47 – pixels and our men Dave to have a width
00:06:50 – of 600 pixels the thing about gives is
00:06:53 – they always appear on a new line to stop
00:06:56 – that we need to set them to float we
00:06:57 – want them to float next to each other we
00:06:59 – won't have to float to the left of its
00:07:01 – parent content is its parent and Men
00:07:04 – closely the left or right it doesn't
00:07:05 – matter because there's no space for to
00:07:07 – move i'm going to put right to 32 c
00:07:09 – which order they come in and put them
00:07:11 – next to each other it makes a new
00:07:12 – problem well since the flossing the
00:07:14 – footer now doesn't care that it hasn't
00:07:16 – finished it it the overlap to fix us we
00:07:20 – target the first did and we apply a rule
00:07:22 – for this sin clear both this means we
00:07:25 – must be clear of any floating elements
00:07:27 – before we display ourselves so you can
00:07:30 – see here there's still a floating
00:07:31 – element here clearing both means let's
00:07:33 – get past all of the flossing elements
00:07:35 – and then display move most of the HTML
00:07:38 – I'm just going to actually make these
00:07:39 – navigation links into links with the a
00:07:42 – tag not going to go anywhere and i'm
00:07:44 – going to apply a class to the first one
00:07:47 – and call it selected because that is the
00:07:49 – paper on it the minute the homepage so
00:07:50 – let's first make the selected link
00:07:52 – called to do that we can target the
00:07:55 – class
00:07:56 – dr. selected cash for ID and dr. for a
00:07:59 – class now if we had a selected plus
00:08:01 – somewhere else and we wanted to be more
00:08:03 – specific
00:08:04 – we could do harsh enough cash selection
00:08:06 – to separate them with a space that
00:08:07 – filters down to any object with the
00:08:09 – class selected inside of the object with
00:08:12 – the ID enough then we can save on tight
00:08:15 – and wait hold since the link to put an
00:08:17 – underline under them we might not want
00:08:19 – that we might want to get rid of
00:08:20 – underlying on all links on the page so
00:08:22 – just like we targeted the body tag we
00:08:24 – can talk at a time and say text hyphen
00:08:27 – decoration not we might want our links
00:08:30 – to be red color red and we don't like
00:08:33 – those bullet points
00:08:34 – let's do something about those at target
00:08:36 – the unordered list within the navigation
00:08:40 – give that said the list hyphen style
00:08:44 – heightened type cannot remove the bullet
00:08:46 – points and let's set the puddling 20
00:08:49 – that removes the space at the left
00:08:52 – the reason we have a gap along the top
00:08:53 – is because this heading of the margin on
00:08:55 – it we can target the h1 tag and set the
00:08:58 – margin 20 if we wanted to apply the same
00:09:01 – rules to a number of different types we
00:09:03 – can separate them with comments we could
00:09:05 – apply to h2 and h3 as well and that
00:09:08 – would remove the margin from all of the
00:09:10 – headings to give the webpage a nice font
00:09:12 – we can set the font family property of
00:09:14 – the the whole body tag now you need a
00:09:16 – font stuck you start with the name of
00:09:18 – the font that you want and need some
00:09:19 – backups in case the users and have that
00:09:21 – font so you could try area lenders end
00:09:23 – with a type of font like Sun surf
00:09:25 – finally let's give the rotor 10 pixels
00:09:30 – of poly set the background color to Bray
00:09:34 – i'm going to choose 999999 set the color
00:09:39 – of the text to white and set the text
00:09:42 – aligned to write and equally give the
00:09:48 – header 10 pixels of pollen and there we
00:09:52 – go that's the webpage we designed on
00:09:53 – paper so to recap the impact of CSS
00:09:57 – first you start by specifying what you
00:09:59 – want the following rules to target so
00:10:02 – that could be something with a
00:10:03 – particular ID in which case you type
00:10:06 – hush and then the ID which could be
00:10:09 – something like header then you open
00:10:11 – curly bracket and then close the curly
00:10:14 – brackets and inside a good idea to
00:10:16 – indent just like an HTML so easy to read
00:10:19 – you can put the rules they come in the
00:10:21 – form of the property name a call on and
00:10:23 – then the value you want to set Israel
00:10:26 – end with a semicolon and it's useful to
00:10:28 – put each rule on a new land if you want
00:10:30 – to target something with a particular
00:10:32 – class you use a doctor instead of a hush
00:10:34 – if you want to combine them if i wanted
00:10:37 – to to apply this rule to the object with
00:10:40 – ID header and all of the objects with
00:10:43 – class sidebar i can do that by using a
00:10:45 – comma if you want to target a tag
00:10:49 – instead of an idea or class you just
00:10:51 – type the name of the time so like a or
00:10:55 – body if you want to be more specific
00:10:57 – just separate the identified with spaces
00:10:59 – so you can have fresh content the
00:11:02 – sidebar
00:11:04 – and this means apply this rule to any
00:11:05 – object with a class sidebar inside the
00:11:07 – object with the ID content of course
00:11:11 – this doesn't have to be an ID that could
00:11:13 – be a class we could be even more
00:11:14 – specific this chain can be as long as
00:11:17 – you want as long as an HTML
00:11:19 – this is inside of this and this is
00:11:22 – inside of this one last thing i want to
00:11:24 – mention is that you don't need to put
00:11:26 – the CSS in a separate file or to other
00:11:28 – places you can put it you can put it
00:11:29 – inside style tags directly in the head
00:11:33 – section just like that or you can use
00:11:36 – inline CSS you can add the style
00:11:38 – attribute to any HTML track but it's
00:11:42 – better practice and much simpler if you
00:11:44 – keep the CSS separate in its own file so
00:11:46 – i recommend doing that
00:11:48 – hopefully this has given you a good
00:11:49 – introduction to CSS which will help you
00:11:52 – turn those plain website into something
00:11:55 – presentable
00:11:56 – thanks for watching on the witches
00:11:58 – number plus number two and then we did
00:12:02 – output by typing echo from five plus
00:12:06 – three which will of expenses give us
00:12:09 – eight


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

Comments

comments