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

out to do network development in theprevious tutorial we comprised basic HTML how to put together HTML page we learned how to do tags: openingand closing tags we learned kinda what some otherspopular tag reputation are lastly there’s only ten or fifteen youactually need to know anyway so hopefully by now you’ve taken thatcourse and you’re pleasant I was kinda writing out basic HTML calls this should look decently familiar toyou if not go back to the last video and get comfortable I promise it won’ttake very long there’s only a few calls you have to learn and itreally feels creepy at first if you’re not used to writing anything that feels likecode but I predict it comes very quickly youwon’t be confused for long so I’ve done years I’ve made a modifiedmy example from the last video and now have my html with a header and a torso and in that body I haveheader one which has my website I’ve got an unordered index with a linkto three different pages and I’ve got I too a little bit of content you notice this label up here.I left this outin the last example cuz it didn’t really apply to learning basic HTML tags but we’re gonna lend this at the topevery HTML page and this just declares that the documenttype: is HTML and putting like this actually meanshtml5 so it all you need to know is that it needsto be there at this spot it mostly tells your browser aworking with an html5 page what I did then as I made a new page called page 2 fleck html and I saved itin the same folder that I caused another page announced page3 speck html and it’s also in the same folder you can see here I didn’t include a full http :// WWW dot my website dot com all I did is introduced ait’s called a relative relation if you don’t put that full thing itlooks starting in the same folder that you’re in now and the reason we announced our first pageindex is because index is what its automatically going tolook like look at when you laden a web site if you go to Google scatter com a you know there can be someconfiguration changed to make it different but by default awebsite is going to look for index dot HTML so one thing I changedhere is the first/ li if it’s on the page that you’re on nowthere’s not going to be an tag Because if we’re on dwelling we don’t have to go toHome were already there so as “youre seeing” on dwelling this is not a tie-in sheet two and three are attached and I cango to page to you and it loads sheet to you and now home and sheet 3 our association because home isgoing index and three is going to page threeso I can now navigate between all three sheets of my website..see it’s nottoo bad I basically have a website it’s up andrunning it’s just ugly because there’s no vogue so let’sget into how to add style to your webpage I’ve saved a folder announced central scatter CSS and a CSS stylesheet is how we dostyling And it basically manipulates like this: you have aselector which is where we take up somethingwe’re going to add style to and then you have a rule the selectorbasically as brackets anything within those brackets getsapplied to the selector so the rule you have the owned that you wannachange in the evaluate wanna grant it and then you’ve got a colon and an there’s a semi-colon this’ll probably be the weirdest place about CSS is gettingcomfortable going selector open some brackets go back go up property collin value semi-colon probably looks weirdfeels like it’s a lot to memorize its gonna come really fast type yourselector open some brackets take a property picka value for you’re done so in this case we pickedbody so anything within the body is now going toget a background of 999 and we’ll get into this a little bitlater but for now that merely makes a background of gray saywhat will make it black well make it predict for now that’s alittle easier to understand so the body now gets a background threadknows when I freshen nothing happens because this style sheetis not attached at all to my page so there’s two waysyou can get vogue to your page you can start by just goingstyle and lent form call and will make sure we at this attribute: category equals text slash CSS because we’redoing CSS style and now I can go form background Nope , not bottom red it save hey check it out there yougo so you’re thinking why would I not clearly do it this waythis is much easier but what if we want to typein a 150 different rules and we want to be shared between all ourpages on now either have to copy paste or you articulated them in a separate file whichis what we’re gonna do here we put background red in here and now wecan link to it going to see do a tie and this href isgoing to be I’m going to link two vogues primary dotCSS and I need to do rel= stylesheet and basically what that tells it is I’mgiving you a link to a wording membrane and we can also addtype equals text slash CSS most brand-new browsers don’tneed that some aged browsers are going to so nowwe’ve done is we’ve got at this connect and now all I have to do is add this link to each page and each sheet is now going to get all the wordings thatI put in main.CSS so you see as I steer every pagebackground is grim red I’m going to change that to a slightlymore pleasant dye 999 which is kind of a grayish emblazon it’s now we can add some more styleslet’s say we want to stir our headers a better typeface actually let’s make thewhole person a different font fonts house Ariel that’s a little bit cleanerlooking now the typeface clas is Arial now CSS iswhere you get into a nice bit more memorization there’sonly about 10 or 15 HTML tags you use there’s a lottaCSS belongings that you can adjust because as you can imagine every ounce of vogue but the whole pagehas is coming from the CSS owneds so it’s just gonna take you a littlewhile you wanna start off with some thingsthat are more comfortable and task your room up there’s not it’s not an endless blackbox there’s an extremity to it it was likely will only take you a fewweeks and all of the sudden you recognize wow there are no more CSS belongings that Idon’t know it’s just a long few weeks have learningso definitely give yourselves a little bit I’m have composure and it will come veryquickly but firstly your gonna feel like you’re just entirely drowning in the ability to not do anything thatyou just wanted to do but we’re gonna show you a little bitmore about selectors here real quick so here’s how you..I’ve shown you how to grabthings by tagname that’s what we did now we just createda tag name: torso usually you don’t do that to too often you’ll do it for figure you’ll do for h1so I’ll depart h1 I’ m gonna go color and this will be likea 333 complexion and now you’ll notice my h1 went exactly alittle bit lighter let’s alteration a little more 2666 all the “mark of the beast” jokes are coming up basically if you go all the way to 000 you’re a black go all the way up to you 999 you’re at agray and anything in between is kinda welland between something like that 555 but too a fist crusade to any each to usesome going to do h1 common H to you and now you’ll notice myh2 also has a gray color I can also make this PL on any myparagraphs have a psych make this any allies on May ally status I could makethis any A’s on a thrust this and now I’ve styledeverything with a colouring 555 I don’t eighties to dothat though so maybe I’ll constitute my A’s a different dye later on let’smake my A’s a little different colouring blue ago accomplishment green everything’s green region everything’s blue I want to changeit up a little bit so now we have every page is inheritingthe forms so it’s starting to look just a littlebit better up so let’s go ahead and add maybe a couple more wordings now let’s give paragraphs a background emblazon let’s clear our paragraphs pigment white-hots yeah that pour neat I’m going to go and take PL this cuz Idon’t wanna target my P’s anymore and now we want to add just a little bitof padding to it see how this is like entirely cramped we want that paragraph to have a littlebit more padding so that’s label patty and now you get to define unsafe Ipixels so now you notice to make five selects apadding on all sides make it a little bit more 10 pics slapping their ego and say justwant to be on the top and the bottom which you can actually do is if you doone importance gets applied to all features if UT two ethics then it goes top bottom left-right Sun ap I say 10 pixels erapixels top foot half 10 left-right have not well the liberty goes all the way cuz it’sfilling up sheet that’s something we can address later ifyou do four values then you’re doing one for the two sides soI’m going it departs like this: if I go one ethic and it does all ID to you it’s going top bottom left right if I do four that kinda get aroundclockwise just like a clock starts at the top top light freighter left so I can actually add four thingsyounger 10 pixels 10 pixels 0 pixels on the bottom and 0pixels on the left so now I have patting year had herewhich can’t relatively picture because formerly my verse does over thereyou’d be able to see it and I got some there for now was gonnago 10 pixels on all sides and call it a period so now any paragraph Iadd on nemi sheets is going to get a book ourgray background white text and a neat little paddingtheir hey let’s experiment only to be informed about at there some more sheet to content it’snice everything I get throughout my entiresite every paragraph is gonna have a lovely little inspect but say my HQ I’m gonna leave that rightwhere it is so this is kinda mostly how we’regonna wording some things let’s say we want simply this one paragraph have a different emblazon to it what do wedo that we want to give it what’s considered a class yes I know we’re not supposed to haveupper lower class and the class are bad but in this case that’s just what we’re gonna call itclass I secondary let’s do that class secondary right nownothing modified but now I can add a general rule targeting classsecondary and I’m gonna include a speck the dot meansI’m looking for class so I thing I throw in now on our invalidate what I put in there I’m gonna go background: nothing and this colorings gonna be let’s make this a little bit have a moregreyed out color let’s see if that happens 555 there yougo it’s actually make it even more great out some subs on barrio so now I have any paragraph comes this and anythingwith the class secondary it’s that because we specifieda class a class is now more specific if you’ll notice even if I gave secondarybe four generally what happens by the way with CSSrules is what comes after is gonna override so if I had another p we’re all here andthis background is red now this is overriding this because ithappened after that’s why it’s called cascadingstyle expanses kinda cascades it can get defined appear but you can override it as you move on so what we’ve done now as you noticeclass does not get overridden because class isconsidered more specific its and topic up specificity so now secondaries get no background andthey get a color 777 another way that you can targetthings oh yes and a nice thing about classescan apply to multiple things they can apply to you this I can alsomake this paragraph have a class secondary aswell so now they both have secondary I canalso make this/ li right here at a class secondary and tickets great out as well it appliesto anything that you at the Class two another way that youcan make a very specific issue in targeting is by ID ID equal special the difference betweenID in class as you can only have one ID per sheet soI can only have one thing that’s called special on the page Icannot create two things with an idea special you’rebreaking the standard rules so I can say secondary has that’s copypaste here and now there’s something with an ideaspecial and this background will be read because after all its special and now there you go so each sheet canhave one thing announced special but they can have as many things calledsecondary as they want usually you know you wanna class thingsmore than you just wanted to I D things ID is only is something very specific and you know for sure there’s only goingto be one a common happen that is ID equalsnavigation there’s usually exclusively one primarynavigation on the page so in this case I I kid constitute my you l have an idea nap andthat’s the kind of thing that you’re typically use an ID for I ID’s are a little bitfaster as far as if you have a thousand rulesID’s are going to be a little bit faster after your web page to appear otherclasses are going to be a little bit slower frequently really are not going to see noticethough unless you get tons and tons and tons and tons and tons CSS grades so times kinda how webasically style at a web page in our next videowe’re going to cover some more advanced CSS principles

digital marketing

As found on YouTube

Share this article

Leave a comment

Related Posts