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 treated basic HTML how to put together HTML page we learned how to do labels: openingand closing tags we learned kinda what some otherspopular tag lists 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 tags this should look decently familiar toyou if not go back to the last video and get comfy I promise it won’ttake very long there’s only a few tags you have to learn and itreally feels curious at first if you’re not used to writing anything that feels likecode but I promise it comes very quickly youwon’t be confused for long so I’ve done years I’ve made a modifiedmy precedent from the last video and now have my html with a header and a figure and in that body I haveheader one which has my website I’ve got an unordered inventory with a linkto three different sheets and I’ve got I also a little bit of content you notice this tag up here.I left this outin the last example cuz it didn’t really apply to learning basic HTML labels but we’re gonna compute 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 place it mostly tells your browser aworking with an html5 page what I did then as I appointed a new page called sheet 2 speck html and I saved itin the same folder that I developed another page announced page3 dot html and it’s also in the same folder you can see here I didn’t include a full http :// WWW dot my website speck com all I did is put ait’s called a relative connection if you don’t give that full thing itlooks from the very beginning of 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 fleck 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 firstly/ li if it’s on the page that you’re on nowthere’s not going to be an tag Because if we’re on home we don’t have to go toHome were already there so as you can see on residence this is not a link page two and three are joined and I cango to page to you and it lades sheet to you and now home and page 3 our tie 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 labours like this: you have aselector which is where we take over 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 property that you wannachange in the appraise wanna demonstrate it and then you’ve got a colon and an there’s a semi-colon this’ll probably be the weirdest fraction about CSS is gettingcomfortable going selector open some brackets go back go up property collin value semi-colon probably inspects 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 just conveys a background of gray saywhat will make it black well make it speak 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 wording to your sheet you can start by just goingstyle and computed form label and will make sure we at this attribute: type equals text trounce CSS because we’redoing CSS style and now I can go now 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 put 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 do now a attach and this href isgoing to be I’m going to link two wordings main dotCSS and I need to do rel= stylesheet and mostly what that tells it is I’mgiving you a link to a mode expanse and we can also addtype equals text trounce CSS most brand-new browsers don’tneed that some old-fashioned browsers are going to so nowwe’ve done is we’ve got at this tie-in and now all I have to do is add this link to each page and each page is now going to get all the vogues thatI put in main.CSS so you see as I navigate every pagebackground is shocking red I’m going to change that to a slightlymore pleasant colouring 999 which is kind of a grayish color it’s now we can add some more styleslet’s say we want to manufacture our headers a better typeface actually let’s draw thewhole mas a different typeface fonts category Ariel that’s a little bit cleanerlooking now the typeface genealogy is Arial now CSS iswhere you get into a respectable bit more memorization there’sonly about 10 or 15 HTML labels you use there’s a lottaCSS dimensions that you can adjust because as you can imagine every ounce of mode but the whole pagehas is coming from the CSS properties so it’s just gonna take you a littlewhile you wanna start off with some thingsthat are more cozy and design your channel up there’s not it’s not an endless blackbox there’s an cease to it it probably will only make you a fewweeks and all of the abrupt you recognize wow there are no more CSS dimensions that Idon’t know it’s just a long few weeks have learningso unquestionably 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 capacities necessary to not is everything thatyou just wanted to do but we’re gonna show you a little bitmore about selectors now real quick so here’s how you..I’ve shown you how to grabthings by tagname that’s what we did here we just createda tag name: organization usually you don’t do that to too often you’ll do it for person you’ll do for h1so I’ll start h1 I’ m gonna go color and this will be likea 333 color and now you’ll notice my h1 went exactly alittle bit lighter let’s modification 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 pitch-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 combat 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 jab this and now I’ve styledeverything with a colour 555 I don’t eighties to dothat though so perhaps I’ll meet my A’s a different complexion later on let’smake my A’s a little different colour blue ago behave green everything’s green neighborhood everything’s blue I want to changeit up a little bit so now we have every page is inheritingthe styles so it’s starting to look just a littlebit better up so let’s go ahead and add maybe a couple more styles now let’s give sections a background complexion let’s manufacture our sections dye whites yeah that run delightful I’m going to go and make PL this cuz Idon’t wanna target my P’s anymore and now we want to add really a little bitof padding to it see how this is like altogether cramped we want that paragraph to have a littlebit more padding so that’s see patty and now you get to define unsafe Ipixels so now you notice to place five picks 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 quality gets applied to all backs if UT two costs then it goes top bottom left-right Sun ap I say 10 pixels erapixels transcend 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 last-minute ifyou do four values then you’re doing one for the two sides soI’m going it disappears like this: if I go one appreciate and it does all ID to you it’s going top bottom left right if I do four that kinda croaks aroundclockwise just like a clock starts at the top top shining sole left so I are truly add four thingsyounger 10 pixels 10 pixels 0 pixels on the bottom and 0pixels on the left so now I have slapping time had herewhich can’t relatively construe because formerly my text gets 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 day so now any paragraph Iadd on nemi pages is going to get a book ourgray background white text and a nice little paddingtheir hey let’s experimentation exactly to be informed about at there some more page to content it’snice everything I get throughout my entiresite every clause is gonna have a lovely little glance 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 merely this one paragraph have a different pigment 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 courses 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 varied but now I can add a rule targeting classsecondary and I’m gonna include a scatter the dot meansI’m looking for class so I thing I throw in here on our override what I put in there I’m gonna go background: nothing and this complexions gonna be let’s make this a little bit have a moregreyed out hue 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 settled secondarybe four often what happens by the way with CSSrules is what comes after is gonna override so if I was any other p we’re all now andthis background is red now this is overriding this because ithappened after that’s why it’s called cascadingstyle sheets kinda cascades it can get defined appear but you are eligible to overrule 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 question up specificity so now secondaries get no background andthey get a color 777 another way that you can targetthings oh yes and a neat 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 page soI can only have one thing that’s called special on the sheet Icannot create two things with an idea special you’rebreaking the 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 page 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 existence that is ID equalsnavigation there’s usually exclusively one primarynavigation on the sheet so in this case I I kid acquire 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 truly are not going to noticethough unless you get tons and tons and tons and tons and tons CSS courses so times kinda how webasically style at a web page in our next videowe’re going to cover some more advanced CSS settles

digital marketing

As found on YouTube

Share this article

Leave a comment

Related Posts