CSS Tutorial For Beginners | CSS Crash Course In One Hour | Web Development Tutorial | Edureka

[Music] hi guys my name is Aria and I welcome you all to the CSS tutorial in this tutorial we'll be covering from the basics of CSS to some advanced CSS which includes animation okay so before we actually start with coding our own bit of CSS let's go through some of the basics so what exactly is CSS well CSS stands for cascading style sheets and is generally used to control how HTML tags and elements are displayed on your screen so this means basic styling of your web page is controlled by CSS now CSS was actually made to solve problems that were introduced in HTML 3.2 now HTML 3.2 got in some new attributes like font color and background color which generally was put into styling of a element on a web page now while this did add some very very needed functionality into HTML 3.2 it cluttered up your code as a developer and media life pretty miserable so to keep the structure of your web page which is the HTML and to make the styling a different aspect CSS was made by w3c so w3c stands for the World Wide Web Consortium and CSS till date is still being maintained by the w3c developers okay so that was a general introduction to CSS now let's move ahead so this is the basic syntax of CSS you basically have selectors which selects or targets the place that you want to attach your styling to then you have basic properties and value pets now you can include your CSS into your HTML with a link tag while putting the href attribute as the file name or you can do some inline CSS but that's not actually recommended because that's the problem that we are actually trying to mitigate by putting CSS as a different file also if you don't want to create another CSS file you can do some internal CSS by putting in some style tags in your head tag and just writing some normal CSS to it okay so now let's see the different type of CSS selectors so these are all the different type of CSS selectors and basically a selector is a way of targeting an element on a web page so the star selector selects all the elements and applies the CSS that you would apply to it then if you would say div then it would apply your CSS to all the divs now div comma P will apply to all the divs and paragraphs div space P will put your styling to all the paragraphs inside those now going through all the CSS selectors is a pretty cumbersome job so I recommend that you go through this page on w3 schools which has all the different types of selectors and the different types of pseudo selectors all listed out so this will very much help you when you're doing your own CSS so always keep this page open now just for basic sake let me just tell you about pseudo selectors so we also have pseudo selectors which is defined something like this so pseudo selectors include stuff like ho-ho active visited and stuff like that now suppose you were hovering over an 8 on so you can say there is supposed to be some specific styling when you are hovering over it so how would you do that you would just say a colon hover and then you would actually specify the styling that you want now you can also find all these types of pseudo selectors out here and it's all listed out here so a visited like select all visited links something like that now I also want to make ya'll aware of the box model that is very much used in CSS now in box model has four things the content padding border and margin so content is a basic content off the web page that you want to show to you your general audience then the padding is the space between your bottle and the content itself the border is line that can be of any size color and width and then there's a margin which is this distance from the edge of the screen to the bottom okay and now the box model looks something like this so the content comes in between then comes the padding which is between the border and the content and then there's the margin which is between the screen and the border itself the screen edge and the bottom right so that's how the box model works now the last bit of basics is the CSS units so there are four kinds of units firstly we have the pixel so pixel is represent any pixel on a device so you could say something like font size is equals to 20 by fixes so it'll make it actually 25 pixels then there's also points which is mostly used in print media and all you need to remember to use points correctly that 72 points equals one inch now the last two types of units are relative units now these are relative to your current font size so 1 mm or 100% is actually equal to your current font size so if you want something to be double your font size all you have to say is 2e m so these are how relative units work in CSS okay so that was all the basics of CSS and how you select stuff and all the units now let's get ahead and code some of our own CSS so for this time I've actually created a bunch of HTML pages and we are going to style these HTML pages by adding some CSS into them and this will stand as good practice for CSS alone okay so for the first page we have this page called page 1 dot HTML and it's a pretty basic page let me just open it up and show it to you guys so this is what it looks like without any sort of CSS being attached to it now we are gonna create some CSS and we're gonna try and practice first of all selecting stuff in different ways possible okay so firstly let's do some very random CSS okay firstly let's star get all the divs in this HTML so how would you actually do that well you'd say div by going selectors and let's actually save this as a CSS file first so that our syntax is colored properly okay so that's a div so that's how you select any element in CSS now suppose we will say background color now rather just background it'll be purple and the text or the color of the text will be white so now everything inside a div will look like that so now let's just save this SP h1 as a save that speech 1 dot CSS let's reload our page and everything that is inside the div now has a white text and it also has a purple background okay now let's see how we actually select IDs so we select IDs with the hash so we have an ID called code out here if you go and see where is that and gone okay so this paragraph out here that you see has the ID called code so we're gonna select that and put in some of our own CSS so let's see now that we've selected our ID we can say suppose we want to change the font family so we could say font family is verdana and you could also put an alternate foreign families just in case we're Donna doesn't exist in your system like Gill sans fine so that's how you set up your phone family let's also set the color to be black let's see what changes now so this is the code that I was talking about so that font should change now let's reload oh yes now the font has become verdana and that's what we exactly wanted and the text is also black knife okay so how do we select classes now so if you go here and see we should have a class called movies right so all these have a class called movie all these a tags so let's select them first of all to select a class you say dot and then you say the class name now we could put in some random CSS into this again so let's make the color let's keep it white and let's make the background steel blue let's see so where are our movies let's see where the movies actually exist oh yeah dota splinter cell and God for these are the movies so these should now change let's save it and now they have a background color of steel blue and they have a text color of fight and that's exactly what we do find out here fine now let's try out some other kinds of selectors so suppose in the span out here we have this ID called Auto so what if we only want to target that what would we see so we could say expand and hashtag portal now you could put any type of CSS so let's say text transform so this is how you transform any sort of text and you can see uppercase the auto will be changed to uppercase out here and this is the auto the Pope Alexander part now watch that no it's just uppercase and we have selected it with this selector called fan and hashtag bottom we can also do some other kind of selecting let me just show it to you so we could select the Allies of the unordered list or the ordered list so our skills is the ID this is the idea of skills so let's select them now so we have skills and we could go the ordered list and then the Ally and what we want to say out here is color will be popular we can do the same thing for the unordered list too let me just copy that down put this here say unordered list and let's say we change the text color to white save that let's reload our page so wait first of all let me uncommon this now let's save it again reload our page and see the differences now since we had committed a purple color it's now all purple and let me just put a background of white so that you can see it yeah now these are purple and there's a background white we can do the same for the unordered list too let me just uncommon that let me also give it a background of purple or actually let it be like that let's just make it blue now SAS and Hamel have turned into blue as you see out here this is the blue thing fine now that was a selectors okay now let's go ahead and select some other stuff so what if we want to select all the paragraphs that are after the h3 tags so if you remember we can do that by saying x3 plus P and let's say we want a background of black and some text color that is white so color white not being very creative with my CSS at the spoon because this is just about selecting so let's see how that reloads yup now we have a color of white and a background of black and that only selected the paragraph just after the s3 which is my favorite video games okay we can also select every paragraph that has a class by just saying something like P and class we don't even need to specify the color or I mean the class name so you go background let's say we want to give a great background let's see all the paragraphs of the class so this is the only paragraph with the class now you can do the same thing for IDs just say ID out here and let's see all the paragraphs with an ID so this is the only paragraph at an ID okay so now that we're done with selecting stuff let's go and actually see how text can be transformed for the use of CSS fine first of all I already have a page created for that so this is going to be our page that we are gonna use to see how Texas transform if you see I have an ordered list with all the types of text transformations or the text stylings that I want to show and we also have a paragraph out here which will show the basics box al like the borders margins and padding's so I'm going to demonstrate that through this PID out here right so let's get started first of all let's create our CSS file and in the CSS file we're going to save it and we will call it page two dot CSS right then yeah it's connected as page two so let's get started so first of all let's target this ID with lorem so lorem ipsum is just some Latin paragraph that is normally used in web development to fill in spaces with text where you can always come back and delete that text and fill it with something more meaningful so for now we are going to be using this lorem ipsum thing so it's in a paragraph tag with an ID of florrum so let's go ahead and select it so we're gonna select it with the help of the ID call it lorem now first of all let me just show you what the page looks like without any CSS attached to it so this is what the page looks like right so this is the part that we are going to target right now first of all let's give it a background off-black let's make the color of the text white let me show you what that looks like okay right now let's give some bottles and padding its first of all to give a photo we could say we use the border back for a property then we give three parameters the type of the bottle the size of the bottle and then the color and you do it something like this 3px solid red now apart from solid there are a lot of types of bottles and those in blue dashed dot it rigged and many more these are the ones that are just from the top of my head so you can try out them out and you can find other types of CSS bottle just by going to google and saying CSS border types so these are all the types of bottles that you get and you can definitely check them out it's impossible to show everything in one video like that so let me just show you the solid type so let's save it and let's see what kind of body we actually get let's close this down yeah now we have this neat a little border of three pixels in size and resin column now let me just show you how tot it would look like so this is what it looks like and this is what dashed looks like fine and this is what - just okay now let's also give this thing some padding now padding exists between the content and the bottle so I just explained the box model when we were discussing the basics of CSS so I hope you remember that so for padding there are four parameters actually the right top left and bottom so you can define a Patek something like this you can go 13 pixels 13 pixels 13 pixels and 20 pixels now these are just very arbitrary numbers but what I'm gonna explain is that this first part will mean that the studying pixels of padding from the top and then we move via in a clockwise fashion so this is on the right this is in the bottom so 13 pixels of padding in the bottom and 20 pixels of padding on the left now you could also say this really easily if you want to give equal amounts of padding suppose this means that there will be 13 pixels of padding on the top and bottom and this second part would mean that there's 13 pixels of padding on the left-hand right and if you just put one digit that means there's 13 pixels of padding all around now let's go and put these different padding's around lorem ipsum now it looks much neater we can also put a margin so let's put a margin and the margin also works in the same way so suppose you would save 5 pixels that means it would give a 5 pixel margin all around your content if you were to put say 10 pixels and 20 pixels this means that 10 pixels are margin on the top and bottom and 20 pixels are margin on the left and dry and there's also another key word that I want to make you aware of and that is Auto so what Auto does is it gives equal amounts of margin however you specify it so out here it will give 10 pixels of margin on the top and bottom and equal amounts margin on the left and right so let's see how that works yep so that's how I changed it no that was all about the box modeling so let me just remove this part from the HTML and let's remove this part from the CSS now as you guys can see I have this ordered list out here first of all let me reload the page now I have this ordered list out here which shows us all the types of styles and weights and sizes that I'm going to be showing right now and this will include a lot of the units that we discussed like m's points pixels and percentages so let's move ahead so to select these I'll be using these IDs so let me just remember the first varieties it's normal italic oblique and small caps so let's go ahead and create them firstly let's select our normal ID and say what are we gonna try and show here is font style so all you have to say is font style is normal so normal basically means that the font style will be normal instead of something bold it then I think we had italic see the font style italic then we also had oblique so you go font-style oblique and we also had small cups so let me just see that again yep it's small cup so you go small cup and what are we trying to show in small cup is the font variant so font variant small cups let me just reload and see how that changed stuff okay so font-style:normal just stays normal while italic and oblique are almost similar then in font variant small cups this is how it would look like we're the first letter has a bigger font size and the rest have a smaller font size but everything is in capital and next is the font weight so let's see the IDS it's normal bold bolder so let's go with that now so firstly we have normal so font size is the size or weight its weight so font weight will be normal next part is bold polder lighter okay so we still like bolder like that we go font weight is bolder and we can say again let's force after bolder it's bold games so w pulled and you go font weight is bold let's see how that changes stuff so yeah bold is a bold and font-weight:bold er is slightly more bolder well font-weight:normal is absolutely normal right time for some more so the next is the font size which goes from extra large large medium small extra extra small so let's do that so first is extra extra large and this is the font size that we're talking about so it's extra extra large there's also extra large so extra extra large looks something like this while only extra large looks something like this fine then we also have so font size will be large that's font size large next we have medium small and extra extra small so medium small and extra small so this is gonna be fun size medium it's gonna be font size small and this is gonna be font size extra small so let's see how that changes stuff so this is extracts small this is small and this is medium now the next thing that we're gonna see is how points work so our size is going to be 25 points so instead of just doing that let me just change the extra extra small and let's say it's 25 points she remember that at one point is around two inches so that's how font size extracts the small would look like if it was 25 points then we could also say the font size is 150 percent so that shows us how percentages works we're 100% means the current font size they will change and that's how one 50% means the next thing that we want to show is line height so let's say well as the ID let me just check the ID so the line height IDs our line normal high 25 points so let's just select one line normal and this is gonna have a line height of normal semicolon save it up and that's how line-height:normal is that is the normal line height now you could say your line height is 25 points and that's how it would change also you could say your line height is around 25 a.m. and we're just five um let's say that and that's how it will change you and more with p.m. with one am being the constant font size that we're using or you could say line height is 200 percent that is basically twice of what our line height or font is so that's how it would change right so that was all about text styling now let's move ahead and see how positioning and stuff takes place in CSS so for positioning I have again gone ahead and created this page 3 dot HTML so in here we will be including a CSS page called page 3 dot CSS so let's go ahead and create that first of all we have to set this to CSS save it and space three and let's get started first of all we have three types of positioning in CSS absolute fixed and relative so first of all I'm gonna show absolute positioning to you guys now before I show absolute positioning let me just show you guys how texts and stuff can be centered first of all so let's start doing some random CSS so first of all we are going to target this ID called container so let's go hashtag container and that's good a background some random color so for a color picker we just go color picker let's give this background okay that's the background we chose it's also give it some borders water will be two pixels solid and black we can also set up a border radius so border radius gives you curved body so you could say border radius is around five pixels let's say now let me just open up the HTML file that is concerned at this moment so this is page three okay so this is with some CSS now let me just uncomment that CSS first so this is what our page would look like without any sort of CSS now this is what it looks like with the CSS that we just included now to make you aware of how box radius works let me just uncomment that first let's comment it out the box radius should not work and we should get ya now if you see let's zoom in out here see that this border is pointed suppose we don't want that to happen let's remove that first and let's uncomment this save it let's reload and now we have this slight little curved border which looks much neater okay now we can also center stuff so a neat way to do that is let me just show it to you let's take this part called centered now Center it let me just give you the first background to make it look different so this background will be let's say 89 c FF 0 that's our color let's see what a color looks like so that is the color that we are gonna Center now let's say our Ritz is gonna be we can set the width of elements like this so you say which is 50% and then you go margin is going to be Auto so what is auto do and put equal margin on also let's reload our page yep and now it's centered he can also Center without actually centering the element we can just Center the text by just saying text line and center fine now that will remove the background and just keep the text out here so that's exactly what we wanted and that's how you align your text okay now let's move ahead with absolute positioning now absolute positioning means positioning based on the document itself which means this whole web browser so a very so is basically the document that you are actually manipulating so it's called document object manipulation if you've heard of that term so let's go ahead and let me just show you how absolute positioning works first of all we have this element called top left and we're going to try and put it on the top left so let's select that first so you go top left now let's give it a background yeah that'll gonna be the background now it's also good bottle so let's for the P one pixel solid and black let's say now to position something with absolute positioning all you have to say is position it's absolute now let's also keep the widths around 200 pixels and the height also around 200 pixels let's save it let's see how stuff changes let me just zoom out yeah so that is our element so this is what top left and bottom right is gonna look like now we are gonna try and select this element and put it in the bottom right of this parent so let me just show you how that is done so to select that I've already created an ID for it and it's called porn right let me give it a background of white and you say the position is absolute now we want to change the position to actually inside the element so we have to say it's gonna be zero pixels from the bottom and also zero pixels from the right so since it is absolute positioning it's gonna position this inside of this so first of all let's give the background of white and also make the color black all right and now we have this right where we won't now there's also something called these air index so zed index is what comes first on your screen basically so if you have multiple things that are stacked on top of each other with absolute positioning the one with the most set index will be the one that is shown on top so you can set a Zed index like this and say the set index is five so anything with a Zed index of four will actually come underneath this thing right so that was all about absolute positioning now let's go ahead and do some fixed positioning so for a fixed positioning we have this ID called fixed which contains a paragraph saying I'm staying right here so let's select that first let me just remove all this stuff so that it's not cluttered anymore then we reload the page save it reload it and that's else so I'm staying here first of all this is what it's going to change fixed positioning right it's sad for we called it fixed position okay now first of all all you have to say is position is gonna be fixed now let's make it more prominent by giving it a background of black and a text color of white so let's see this has become black and position is fixed what do I do if I'm scrolling it just stays there it doesn't really matter what I do to this thing okay so that was all about fixed positioning now the next thing that we're gonna see is relative positioning for that I already have two elements created so let's say these are the divs which says this it's going to be relative so relative positioning as I was just saying its positioning based on the relative position of the element so let me just show you so relative on now let's go to background first so let's just select some color let's make the screen the screen out here okay that's gonna be your color let's give it a bottle full of one pixel solid black and let's say the height is gonna be a hundred pixels now we're gonna select another element and position it relative to this element okay so that is this element right out here is going to be relative to so to set something with the position of relative all we have to say that the position is relative and the less rest of the CSS is just arbitrary so let's say left not padding left so you want position it somewhere left of it and the positioning is going to be relative so 20 pixels from the original positions 20 pixels are left from the original position I mean and you could say from the top it would be around 30 pixels you could also say negative 30 pixels to move it the other way around let's give a background I'm already given the background okay let's go to background off yellow so you say background equals yellow and you could also get border and say 1px solid blue that's good blue background okay so this relative layout is going to be positioned relative to this thing fine let's just reload and see yep and that's how relative positioning works now this might just not look neat at this moment but I'm trying to drive a point home fine okay now let me just see if I have dog jpg okay that's a PNG file called a trekker so let me just show you something first of all let me just remove everything from here okay so now that our things are less cluttered and lets me just rename this now to the image that is already there so Eddie record or PNG and edu record or PNG fine let's save this let's see what page looks like now so this is what it looks like now you can float stuff like images to the left and right so I just select the image tag and suppose you say float them to the right these will float everything to the right now that's how you position stuff or images with the float tag so I guess that was all about positioning of stuff now let's move ahead okay so in this part we are going to be learning about overflows so for overflows what we can do let's say let's go back to page two dot HTML and we have this text out here or this unordered list and this list is pretty big right first of all let's open up a new page or rather let's open up okay wait let me just close these out so let's save this as page two dot CSS rather let's just call something first of all let's set this to CSS right save it and let's call it over now what I want to show you guys something really cool so let's select the order list so that's where we're gonna select let's say it has widths off around 100 pixels it has some padding drums top right so let's get some padding of 10 pixels and 10 pixels all-round Rado let's give it a margin of 100 pixels and auto so I'll bring it right to the center let's see it was page 2 that we're fiddling around with so this page 2 dot HTML now let me just replace this with overflow dot CSS let's see now yeah so this is what it looks like now if you see the scroll through this list is quite cumbersome because you have to actually scroll like this get a background also background is gonna be black as I just love black and the color upper font is gonna be white see how that changed yup so this is what it looks like now what if you do and say max height is equal to 500 rather only 200 pixels yeah so that doesn't really do much so if you say our flow is auto you got a scrolling bar or you could say all flow is crawled let's remove this max hey now you see we have these little scroll bars out here and that's what exactly overflow does is basically it shows us the items and you can scroll through them yeah basically like that so if you will say that the width is only suppose because let's say things it's even smaller yeah so that's how I know you have this scroll bar and that's it scrolls were stuff so that's how also works okay now let's look at some serious lectures or some pseudo classes that we can select and style so first of all that we open up the page that is gonna be responsible for that so we have this page out here that I've created now it also has some new tags that you might be seeing these are some html5 tags so header tag nav tag and then the main tag these are just some new tags that you see in html5 and you can also target them to css3 so targeting them is pretty easy but what I want to show is something pretty cool let's save it first let's create a new page let's call it CSS right so let's save this first as page 5 dot CSS okay so now it's time to practice some more CSS and we'll be doing it on this page that I've created so this page is kind of a big page to be honest it has quite a lot of paragraphs got a lot of links a few images also I guess and they use a lot of the html5 tags that have been newly introduced like the header tag the nav ID or the nav tag the main tag we have section tags and a lot of other tags like these now these tags can also be selected with the help of let's say css3 that's what we are learning you know let me just remove this part because we won't be needing that now let's go ahead and save our content and let me just show you what this actually looks like on the web page so let's go ahead and open up page 5 and this is what it looks like on a web browser rather without any CSS attached to it so let's transform this thing with the help of some CSS so firstly we've created this page called page 5 dot CSS and we've already attached it to this page out here with the link tag and the href attribute now let's get started first of all let me just actually make use of some pseudo selectors so we have already discussed your selectors while going over the basics now let me just show you how they work so a hover is going to target all the earrings while we are hovering over them now when we are hovering over them we want the background to become black and text to become white right so let's save it let's reload now if you hover over these the background becomes black and the text becomes white right now the same thing can be done with a lot of other selectors like active so when you click on a link that means it's going to turn like that so let's save it let's see let's reload our page first of all now you see when we hover nothing happens but once we click it it becomes that black and white kind of thing right we can also do this for visited and that will actually change the link then once it's been visited so if we go and do this open link in new tab well it's not working out here but if it there was actually a database connected you would actually see the student now suppose we want to select our body let's go to background first of all get out the color picker let's give a nice green background okay and that's gonna be our background for the body now we also have a div with the ID of wrapper so let's go ahead and select that first so we say wrapper now let's give it some CSS so we're gonna say margin it's gonna be zero and auto now whenever you say zero you do not need to actually specify the unit's so we can just do that you'll give it a background color of white and then we will give it a width of around 800 pixels give it a height of around thousand pixels okay now let's save that and let's see what it looks like now so this is what it has turned to no we can also do some more stuff so let's select some html5 elements like the header tag and let me just show you that CSS still works as we wanted to so let's give it some simple padding say your pixels on the top so your pixels on the right and we want to get some 10 pixels on the bottom and your pixels on the left to see what changes now we got a little change we can also select stuff like with the IDs that I just showed you now let's select the navigation which has the ID of horse nav let me just check if I'm right yep it's called horse now fat end being capital now we can say stuff like so there's also the display attribute this shows how elements will be displayed now they can be blocked or inline-block which means it'll be converting to an inline element now we could say display is blocked and you could just give it some background just to make it more apparent so let's give it a background color black and make all white let's see yep that's how it's selected now you can also give zero tags like this one out here like visited to ID student so let's say once we're hovering over the NAB huh we want this to happen so let's save it now if we only hover over it will the change happened so that's how that works now let's go over and see some word spacing now word spacing is used for mostly specifying the words so let me just remove some stuff from here first of all let's remove all this right let's remove the header tags and we just need this part where we have all these paragraphs so I'll be targeting the first paragraph to show you all were spacing so it's gonna be this one out here right here fine let's save it go ahead yo reload the page now this is what it looks like it's remove everything that we have already created and let's just select para one I hope that's where is called out here so it is called power one indeed no we can go word spacing and just say let's say let's go 10 pixels between the words right so the spacing between these words in this paragraph should change down now that we've saved it let's go ahead and reload so yeah now you can see that the word spacing for this this out here is much more different now we can also do letter spacing the same way so let's select paragraph two for that so for letter spacing all we have to say is letter spacing and then we could say something like 10 pixels now this was specified letters and how they're spaced now you can see it looks this horrible thing is having ten pixels of letter spacing it all let's put some word spacing into this so let's see how that looks like it's forward spacing of 20 pixels and make this even more ugly yep so that's what it would look like with word spacing and layer spacing so that was just for experimentation purposes and you can use that whenever you feel free to okay so another property that I want to make you all aware of that is in CSS is a clear property so the clear property makes sure that nothing actually appears before it so in this case the photo tag which is right about here which says only the copyright part now it is shown here this is the photo tag that we are talking about so you want to say something like let's say so you can say clear and both so that's how you specify Cleo's okay so let's get a background color of black let's also say the color of the text will be white just make it more prominent yeah so nothing actually appears about that so that's how I use Keeler now so there's also style types also list style types so let me just see we have these lists out here first of all which says random one two three random one two three now let's say first of all let's convert this into an unordered list so find all that's gonna replace that with unordered list right I just want to show it with unordered list first so let's say let's select all the US and let's say list style is gonna be none now if you see out here we have these bullet points and now we don't okay so you can also do these with ordered lists so let's go back and let's do control and ul find all let's select them let's make them oels ordered lists let's see now well doesn't work with list type none if you just realized now you can do something like alpha lower alpha so let's see that how that works okay so for lower alpha we have say list style type please remember that that was my mistake right now okay if you have to select the OLS again now you see that we have these list types that's saying with small caps now there are other stuff like lower Latin lots of lower Latin so let me just show you what that looks like save it okay that doesn't really change because I don't think I'm Latin installed but we can also go Creek there's a bunch of stuff that you can do it's pretty fun so our Greek install now is cos alpha beta gamma instead of ABC and that's how you can change stuff you can also change the position of the list style so lets style position you could say outside so let's see what that means and don't really change much out here but that's one of the properties that i just want to show okay now you can also place contents before an element so let me just show you how to do that that's clear all of these things now so let's say you want to select part one and say so this is gonna be a pseudo selector again so you say after you say content and your content is gonna be let's say add the race say all these add rates are gonna be before this little thing out here so let me just show you the change yep so since we said after it has all these attributes after but if we say before this is how it'll change so now it's all before them right okay now let's go ahead and see how we can use the end child elements for that we're gonna select our UL again actually let me go ahead and delete everything first of all okay so let me create another HTML boilerplate and this is gonna be called a list first of all let's say we have an unordered list with a bunch of list items so Allies all around let me just copy that down and paste it a few times right so now we have all these list items here let's just fill them up it's some random text okay so let's just say something random like cats so let's save this let's go out here now we have these things called cats okay so what if we want them to have alternate paragraphs I mean alternate background colors so first of all let's go ahead and select the allies and give them a background let's say this grey color that I have selected f7 f7 f seven now you see we have okay Stan seems to be working looks like I've deleted my link tag that's why the CSS was not working so let's see now we have that ok so first of all let's go back and change this to f7 f 7 f7 right this will give it this gray color that you see out here it's also give the width off around 360 pixels so that'll bring it there let's also give it a margin of hundred pixels from the top and equal on the side a spring to the center right now suppose you want to say Li and child and you could say something like 2 n so this will select all the even child's and you could say they have a background color of white so let's see how that changes things for us now you see that all these things out here have alternating background color where it's gray bichri white gray white and that's how you select all the even chairs now you can also select the first child by saying first child for that we do not really need this to encounter and not only the first is black you could also say last child and now the last will be white that's how she stuff changes with CSS okay now you can also change first line so let's go ahead and change our HTML up a bit so let's create a paragraph and it's gonna have some lorem ipsum in it so let me just show you something really cool let's lead all of the stuff let's select a paragraph and rigueur say the seer selector called first line and let's say text transform uppercase so let's reload that first of all let me just comment this out just to show you what the page looks like without any CSS so this is our page without any CSS and let me uncomment this now save it and there you go the first line has been completely made uppercase now instead of first line you can also say last night last line and that will transform the last line to uppercase you could also say something like first letter and okay so just to show you that it doesn't need work let me just reload this without any CSS first okay now you see that lorem ipsum begins with the lowercase L now let me just uncommon and I see that the first thing is a capital you could also change it to say stuff like deck size or rather font size and say around 100 pixels now the first letter will be hundred pixel big and that's how you can do stuff like that okay so another thing is you can also change the pointer or the cursor so let's see when you're hovering over a paragraph let's say B and huf Oh first of all we want the background to become black we also want the color to become white and we want the cursor to become pointer so let's see so you're hovering over it it becomes his hand like thing and when you go out it becomes back to normal so that's how you can change the cursor also now let me show you something called box shadow first of all so let's remove this cursor part so the cursor looks something like this let's remove the Hoover tag so that's always there right okay now let's also change this to that great color that I really like and that's also change this to black so this is what it looks like now let's give it a width of around 400 pixels so this is what it looks like now let's all just Center it so that I can show you some cool stuff so margin that's a zero and auto so this is going to Center it on the top of the screen now that's centered okay so this is what our thing looks like now suppose you go to give it a border so borders are really neat so 2px solid black so this is where border looks like but there are other stuff also like a box shadow so this is our box shadow box takes three parameters so one Zed X and y-axis and not really in that order is x y&z axis and then it also takes a color so let me just show you how that happened so suppose we say zero X zero Y and let's say three pixels on the z-axis five pixels to make it more prominent and then takes an RGB a of zero we want to make it really really invisible so 0.5 so that gives it a half opacity now you can see this really neat little shadow going all across our content so that is what box shadow does it's a neat little trick for when you don't want to use a border or something like that other than borders that also outline see an outline is black in color so outline completely negates our box shadow and you could also say outline equals none so let's remove that now because box-shadow looks really neat yep okay so now let's talk about text decorations so since we have some text already going up let's decorate now there are a few kinds of text decoration that I want to show so the text decoration let's say so first say is line through put a line through all of the content so now it's all strikethrough it also say something like over line or underlined so let's see that underline will underline our text yep and over line as you might have guessed well over line our text now everything has line on top of it fine now we can also set the visibility of our text or any other tag to be honest visibility so let's check out all the other visibilities that are there so do that always go on Google and dive visibility and CSS and let's see the visibility property and how it goes so you must understand that knowing everything in CSS is kind of impossible so you should always have a go-to or a backup so my backup is normally w3 school and they have everything regarding CSS and its properties these are all the properties that you want to go through and I'm mostly going through the most important ones in this tutorial that you may use in your day to day projects and topics but sometimes you might need the rare ones like counter reset empty cells flex flex spaces and all these stuff and you can always go back to w3 schools and go through them now you can save visibility is visible or something like that and it should make it visible Yeah right so that was all about miscellaneous types of CSS that we were handling now let's go ahead and see some gradients and how we can create some beautiful gradients using CSS okay now before we move on to gradients let me just show you some white spaces or some more text transformations right so I already showed you all these text transformation that's capitalized or slower cases over line line through uppercase and online now capitalized will just capitalize it so I don't think I'm going to show that to you guys now let's close these two pages out here let's create a new CSS file and first of all let's set this to CSS let's save it and let's say it's gonna be page six start CSS now out here if you see you have a bunch of white spaces right now let's see how you can handle white spaces using CSS so there is a thing called the ID called white space pre I think that's exactly what it's called white space pre yep let's select that and you could say white space is pre let's see how that changes stuff so first of all let me load up page six for you guys right let's remove the CSS save it let's reload it again and what we are actually targeting is this spot myspace will be preserved right so white space will be preserved now go ahead and comment that save it and let's reload now see the white spaces are in the HTML is preserved now white spaces can also be handled in other ways so there are two things that I want to show so let's select this thing called never wrap never wrap right and we say that the white space is gonna be no wrap so let's see how that works so first of all this is what we are actually targeting this lorem ipsum bar out here and it's somewhat like this and let's see how it changes now and now you see that it goes completely out to the hair so no wrap it doesn't wrap it around so you also have pre wrap so let me just show you how that works so I'm gonna be targeting this part out here with these weird kind of fight spacing so let's see preserve wrap so with preserve wrap we go pre wrap okay and that's the property so let's see yep lorem ipsum and the wrap has been preserved okay now you can also set up the direction so let me just show you how that's done so we're gonna select these two things I really left right and right left so harsh left right and also control C and let's make this right left fine the answer move all the stuff for now and let's move everything before a right-left - and have you removed that let's remove this let's save it see ok so this is what it looks like right now and only how to say is direction is l2r so that means left or right now here you see direction is RTL let's see how that change stuff so I prefer right left and I prefer left to right so that's how it's working fine so that was all about bite spacing and directions now let's move on to gradients and animations this is gonna be the last part and the most interesting part in my opinion so gradients are those beautiful backgrounds you see on most websites and to generate your gradient you can always use this thing called a creating generator so this gradient generator out here is a really nice created generator you have to select the direction and you select the ending colors so I've already selected a gradient out here it's going to create this gradient now let's see your page seven right now let's select the body tag let's close this off let's close this off I'm gonna save this and let's create a new page first of all and this is gonna be our CSS so we save it and say page seven right now we select our body and just paste in so let me just explain how this happens so there's a linear gradient and there's also another thing called radial creating so I'll just show you that now this takes and a few parameters the first is to the right that's direction and this is how the colors will change so let's just see how that works first of all let me comment this out let me just open page seven for you if you see it's gonna be a blank page okay this is a gradient I'm sorry let me save that right so this is what it looks without a gradient and you already saw our looks for the create but let me just show it to you again this is where looks with a gradient now you can also set the background with other stuff like image for that you go URL and you can paste in the URL so let's go and search for a beautiful image I really like Dragon Ball Z so Goku Super Saiyan 3 so that should be a good image to save as a background so let's see it just looks like a really nice image so you go here let me just save this image eyes so this is gonna be Goku and it's gonna be saved and desktop and CSS tutorial we Goku jpg right so you could say Goku jpg now that's saved let's go back to our page and it should have a picture of Goku okay so that didn't work I think I got something wrong let's go and analyze that it's open up our CSS tutorial okay so it's a jpg file and not jpg so that was our mistake small mistake nonetheless and now we have this picture of Goku now you can also set the background repeat' let's close this off say background repeat' and you could say no repeat when I repeat the background anymore or you can say background repeat' is gonna be let's check out all the background repeats that are actually available no background and repeat so if you're going to background repeat and see the properties you can just try it ourselves so you can repeat it according to the y-axis you can repeat it according to the x-axis so let's see how that works so repeat X so if you say that I think it should repeat it on the x-axis like it was or you could repeat it on the y-axis I don't think I'll show about here but let's see yep it's not repeating on the y-axis so that's how background repeat' also works so we've covered that too now we've also covered the gradients now it's time we do some radial gradient now if you remember let me just go back to the gradient part so if you have a radial gradient all you have to say is not it's a radial gradient out here and a radial gradient doesn't really need direction because it's gonna be radial save it page and let's reload it okay now we have a cradle region now you see all these lines going in but if I just zoom out you can see that it starts from the center and spreads out where it's white on the sides and white on the sides so that's our radial gradients work okay so now that we've covered the gradients let's go into animation so I think animation is the most interesting thing that you can do with CSS so we have selected the div so first of all let's give div a border mm so this border is gonna be 2 pixels solid and black now let's give a background to begin with let's say it's gonna be a Fred now this is how you do animations in CSS okay so before animations actually let me show you how you can move this thing around fine so there are some stuff that I want to show you guys so let this be let me just show you what this looks like so let me give this a rich first it's gonna be 400 pixels or other 200 pixels and the high it will also be 200 pixels now let's see okay we have this div out here let's make a little bigger a 500 and fire save it yep let's also make this much more prominent let's go to 10 pixel background I mean a 10 pixel border and now you see we have a really prominent square out there now let's try some really interesting stuff so let's say div and when we hover over the div you're gonna scale this so scale and let's say you want to scale okay so that's not how you scale first you say transform and how do you want to transfer you wanna scale it and you want to scale it twice so when we hover over it it should scale twice let's reload and as you see it's scaling twice now we can also transform some other stuff like this so we can rotate so we can say rotate 45 degrees let's see when I hover it's rotating 45 degrees you can also skew it so skewing is how it works let's see you can ski you 20 degrees to the x-axis and 10 degrees to the y-axis save it and this is how it gets queued the skewing works you can also translate stuff so just let me show you how translation book so translate and let's see you won't translate at 20 pixels and 20 pixels so let's see over it and it translates a little it's translated around 120 pixels just to make it more clear 120 and 120 let's save that let's reload this and you see that now it's translating so much right so that's how Translate works okay now that I've showed you scale rotation and skewing and translate let's see we can also set up the transitions so with transitions you can set up a lot of stuff so now that we're done the transitions let's go ahead and see some animation so for animation I'm gonna be actually targeting this devout here so let's actually style this div i've given at the width of 100 pixels and the height 100 pixels and background a red and a border of 3 pixels solid and black let's say right let's see what that looks like that's what it looks like fine zoom in a bit now all we need to do is actually set up some keyframes so we do that by saying keyframes now we name our keyframes let's call it anime and we have to set up actually what it will look like at different points in time so we do that by saying 0% and it'll have let's say a background color Fred and and it'll move now so low we want to move it in square so let's say it'll be not padding means zero pixels from the left and from the top it's gonna be zero pixels let's save that copy that down let's paste that a bunch of times now I'm gonna say is this is gonna be 25 it's gonna be 50 it's gonna be a 5 and it's gonna be hundred that save that let's change the colors so this can be yellow first then change to green some pretty basic colors blue then and in the end we'll change it to red so that brings us back to the original position let's first also move it by 300 pixels then let's move it 300 pixels both ways no it's only one pixel this way and the end comes back to the original position now to use this key frames animation we have to give this animation name it's gonna be using the animation with the keyframes name anime now we can say the animation delay is gonna be two seconds you can also say how many times it's going to be iterating so you can say that by hundred let's save that okay so our animation is not working because we haven't said the positioning so now let us say if this and let's say our position is gonna be relative let's save that it's uncommon our animation now you see the animation will work as we intended it to so after two seconds our animation starts working and this will just keep going on and on now if you want to actually repeat that animation there's a way you can do that and that is with the animation iteration count let's see one iterate it a hundred times let's reload let's wait for two seconds and voila our animation will keep going on and on and on so that's how you animate stuff with CSS guys and that brings us to the end of this tutorial I hope you all enjoyed everything I taught you all today if y'all have any doubts regarding any CSS or any properties that you want to know about you can always refer to w3 schools or you can leave us a comment in the comment section down below until next time goodbye I hope you have enjoyed listening to this video please be kind enough to like it and you can comment any of your doubts and queries and we will reply them at the earliest do look out for more videos in our playlist and subscribe to Ed Eureka channel to learn more happy learning

Channel: edureka!

Views: 147,385

Keywords: yt:cc=on, css tutorial, css tutorial for beginners, what is css, css tutorial w3, responsive css tutorial, css website design tutorial, css for styling, html and css tutorial for beginners, css full course, web development tutorial, web development course, front end development tutorial, front end html css, front end using html and css, front end web development tutorial, css animation, css grid, css tricks, css advanced tutorial, css training, edureka

Id: 3_9znKVNe5g

Length: 64min 15sec (3855 seconds)

Published: Thu Oct 25 2018