Web Development Tutorial for Beginners (#2) - Basic CSS - How to build a website with HTML & CSS

Key Takeaways

how to do web development um in the previous tutorial we covered basic HTML of how to put together an HTML page uh we learned how to do tags opening and closing tags uh we learned kind of what some of those popular tag names are and honestly there's only 10 or 15 you actually need to know anyway so hopefully by now you've taken that course and you're comfortable uh with kind of writing out basic HTML tags this should look decently familiar to you if not go back through the last video and get comfortable I promise it won't take very long there's only a few tags you have to learn um and it really feels weird at first if you're not used to writing anything that feels like code but I promise it comes very quickly you won't be confused for long so what I've done here is I've taken and modified my example from the last video and now I have my HTML with a header and a body and in that body I have a header one which says my website I've got an unordered list with a link to three different pages and I've got uh also a little bit of fake content you'll notice this tag up here I left this out in the last example because it didn't really apply to learning basic HTML tags but we're going to add this at the top of every HTML page and this just declares that the document type is HTML and putting it like this actually means HTML 5 so it all you need to know is that it needs to be there at this point uh it basically tells your browser hey we're working with an HTML 5 page what I did then is I created a new page called page 2html and I saved it in the same folder then I created another page called page 3. HTML it's also in the same folder and you can see here I didn't include a full HTTP www.my website.com all I did is put a it's called a relative link if you don't put that full thing it looks starting in the same folder that you're in now and the reason we called our first page index is because index is what it's automatically going to look look at when you load a website if you go to google.com uh you know there can be some configuration changed uh to make it different but by default a website is going to look for index.html so one thing I changed here is the first li if it's on the page that you're on now there's not going to be an a tag it's because if we're on home we don't have to go to home we're already there so as you can see on home this is not a link page two and three are a link and I can go to page two and it loads up page two and now home and Page Three are a link because home is going to index and three is going to page three so I can now navigate between all three pages of my website see it's not too bad I basically have a website that's up and running it's just ugly because there's no style so let's get into how to add style to your web page I've saved a file called main.css and a c CSS stylesheet Is How We Do styling and it basically works like this is you have a selector which is where we pick uh something we're going to add style to and then you have a rule uh the selector basically has brackets anything within those brackets gets applied to the selector so the rule you have the property that you want to change and then the value you want to give it and then you've got a colon and it ends with a semicolon this will probably be the weirdest part about CSS is getting comfortable going going selector open some brackets go back go uh property colon value semicolon probably looks weird feels like it's a lot to memorize it's going to come really fast type your selector open some brackets pick a property pick a value for it you're done so in this case we've picked body so anything within the body is now going to get a background of 999 we'll get into this a little bit later but for now that just means a background of gray tell you what we'll make it black we'll make it red for now that's a little easier to understand so the body now gets a background of red you notice when I refresh nothing happens because this stylesheet is not attached at all to my page so there's two ways you can get style to your page you can start by just going style and add a style tag and we'll make sure we add this attribute type equals text/css because we're doing CSS style and now I can go body background nope not bottom red hit save hey check it out there you go so you're thinking why would I not clearly do it this way this is much easier uh but what if we want to type in 150 different rules and we want them to be shared between all our Pages well now you either have to copy paste or you put them in a separate file which is what we're going to do here we put background red in here and now we can link to it we're going to do a link and this HF is going to be I'm going to link to Styles main.css and I need to do Rel equals stylesheet and basically what that tells it is I'm giving you a link to a stylesheet and we can also add type equals text/css most new browsers don't need that but some old browsers are going to so now what we've done is we've added this link and now all I have to do is add this link to each page and each page is now going to get all the styles that I put in main.css so now you see as I navigate every page background is hideous red I'm going to change that to a slightly more more pleasant color 999 which is kind of a grayish color and so now we can add some more Styles let's say we want to make our headers a better font uh actually let's make the whole body a different font font family Ariel there we go that's a little bit cleaner looking now the font family is aerial now CSS is where you get into a decent bit more memorization there's only about 10 or 15 HTML tags you use there's a lot of CSS properties that you can adjust because as you can imagine every ounce of style that the whole page has is coming from these CSS properties so it's just going to take you a little while you'll want to start off with some things that are more comfortable and work your way up there's not it's not an endless Black Box there's an end to it it probably will only take you a few weeks and then all of a sudden you realize wow there are no more CSS properties that I don't know it's just a long few weeks of learning so definitely give yourselves a little bit of time have patience and it will come very quickly but at first you're going to feel like you're just completely drowning uh in the ability to not do anything that you want it to do uh we're going to show you a little bit more about selectors here real quick so here's that you've I've shown you how to grab things by tag name that's what we did here we just created a tag name body usually you don't do that too often you'll do it for body you'll do it for H1 uh so I'll go H1 I'm going to go color and this will be like a 333 color and now you notice my H1 got just a little bit lighter let's change that a little bit more to 666 all the mark of the beast jokes yep coming out basically if you go all the way to 0000 0 you're at Black if you go all the way up to 999 you're at a gray and anything in between is kind of well in between so I'm going to make that 555 but I also want this to apply to any H2S so I'm going to do H1 comma H2 and now you'll notice my H2 also has uh a gray color I could also make this P I want any of my paragraphs to have this I can make this any liis I want my Lis to have this I can make this any A's I want my A's to have this and now I've styled everything with a color of 555 I don't want my A's to do that though so maybe I'll make my A's a different color later on let's make my A's a little different color blue there you go ah green everything's green there we go everything's blue I want to change it up a little bit so now we have every page is inheriting these Styles so it's starting to look just a little bit better uh um so let's go ahead and add maybe a couple more Styles here let's give paragraphs a background color and let's make our paragraph's color white yeah that's feeling nice uh I'm going to goe and take P out of this because I don't want to Target my P's anymore and so now we want to add just a little bit of padding to it see how this is like completely cramped we want that paragraph to have a little bit more padding so that's called padding and here you get to Define let's say five pixels so now you noticed it put five pixel padding on all sides let's make it a little bit more 10 pixel padding there we go and say you just want it to be on the top and the bottom what you can actually do is if you do one value it gets applied to all sides if you do two values then it goes top bottom left right so now if I say 10 pixels zero pixels top bottom have 10 Left Right have none well the right goes all the way because it's filling out the page that's something we can address later if you do four values then you're doing one for each side so I'm going it goes like this if I go one value then it does all if I do two then it's going top bottom left right if I do four then it kind of goes around clockwise just like a clock starts at the top top right bottom left so I can actually add four things here I can go 10 pixels 10 pixels Zer pixels on the bottom and Zer pixels on the left so now I have padding here padding here which you can't quite see because once my text gets over there you'd be able to see it and then I got some there for now we're just going to go with 10 pixels on all sides and call it a day so now any paragraph I add on any of my pages is going to get a a gray background white text and a nice little padding there here let's experiment just to find out yep there's some more page two content it's nice everything I get throughout my entire site every paragraph is going to have a lovely little look let's say my H2 ah I'm going to leave that right where it is so this is kind of basically how we're going to stop some things let's say we want just this one paragraph to have a different color to it what do we do then we want to give it what's considered a class yes I know we're not supposed to have upper and lower class and the classes are bad but in this case uh it's just what we're going to call it class uh secondary let's do that class secondary right now nothing changed but now I can add a rule targeting class of secondary and I'm going to add a DOT the dot means I'm looking for a class so anything I put in here will now override what I put in there I'm going to go background none and this color is going to be let's make this a little bit of a more gray out color let's see if that happens 555 there we go let's actually make it even more GR out 777 there we go so now we have any paragraph gets this and anything with a class secondary gets that and because we specified a Class A Class is now more specific if you'll notice even if I put secondary before usually what happens by the way with CSS rules is what comes after is going to overwrite it so if I had another P rule here and this background is red now this is overriding this because it happened after that's why it's called cascading style sheets it kind of Cascades it can get defined up here but you can overwrite it as you move on so what we've done though is you'll notice class does not get overridden because class is considered more specific it's an issue of specificity so now secondaries get no background and they get a color of 777 another way that you can Target things oh yes and a nice thing about classes is it can apply to multiple things it can apply to this I can also make this paragraph have a class secondary as well so now they both have secondary I can also make this Li right here have a class secondary and it gets gray out as well it applies to anything that you add the class to another way that you can make a very specific issue in targeting is by id id equals special the difference between ID and class is you can only have one ID per page so I can only have one thing that's called special on the page I cannot create two things with an ID of special you're breaking the rules so I can say secondary has that I'm going copy and paste here and now there's something with an ID of special and this background will be red because after all it's special and now there you go so each page can have one thing called special uh but they can have as many things called secondary as they want uh usually you know you'll want to class things more than you want to ID things ID is only something very specific and you know for sure there's only going to be one uh a common occurrence of that is ID equals navigation there's usually only one primary navigation on the page so in this case um I could make my UL have an ID of nav and that's the kind of thing that you'll usually use an ID for uh IDs are a little bit faster as far as if you have a Thousand Rules IDs are going to be a little bit faster uh for your web page to appear uh but classes are going to be a little bit slower uh you usually really are not going to notice though unless you get tons and tons and tons and tons and tons of CSS classes so here's kind of how we basically style out a web page and in our next video we're going to cover uh some more advanced CSS rules