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

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

how to do web development in the previous tutorial we covered basic HTML of how to put together an HTML page we learned how to do tags opening and closing tags 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 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 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 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 html5 so all you need to know is that it needs to be there at this point it basically tells your browser hey we're working with an html5 page what I did then is I created a new page called page – dot HTML and I saved it in the same folder then I created another page called page 3 dot HTML it's also in the same folder and you can see here I didn't include a full HTTP colon slash slash www 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 you know there can be some configuration changed to make it different but by default a website is going to look for index dot 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 linked page two and three are linked and I can go to page two and it loads up page two and now home and page three are linked 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 webpage I've saved a file called main CSS and a CSS style sheet is how we do styling and basically works like this is you have a selector which is where we pick something we're going to add style to and then you have a rule the selector basically as 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 selector open some brackets go back go property colon value semicolon probably looks weird feels like it's a lot to memorize it's gonna 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 nine nine nine 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 had this attribute type equals text / CSS because we're doing CSS style and now I can go body background oh not bottom read 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 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 href is going to be I'm going to link to styles main dot 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 slash 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 dot CSS so now you see as I navigate every page background is hideous red I'm going to change that to a slightly more pleasant color 999 which is kind of a grayish color that's now we can add some more styles let's say we want to make our headers a better font actually let's make the whole body at different fonts font family Arial there we go that's a little bit cleaner looking now the font family is Arial 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 gonna 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 I'll sing 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 gonna feel like you're just completely drowning in the ability to not do anything that you want it to do we're going to show you a little bit more about selectors here real quick so here's a 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 so I'll go h1 I'm gonna go color and this will be like a 3 3 3 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 0 0 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 gonna make that 5 5 5 but I also want this to apply to any h2s so I'm going to do H 1 comma h2 and now you'll notice my h2 also has a gray color I could also make this P I want any of my paragraphs to have this I can make this any Li so I want my eyes to have this I could make this any A's I want my age to have this and now I've styled everything with the color of 5 5 5 I don't want my A's to do that though so maybe I'll make my eyes a different color later on let's make my eyes a little different color blue there you go ha 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 so let's go ahead and add maybe a couple more styles here let's give paragraphs a background color let's make our paragraphs color white yeah that's feeling nice I'm going to go ahead 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 notice to 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 which 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 and 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 and go 10 pixels 10 pixels zero pixels on the bottom and zero 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 gonna 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 gray background white text and a nice little padding there here let's experiment just to find out yep there's some more page to contents it's nice everything I get throughout my entire site every paragraph is gonna have a lovely little look let's say my h2 I'm gonna leave that right where it is so this is kind of basically how we're gonna style 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 it's just what we're gonna call it class 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 gonna go background:none and this color is gonna be let's make this a little bit of a more greyed out color let's see if that happens five five five there we go let's actually make it even more grayed out some some sudden 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 override it so if I add 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 stylesheets it kind of cascades it can get defined up here but you can override 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 I have a class secondary and it gets grayed 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 copy pasted 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 but they can have as many things called secondary as they want 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 a common occurrence of that is ID equals navigation there's usually only one primary navigation on the page so in this case I could make my UL have an idea of nav and that's the kind of thing that you usually use an ID for IDs are a little bit faster as far as if you have a thousand rules IDs are gonna be a little bit faster for your webpage to appear but classes are going to be a little bit slower you usually really are not going to notice though unless you get 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 some more advanced CSS rules

22 thoughts on “Web Development Tutorial for Beginners (#2) – Basic CSS – How to build a website with HTML & CSS”

  1. For some reason I can't just type red in CSS or any color like "black' or "yellow" for that matter without a specific number code like #999. Nothing will appear unless I use a number code. Maybe it's a windows 10 thing I don't know anyone know the real reason why it's like that?

  2. I have a question for when link the pages together.

    Like for example on mine page2 to Home they are linked.
    But I do Home to page2 it shows me an error. What did I do wrong there any idea why.

  3. Does anyone have any help in the first step where he links pages 2 and 3, not sure how he does it and saves it in the same folder.

  4. help! I created a css folder and i have linked to my index.html sheet but it's obeying the command. I have triple checked the <link href="…… and it doesn't seem to work. however, it works the other way, the way you show us first. what am I am doing wrong? now I see that the document has it's on icon on my desktop but it opens on notepad. help! help! I think I'm not saving the css folder correctly thus not linking to my html.

  5. I'm having trouble linking my pages together. With <a href="page2.html">Page 2</a>
    When I click the link it opens up a new blanck tab with none of my code even though I copied the same code.
    If someone could help me with this that would be great

  6. Bro. Your stuff is helping me so much! I've always been intimidated my development but you make it easy.

  7. Absolutely worth every second of every video. CSS is my only option to completing the most important part of my ongoing workflow application. Reviewing just the script and figuring out the logic, is tiring. These videos have proved to me that only quality videos will help. It's been my 2nd week in the hunt for anything useful and it's these videos that have now made everything so simple. Can't thank you enough. I'll be sharing this with everyone

  8. Just so you know I am using Notepad ++ and for me to get the CSS file working I hat to put it this way for some reason
    <link rel="stylesheet" type="text/css" href="main.css">

  9. Thank you very much. You are the best. In the past two years I used to avoid you insearch for quick tutorials and never got anywhere solid…. It was frustrating..and end up giving up .

  10. Soooooooo, i used text-align: right; in a class type called redirect (which pretty much redirects .—-.) . However, the text (yes with the link etc.) is centered without adding a <center> tag. Any help would be nice :).

  11. iv used many codes such as <link href="main.css" rel="stylesheet" type="text/css" /> . but its still not working, the .css and the .html files are all in the same folder. i need some help plz

Leave a Reply

Your email address will not be published. Required fields are marked *