Learn CSS in 12 Minutes

hTML is used to define the structure and the content of a web page CSS is used to give style to that structure and make it look nice and CSS is really easy to learn I'm going to start on paper by drawing out the design that I want I want a header on my web page you can say my web site on the left hand side I want some navigation with some links there I want the main content to be to the right and then a footer at the bottom can have a copyright notice so in HTML each box is going to be a div to define the structure even further I'm going to put everything in a div so then I can Center that in the middle of the page I'm gonna put this middle section in a div as well because in HTML it's good to define roles and then split the rows up into columns if necessary so we're gonna call this this outer one container I want to give it the ID container the hash means it's the ID then we've got hash header this middle container I'm going to call content and inside of content we've got hash naav for navigation and hash main for the main section and then hash footer at the bottom I want the background of the whole page around here to be gray I want the background of container to be white on the background of header to be blue I want the background of footer to be grey as well I want the whole thing to be 800 pixels wide I want the content to have 10 pixels of padding around the outside so there's space here I want 10 pixels which leaves 800 subtract 10 and 10 780 pixels for the content if I want main to be 600 pixels wide this leaves 180 pixels for navigation now we want to quickly create that HTML structure first in Windows Explorer you need to go to folder options and uncheck hide extensions for known file types then create a new text document I'm going to call it index and then change the dot txt to HTML indexes the name you give to the home page of a website I'm going to use notepad plus plus to edit this any text editor will do so HTML tags and our head tags and we have a title my website body tags we have Dave with the ID container then we have a div with the ID header content and butter inside content we have nav and we have main which is sumo you can see all of those divs make up the structure we drew out on paper inside header we just want heading 1 saying my website inside nav head a3 now for the navigation links it's a good idea to put them in an unordered list just for some nice structure we might have about we might have contact inside main head at - homepage I'm gonna add three paragraphs paragraph one paragraph 2 paragraph 3 of text this is just lorem ipsum which is nonsense text then finally in the footer copyright ampersand copy semicolon gives you the copyright symbol 2014 Jake right so if we save that and open it in a browser you'll see all of the content is there but it just doesn't look very nice at all and it doesn't have the layout that we want this is where CSS comes in there is a new file I'm gonna call it - style dot CSS first we have to define a relationship between the HTML file and the CSS file we do this with the link tag in the head section of the HTML the first attribute is the relationship rel and we tell it that it's a stylesheet the type of the file is text slash CSS and then the link or the path to the file and centered in the same folder we can use a very simple relative path of style dot CSS and then it's a self closing tag like that so the syntax of CSS first you define an element that you want to target so if I want to target an element with the ID header I type hash header and then open curly brackets and then further down close the curly brackets and everything inside these curly brackets will be applied to the anything on the page with the ID header for example I want to set the background color Lu so set background - color multiple ways to set colors I can just type blue but that doesn't give you much freedom and control the best way to do it is with a hex code if you google HTML color codes you'll get a nice list of these and I found earlier that 6 6 C CF f is a nice shade of blue when you do this you must prefix the number with a hash to receive this and refresh our page we get a blue background for the header we might also want to make the text inside that div white we do that by saying color : and we just type the word white then each line must end in a semicolon I mentioned that I wanted the background of the whole page to be gray and target the whole page by targeting the body tag you know you don't need a hash just the word body and we can set the background color hash ee-ee-ee-ee is the shade of grey that I want you'll often see when all of them numbers or letters are the same you can shorten it and just type three of them then we wanted our container to have a white background I want the the heading of the website to be centered you can do that with text - align Center remember the semicolon and I wanted the whole page to be centered in the middle and I wanted it to be 800 pixels wide so this is why we wrapped everything in a container tip so we can set the width to be 800 pixels now to Center it you need to set the margin - left - also and the margin - right - Auto this will Center dibbs horizontally this doesn't work vertically but it's very useful for doing it horizontally just notice I've got homepage in there twice sorry about that our next problem is putting the navigation and the homepage side-by-side let's start by defining the widths we wanted the content Dave to have 10 pixels of padding now we could do padding left 10 pixels padding right 10 pixels but it's quickly just to use the shorthand property panning and then the first number is the top the second number is the right the third number is the bottom and the fourth number is at the left hand side padding now since these are all the same we can shorten this even more and simply just typed 10 pixels and that applies to all sides we then wanted our nav and div to have a width of 180 pixels and our main div to have a width of 600 pixels now the thing about divs is they always appear on a new line to stop that we need to set them to float we want them to float next to each other we want enough to float to the left of its parent content is its parent now man can flow to the left or right it doesn't matter because there's no space for it to move I'm going to put rights or so it's easy to see which order they come in so that puts them next to each other it makes a new problem though since they're floating the footer now doesn't care that it hasn't finished it they overlap to fix that we target the photo div and we apply a rule to this send clear:both now this means we must be clear of any floating elements before we display ourselves so you can see here there's still a floating element here clearing both means let's get past all of the flossing elements and then display moving back to the HTML I'm just going to actually make these navigation links into links with the a tag you're not going to go anywhere and then we're going to apply a clasp to the first one and call it selected because that is the patreon at the minute the home page so let's first make the selected link bold to do that we can target the class dot selected hash for ID a doctor for a class now if we had a selected class somewhere else and we wanted to be more specific we could do hash enough hash selected to separate them with a space this filters it down to any object with the class selected inside of the object with the ID nav then we can say font - weight bold since the links have put an underline under them win might not want that we might want to get rid of underlines on all links on the page so just like we targeted the body tag we can target the a tag and say text - decoration none we might want our links to be red color red and we don't like those bullet points so let's do something about those let's target the unordered list within the navigation div that said the list - style - type - non that removes the bullet points and let's set the padding to zero that removes the space at the left the reason we have a gap along the top is because they heading has a margin on it we can target the h1 tag and set the margin to zero if we wanted to apply the same rules to a number of different types we can separate them with commas we could apply to h2 and h3 as well and that would remove the margin from all of the headings to give the web page a nicer font we can set the font family property of the the whole body tag now you need a font stuck you start with the name of the font that you want then you need some backups in case the users and have that font so you could try Arial then just end with a type of font like Sun serif finally let's give the footer ten pixels of padding set the background color to gray I'm going to choose nine nine nine nine nine nine set the color of the text to white and set the text aligned to right and equally give the header ten pixels of padding and there we go that's the webpage we designed on paper so to recap the syntax of CSS first you start by specifying what you want the following rules to target so that could be something with a particular ID in which case you type a hash and then the ID which could be something like header then you open curly brackets and then it closed the curly brackets and inside it's a good idea to indent just like an HTML so it's easy to read you can put the rules they come in the form of the property name a colon and then the value you want to set each rule ends with a semicolon and it's useful to put each rule on a new line if you want to target something with a particular class you use a dot instead of a hash if you want to combine them if I wanted to apply this rule to the object with ID header and all of the objects with class sidebar I can do that by using a comma if you want to target a tag instead of an ID or a class you just type the name of the tag so like a or body if you want to be more specific just separately identify as with spaces so you can have hash content dot sidebar and this means apply this rule to any object with a class sidebar inside the object with the ID content of course this doesn't have to be an ID that could be a class we could be even more specific this chain it can be as long as you want as long as in the HTML this is inside of this and this is inside of this one last thing I want to mention is that you don't need to put the CSS in a separate file or two other places you can put it you can put it inside style tags directly in the head section just like that or you can use inline CSS you can add the style attribute to any HTML tag but it's better practice and much simpler if you keep the CSS separate in its own file so I recommend doing that hopefully this has given you a good introduction to CSS which will help you turn those plane websites into something presentable thanks for watching number which is number + number - and then we could output by typing echo some 5 + 3 which will as expected give us 8

Channel: Jake Wright

Views: 2,099,526

Rating: 4.9435802 out of 5

Keywords: CSS, tutorial, computer, web, internet, html, learn, how to, cascading, style, sheet, webpage, site, online, build, scratch, windows, mac, notepad, jake, wright, Cascading Style Sheets (Programming Language), Mac OS (Operating System)

Id: 0afZj1G0BIE

Length: 12min 11sec (731 seconds)

Published: Wed Jan 15 2014