CSS Tutorial – Web Development Tutorial for Beginners (#5)

okay so on our last seminar we start with an introduction to bootstrap Twitter bootstrap I would highly inspire you to use bootstrap from now on start getting cozy with it because you will write very few CSS rules and you’ll be able to create very great stable stuff websites all over the world big proportion websites are using Twitter bootstrap and check the link if you did not catch that tutorial one thing you’ll notice is this is not working more that is because I inadvertently forgot jQuery you’ll notice I grabbed on bootstraps website I grabbed these three things to CSS and one JavaScript but what I forgot is that bootstrap exploits jQuery so if you scroll down to basic template you’ll see that they include jQuery now so I’m going to print that and articulated the jQuery script in my thing as well now you notice everything is working beautifully my drop-down duties so that’s what it looks a lot like on a portable and if you expand it out here’s what it looks like on a regular website looks very nice and there we go so now I’m going to go ahead and move forward a little bit more CSS stuff so back to basic CSS maybe for one more lesson and then we’ll move on and be done say we wanted to create one of these ourselves because one even when you’re using bootstrap everyone smile you’ve got to stimulate something habit and it’s really good to know some CSS moving forward so let’s say I just wanted to recreate one of these kind of widgets here let’s say instead of calling it panel I’m going to call it my panel let’s go div let’s go header and we’ll call it class body we’ll add a single section in here so right now fully unstyled seemed to be regular let’s go and open my main CSS I’ve already originated three rulers here my committee and heading so let’s go ahead and give my panel a perimeter you can see I did a little bit of my homework beforehand 3% so that course it’s always going to be within 3% of either rim and let’s give the heading a emblazon this is some of this is going to be a little bit repeat for you so grant it we’ll utter it black for now just so we can see where we’re sitting make I call it header yep announced it header honcho and one thing you’ll notice is is I did my committee room honcho one thing that parties do accidentally all the time is they’ll do my panel fleck foreman and what that is going to look for is something that has the class my committee and the class honcho this is the same as that because it’s looking for something with both grades so you’ll notice right now this selector is not selecting anything if I did my board and lent it a class of foreman now I’ve added two categorizes you’ll notice it starts picking up on the part body now just in case you run into that and wonder what’s going on and why your codes not working you probably forgot a space there any time you lent a seat it goes to the next rank and is looking for a child of this guy so obviously don’t want black so let’s look into kind of doing the coloring picker to pick a complexion we want I’m just going to go to Google and I’m going to type in online color picker there you go there we go online color picker let’s picking a complexion let’s say a nice greenish sure that works I’m going to replica that and you’ll notice it gave me the pound hex evaluate so I’m going to do that glue it in hey we have kind of a ordinary seem colouring there that’s kind of where you’re going to do a lot of your emblazon picking from if you don’t expend Photoshop let’s go ahead you’ll notice this is snug up against the leading edge so I’m going to add some padding to this I’m noticing my stuffing here is a little bit little on the top and fanny and more on the left so I’m going to try perhap 10 pixels top fanny 20 pixels left right yep looks pretty good and then I’m noticing there’s actually kind of a darker colour for the textbook so I’m going to go back to my colouring picker I’m going to try to darken this guy up a little and see if that could be a good text emblazon for me yeah lookings kind of good a little bit lighter but no worries I’m too going to make the border that same color one pixel solid when you’re defining territories you go with your diameter firstly then your style and then your complexion I “il be going” I repute I can go now flecked pretty much solid is what you’re going to use all the time you know there’s dotted I reflect I can go now scooted there’s a knot of them out there you’ll need to search for them yeah scooted typically you’re just going to use solid one pixel solid there you go that’s looking nice and then I’m too going to add a border radius which is a different rule and that’s going to be the curving recess let’s try ten pixels that’s a little too much go five pixels border radius exertions like everything else I can give it five pixels five pixels zero zero and now give me five pixels transcend foot zero on the left in the privilege if I simply kind of want that one corner I can go now zero pixels you’ll notice it’ll op off this chap so I really various kinds of have that one corner right there and I’ll just go five pixels for all of them one thing you’ll notice a lot of duration too is you’ll notice – WebKit border radius and what it is is older browsers be applicable to not officially reinforce this strip radius label because it’s pretty brand-new so these this is called a vendor prefix this is any browser using WebKit which would be Chrome or Safari or pretty much any mobile phone older phones we’ll need to add that Mozilla Firefox uses the Mo’s five pixels and so lots of epoches if you want to make it fully compliant with older browsers you’ll do these things you’ll do these three you’ll travel border-radius WebKit border-radius Moe’s border-radius and then if you happen to be boasting older opu Oh border-radius it’s kind of annoying we’re pretty much on the brink of being out of these things but it’s still not a bad idea to add in the merchant prefixes for now I’ll time to be maintained out just for cleanness you also notice I’m trying to kind of keep it in alphabetical require here it’s not a rule that you have to do that but it’s a good idea holds things clean one thing I’m noticing is I is not require a border radius on the bottom of my header so I’m going to go five pics zero actually I conclude I might need to go yep that is not going to do I are willing to do five pixels five pixels zero zero so that practice it’s on the top and the bottom and I demand this borderline to actually apply what want this borderline to apply to the entire panel which is what’s going on up here there “theres going” that’s looking a little better and I crave this perimeter radius you notice my this as a border radius but I require the panel to have a border radius as well there we go looking better now this has the border radius you see if I take this off then it’s square and then the border below it is square and you’ll get a couple weird little pixels there so I’m keeping the border radius on both of them let’s move on to the body if I can type my board figure let’s give it up including let’s try the same 10 pixels 20 pixels there you go looking good and I actually demand this to have a five pixel border radius everywhere there “theres going” we mostly recreated this panel let’s look into a marry other things you know what I’m noticing is it looks like there might be an ever so insignificant dark on these bodies so I’m going to go ahead and add this it’s called box darknes and container pall has four values it has your counterbalance your X offset Y offset your blur and then your colouring it’s kind of how “whos working” is let’s start with a 10 pixel 10 pixel 0 pixel blur and really black to make it clear what’s going on you’ll notice it’s 10 pixels this way 10 pixels down and it’s not blurred at all and it’s black so if I make this blur 10 pixels you notice it starts get blurry now and so if these guys it looks like they don’t have any offset at all just various kinds of like really a all-inclusive shadow this is probably a lot smaller like 4 pixels and this is not black it’s a very light color maybe like a 999 yeah you can scarcely see it now looks like that might be maybe even lighter si si si is a lighter color I “ve got a few” of these hues memorized there you go so it’s got that ever so slight gray shadow that these other ones seem to have so that’s kind of how we’re going to do a container shadow on this entire panel let’s say we wanted to give this I’m going to copy and adhesive this a few occasions let’s say we wanted to create three of these and whenever we flitted over one we wanted a delete button to appear what I’m going to do here is I’m going to add a div and this class will be show on hover and then in here I’m going to add a bootstrap button this button danger is a red one delete there we go so that’s there it’ll always be there for now let me go and add that to my other two yeah it’s actually a little large-scale I want to be button XS button extra small there you go let’s go ahead and add this to each one of these so now that each have a delete button and I’m going to go I’ll make it show whenever you hover over my body so here’s how I’m going to do that my panel show on flit is going to be display none so they are not going to appear at all and then what I’m going to do is my panel hover so now these rules will only apply whenever you’re wavering over my committee my panel showing hover display back to inline block which is what it was before so now whenever I levitate over a board that appears nice so now it feels like your page is doing some really smart stuff certainly all we’re doing is we’re secrete it and we’re showing it whenever you hover over this panel at all that kind of nifty you know what else I could do is I “il be going” my panel levitate I could make this box dark get a little bigger when you hover over it it’s kind of just some ideas of things that you can do maybe I’ll make it like eight pixels and I will make it a more apparent shadow there you go now whenever you hover over it see that shadow is just a little bit more precisely to show you what I represent I’ll make it full color a little too much for schemes sake but whenever you hover over kind of pays it a little pop now I can even make the border a little bit larger maybe like a two pixel margin there you go now it really various kinds of has some pa whenever you hover over it see it jumps a little bit because the border is now made it a few cases pixels bigger now it’s got an extra pixel on top because that borders two pixels additional pixel on the bottom so you notice it various kinds of the chaps below it do this little prance down thing so ideally I’d probably adjust some boundaries there on this waver thing sella me check maybe that’d be 1% 3% see if I can a compensate for that oh you know what is that delete button proving up okay so that’s automatically going to be larger that’s supposed to be happening that’s what’s going on there we’ll leave it so that’s kind of a little bit more intermediate CSS before I wrap up this lesson I’ll get in to kind of a few more selectors and I’ll talk a little bit about specificity and cascading substance so let’s go and merely clear all this out save that clear all this out and I’m just you know I’ll precisely create a ended blank slate here before we wrap up this lesson on CSS I’m going to go ahead and create an h1 hello world so I’m going to in my stylesheet I’m going to go h1 color red now H ones are going to be red H ones should be red exactly sure what’s going on there Oh probably cuz bootstrap has an h1 let’s make it a class h1 bootstrap has a whole bunch of rules in it and so that’s where all my pigments are coming from from bootstrap once oh no what’s going on here let’s just make it a paragraph one of the things you run into sometimes with using something like bootstrap is it’s doing a whole knot of material and you don’t precisely know what it’s make and so sometimes you can get frustrated was just trying to do things so unquestionably there’s some downsides let me make it really large 400% okay there we go kind of ran into an issue that I’m actually going to demonstrate now so now clauses have a color of red anything that comes after will overwrite if it’s the same level of specificity so if it’s as specific so I’m going to know colouring blue-blooded now you’ll notice even though I’ve defined a hue red peas will have color blue because it came after the fact now if I exited P class primary and this had a class of primary now it became right again because this is a more specific rule than this this just applies to paragraphs this applies to clauses with a class of primary now if I started P ID of main lettuce so now if I have an ID on here ID just got even more specific and now it’s green so you’ll see that that’s kind of even though they came before IDs are more specific than years and years are more specific than really elements and so that’s kind of how “whos working” you’ll notice even though they are I take away the P an ID is more specific than both of these however if I lead primary fit by ID are matching by label refer and by class mention is considered more specific than matching by class word so this sets it to green this overrides it to red and then this doesn’t do anything this determines it all paragraph tags are now would be blue for any really standard clause calls so that’s kind of how specificity designs is if I are set to too lead primary other if this said P flecked primary is red I’ll do it like this P scatter primary is red P scattered primary dot other is green now so if I make it class primary and other well now that’s considered even more specific it pairs on three levels it parallels on a label statu on a class statu and on a secondary class level or an additional class level so this is now the most specific rule that applies to my section call now so it will be lettuce so that’s kind of how that travels if you’re including it all in a wording expanse now let’s look into doing something else let me copy main CSS and let me save this as other CSS and I’m going to include other CSS after primary CSS here other main.css other CSS so now we have two things we’re including in let’s manufacture central CSS simply have P’s be a color of off-color let’s have other CSS VPS with a color of red now my paragraph is red kind of what happens is is it runs central onus up all the main rules and then consignments up all the other rules and it’s no different than if they were stacked on top of each other so central color blue-blooded then it loads in other emblazon red that’s no different than if you did this blue red what we’ve done is we’ve separate them up into separate wording membranes which sometimes procreates ability if you start getting a really big style sheet makes a lot of sense to split them up into gatherings so it’s a lot easier to find out where your file where your rules go let’s move on and so now let’s computed a wording here this is a page level style sheet I’m just adding a form label straight-out in now I’m going to go P emblazon dark-green now paragraphs have a color of green you’ll notice if I kept this be for my connection the paragraphs now have a color of red because this happens before ladens up these Styles then it goes to now then it goes to now so they get overwritten by what’s here on the sheet page page grade stylesheet not really that great of an idea I wouldn’t recommend doing it because then you have to copy and paste regulations everybody another third mode you can do it is you can actually add inline wording here on any label can I do pink I judge I can do pink I don’t know let’s try violet I don’t think I can style pigment. 3 oh I didn’t spell it right style colour green there you go now it’s green this will ever override anything that has been passed up and above in here so element tier wording is considered more specific than something coming from a form sheet this is a really bad idea unless you’re doing it dynamically with JavaScript on the fly as they’re doing things the only way to really change an element real-time with JavaScript is by adding things to the elements itself but in general it’s a really bad hypothesi to add styling straight to a tag anyway that probably concludes for this lesson about all you need to know I’d say go out there have fun Google stuff if you want to know how to see something say examination italics I’m not going to tell you because one thing you have to learn as a web make is to get really good at googling precisely sort CSS italics and you’ll find it form CSS underline you’ll find it type CSS pretty much anything and you’ll find it online but this is enough to get you going hope it helps and have an excellent day

cellular telephone

As found on YouTube

Share this article

Leave a comment