CSS3 In Webdesign With Code Examples | Somenath Sen | Skillshare
Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
16 Lessons (1h 11m)
    • 1. Enroll Now !

      0:27
    • 2. What Is CSS Syntax ?

      2:56
    • 3. Internal CSS

      3:10
    • 4. External CSS

      3:55
    • 5. Font Style Elements In CSS3

      7:07
    • 6. Text Style Elements In CSS3

      13:16
    • 7. Background Image Part 1

      5:39
    • 8. Background Image Part 2

      2:02
    • 9. CSS3 Margins

      5:17
    • 10. CSS3 Padding

      2:53
    • 11. CSS3 Borders

      4:21
    • 12. Height & Width In CSS3

      2:09
    • 13. Max Height & Max Width In CSS3

      3:36
    • 14. Child Selectors In CSS3

      4:40
    • 15. What Is Pseudo Class In CSS3

      3:06
    • 16. Creating Gradient Effect In CSS3

      6:16

About This Class

In this class you'll learn how CSS3 used in webdesign with code examples, if you are a web designer and want to learn how to code then this class is for you. So enroll the class now !

6587a41a

Transcripts

1. Enroll Now !: 2. What Is CSS Syntax ?: in this video, we're gonna be learned. CSS syntax. So what is thesis index? A sister style rules that are implemented by the browser on then applied to the corresponding elements in your documents. Seizes Syntex are diverted into cheap parks. If I go to my sees a style seat in head. As you can see, we can region some lines here, Each one then Curly Becker, then colored and red. So what is this? This H warn is a selector and in the Kali record we have color. This color is a property on this color Have a value which is red So seizes index are divided into three parts which is still litter her property on a value. So in the style seat this H one is a selector on this color is Ah, property on the raid is the value and every seizes. Syntex has these three parts. We also have ah, universal selector which is the also. We have a universal selector which is a star. So if I go to the browser and check diced email document as you can see, we have the heading color hitting one color red. But if we go to our text editor and rather than this H one. If we type the star, which is a universal selector and save the file and good over browser on repress the page. As you can see, the heading and the pilot up are both color are the red So this is a universal selector. So if you targeted this in your cell selector than the all element in this estimable document are being targeted. And if you target the specific element like, as I can target here previously, which is the heading one, then that element on Libby style using these ceases as you can go to the browser and new Chris the page and and as you can see, this heading is now only being read. So this is the different between a normal selector on the universal selector. 3. Internal CSS: in this video, we're gonna be learned how to add internal services in hasty ammo. So, as you can see, I have here a steam l five Doctor, this is the standard estimable side talk type. If you don't familiar with esteem Ill I highly recommend it. Take my estimable course than Buddha Me where I can explain each and every step and each and every element in step by step process. So it will easy to understanding the course. Now I have open ah estimate side doctor, which called index dot Esteem, in which I was just created in my project for you. So in ist email, we have three way toe end Our season scored. First is internal thesis second is external steers of style said linking in the head And I heard one is the inland seas is I can explain each and every step So in this video we're gonna be learned how to add internal ceases in a stammel So in hair after this title Dag, I give some enter and now we have to open our style Dag toe add Internet ceases. So I'm just hoping my angle bracket and I Australia close my angle bracket and lose the strange deck. And in the style deck we are now right. Oversee assists. So for demonstrating purpose, Let's just night assesses and village on the Broza. Let's say we have a heading and paragraph here. So Lizza style this heading tag so head we just stay h one and just to give a simple rid and said the fine go door project full there and I will get on this file. Open this up in the browser. Let's see how it looked like on as you can see, this is our heading. And this is our prayer up on our heading Eastern to read which we just add this simple line off seizes here, which called heading one and color raid on this single lens eases will turn this heading color to red. So in this way we can add internal seizes in is Deimel 4. External CSS: in previous video We learn how to add in Delos seizes in html. Now, in this video, we're gonna be learned how to add external stance seed and link it on the is Dimel head so cost a cool. I'm just removed this internal style Come here and after this title deck and just gives, um enter on We open our link tag hair because we just link our external ceases into this head So we just open our link tech So just open our angle bracket and type link Then give us this on then we type are ill. Arial stand for real essence If we need to explain here what type of relation this link are So when the browser will load this page, brother will see the religion support this link and display the seizes Corbally school We need to type here they style shoot and then give us Based on Ben, we need type h r e m in a JDF. We need to write the exact part off this season's document, which we just created in our ceases for your corner under the seasons cooler. So first of all, just by the whole and name who you see as s aan den. Give us slash on. Then we need to write our friendly, which is style dot C s s. And now we need to close the link. Lincoln is a self closing tax. So we need to close the stack by give this slash and disclose the angle bracket and saved the quiet and Google O R external style suit and ride the same heading one color red effect . So H one good bracket, andi, and then die color. It's true. Read. We do not need toe open the style back here because this is already a stylist. Rachel, we just write our season scored over here. Why? I have to write this same effect here Because when we load this page in the brother, if we link this tears a style sit here properly. It gives us the same each one color red effect in the browser. And if we don't link this season still properly, it will not give us the same. So go to our project, Fuller and double click on this. Quiet. Open this up in the browser and let's see how it looked like. And here it is. Here is the same effect which is heading one color red. So we just linguistic style here properly. That's why it is give us the same effect in the browser. In this way, we can link external style, sit into our head. 5. Font Style Elements In CSS3: in this video, we're gonna be look at home styling elements in seasons, so there are a couple of constraining elements in seasons. So let's just start with this paragraph. Go to my CSS file on. After this heading, we just tied the be equal Hagrup on a opener closing or curly bracket on in the color. Burkett. Let's type our first phone trailing element, which is warned family. This property is used to change the Chris off the horn. Let's see how it's work now. Here, let's type your gea and coma, then type, Graham warned. Then coma on Ben died. I see. And then some Angola, which is this mean, is this will render the Pentagon tricks, either in Georgia Horn are in Gammon phone or the default, serif warned, depending on which haunt you have in your system. So let's stick it in the browser, save the file and go to the browser on because the pitch And as you can see when every prisoner page the better will change. Waas City formed and this is the Georgia phone because I have Georgia in my mission. So it will pick up the Georgia phone and displayed in the browser. This is how the phone family, nobody will walk. Now let's look at another property. Coiled kornstein. No, just drive Horned Price when style on, then died Italy and cynical. Who does? This just do is just make the horn in Italy. So said the file and go to your browser on because the page and as you can see this Bagram is now it like So let's die. Another property, which called won't quit. What is the phone with does is it's make on ticker or light Here. This property can control the horn thickness. Let's they formed with board semicolon said the file and go to the brother and decrease the page. And as you can see, this paragraph is now board. But I don't like this bull style. I need Boulder, but not that much. So what should have to do? I go to my text editor, Andi, just remove this bull and let's dive something like 500 and said the foot, go to our browser on request the page. And as you can see, this takes is border, but not that much. This will less bullet in the previous one. You can also Tyner the sticks Goto our text editor and changed this 500 to 100 and save Brooklyn. Goto the browser and replace the page. Now the text will less bolder than the previous one. If I zoom on a little bit, you can see the difference. You can control this boldness instances using for wit, you can use 100 to 900 thickness option, and after this 900 you can use the board ocean. I would give you a bold style in this paragraph. As you can see here, if you need much bolder than this one, you also concluded Go to our Texas later on, changed this Balto border and save the file. Goto our brother and roof is the peach. This is now much bullet in the previous one, so you can control won't thickness using form with property? No, let's stay. Another problem, which is phoned sighs now horn size have to measure option, which is one is small and another one is large. Let's try small coast. See the file and go go. A browser on refers a fish Now, as you can see, this takes is much smaller than the previous one on. If I go to my checks editor on and Change this morning toe large and said the file go to our browser on Earth is the pitch and now, as you can see, this sticks is much bigger than the previous one. Also, you can determine her the pixel off the horn size. So let's say I have ah, phone size in 40 pixels, So let's dive here 40. And for pixel, you can type B x P X four pixels. You can save it and go to the browser and preserve page. And as you can see, this sticks is now 40 pixels, which is much bigger than this heading takes. So in this way you can bigger and smaller this text size as you want using pixels you're or you can use those to measure properties small and large. So in this way you can control foreign size using foreign sized property. So this are for major horn properties, which we can use in. CS is 6. Text Style Elements In CSS3: in the previous. Really, We look at some form styling pro bodies. Now, in this video, we're gonna be looking at some tech stylings properties, the course property that I will explain here is color. I already apply this property in this each one back. As you can see, hair color is red. So this is the first text telling property on which is very important to styling any text. The color pro body is used to sleep the color off a text. As you can see here, we use this property to change color off this heading Andi, If I go to my browser and as you can see the color off, this heading is ready. If you want to change it, just go. Go over. Text Editor Andi changed this color toe red to let's say green, save it and go to our browser on recruits the page. And now, as you can see our heading color exchange to green. So in this way we can use this color property to change any text color. The next property that will explain is the direction which is very important as well. Let's say I need this heading direction from right to left if you go in the brother and check out this heading. First of all, I'm just lower This paragraph takes so I'm just good one text editor. And this change this corn size too. Going to big still Andi fund way too. Board civet and go door browser on because the pitch And now the paragraph is look much murder. So as you can see, this heading is now left, right? But I want this heading from right to left. So how I can do that? I just go to my text editor. And after this color property, just given enter on type our next property called Direction on in direction we just add are dean article stand for right to left, then semicolon save the file and go to our browser and refuse the page. And now, as you can see, all heading is moved from left side to right hand side because we're just clarify in this direction. Property. We want our heading direction from right to left, so it will go to the right on you, Fi add some more picks in the heading something like we on some more dix and civet on go door brother and new president Pace. And now, as you can see our text he's coming from the right hand side because the direction of this heading our right to live. If you go back to our text editor on, I will stand suit on every remove this direction right to left. Who give this a left to right? Which is lt are Hillier. Stand for left to right and save the file on Goto our brother and freeze the peace. Now we're hitting our back going or left side And if we had some more takes it will appear form or left inside. So in this way you can change any takes direction using these direction for our bodies The next property that I will explain here is the little spacing This property will add some space between the later So let's see how it looked like I give a ended up to these directs and property and I time later spacing on in little splicing Let's say we just add 10 pixel and in semi colon save the file and goto our browser and refers the peace Now when I different the page now as we can see this heading are now stretch. Why this hitting a stretch? Because each letter in this heading now have 10 pixel with in it Because we had 10 pixelated spacing in this heading. So now in this heading each letter now have been pixel space on it. If you think this place is too much and we don't want that much of space in this heading, you can easily remove this space from hair and change it to something smaller than 10 pixels, something like five pixels and said the fight goto our browser on because the page, when it reports the page now each later have five pixel space in it. So in this way we can use this legislation's property to add spaces between letters in a text. Now, the next property that I will explain here is warts facing in Previously we can see the latest placing. Now we can see the wards prison. This property is usedto a space between ward. This latest missing property are usedto ad space between letters and now we can add space between words. So I just give up ended after this latest missing property and no type ward squeezing and give 10 pixels, save the file, go to our browser and refers the fish. Now as we can see, we have 10 pixel space between each ward. It's similar to the letter spacing Let us missing F space reading letters on dwarfs missing at space between words If you can increase this 10 pixels, 20 pixels are scorn. The space between wards are also being increased as you can see her. So in this way you can add spaces between words He was in these war spacing property. Now the next property that we will explain here is six. Align this nobody is usedto ally in that takes off a document. So after this award splicing, I'm just given the And before we write our text align we just remove this 20 pixel were expressing toe something similar to letters Busoni's Christ pixel and save the fine. Now, after this word spacing, we just tied picks a line Onda Then in Dixon line, we have three awesome right lift and center. The right option will ride the takes. The center option will send out the text on the lipped option will lift ally in the text. So let's see one by one first. Let's type here right and then Cynical said. The fine goto our browser and refers the peace. And when every Krista page now as it can see our fix, are aligned to the right hand side because we add our text align, too. Right now, let's add the center, said the file, and go to our browser on because the page And now, as you can see, our taste is no center and no, let's add the last option, which is live. Save the file and go to our browser on because the pitch now, as you can see our takes, is now the left inside. So in this way you can use this takes Alan property toe align your takes left, right or center. Now the next property that it will explain here is eggs, decoration, this property easy, usedto underline overline and strike through text. So let's see how it looked like. So after the sticks align, I'm just give her in there on I sticks decoration and now I our first option, which is on the link and then give us a Mick alone, save the file, go to the browser and refreeze the fish. Now, as you can see this heading now have on the line in it. Now let's type our next option, which is Lento, said the file. And go to our browser and across the page. Now, as you can see, this is now a line. Politics. The line are between their takes. And now let's type are next option, which is overline on go door blows er who was a fish? Now, as you can see and as we expected, the line is now over the heading, and now we have other option which not use much more. Who is? Ah, Blink, said the file, and go to our browser and across the page. This option will remove the line. So in this way you can decorate takes using text decoration property. No, The next property that it will explain here is takes transform. This property is used to capitalize ticks or convert takes to uppercase or Lorca's. So let's see how it looked like after this Triggs decoration. I'm just given enter and type fix done school and now type our host option, which is capitalized. Save the file and go to our brother on because the fish now, as you can see cost later off every ward in this heading on now capitalized. So let's try a one next option. Upper CAS said the pile and go to your browser on because the page now, as you can see, our all dicks, are no gifts. So this will uppercase electrics. No, let's try your next option. Lorca's said the file and Good War browser on Lucrezia. Now, as we can see, this option will lower case all the pics. So in this way we can use this property as we want in our project. So this are some text styling properties that we will use in ceases to style a text. 7. Background Image Part 1: in this video, we're gonna be look at background color on background image. So let's start with their gun color. So I'm gonna go to my CEASES file and let's try a bag on color in our body. So before this, each one I'm just take my body and then curly brackets on in the college records. Let's stripe background color. Andi here, Let's die. Um, yeah, on a cynical saved the file and go to our browser on because the pitch. Now, as you can see, we have a nice and clean you local er in our bag on If you want. We can also hear the background color in text and heading as well. So let's try this as well. I'm just going to my tricks a leader on and I'm just got this whole property from body and fisted under H one tech. See the file and Google over browser and decrease the page. Now, as you can see now, the bag on color from the body had been removed. We have the default white color in the body and now we have the same yellow color in our heading breakout. We also can add this. We're goingto this paragraph is with or if you want, we can change the color as well. Discovered this property from hair who are religious live this probably here on who? Just copy this whole property and vested on here and changed the color to yellow to red. Save the file on Goto, our brother and Chris a pitch. Now, as you can see, our hitting as a nice you know, color on our paragraph has nice red color. So in this way we can add background color in any estimate elements using CEASES and now Google over Dexter later and take a look at background image. This property is used to say the backbone image for an elements, so let's see how it looked like. So let's try image in this heading bagel. Just remove this bag on color or just coming this back on color star on stress and said the file. And after this Reagan Carter, we just stayed background image on in here. First of all you need are a made in your image holder in our project file image holder. We already have a image that you can see there. This is a BGE dot gyp IQ image. I already have my image holder, Andi. Now we have to link this image indoor season. Smile. So in the bag on image property, let's try the value. First we need to type. You are ill, then open our brackets on in the bracket. We type double condition on in the condition. Let's mints and the fuller name cost our image. Located the image holders. We need toe. Mention the image holder first. First we need us less. Then we need to type Ah, holder name, which is image. Then we need to type the finally, which is biggie dot jp g and civil. Fine. Go to our browser on Let's see how it looks like if we Linda image properly, the image will sit as this heading Breckel. So it is repressed a page on It's just not happening. Why? This is not happening. Let's go. Go for your cooler. Andi, check the core backgrounding as you are. I forget toe the door, daughter. Before this last, this is very important. Guys, you need to put this two dogs before this slash s it will indicate the browser goto the image holer, Then display the image. If you don't want this door DOT browser will not dignify where to go and where to find this image holder and this file in the image holders. So even it to put this two doors before this last stack this is very important. Let's keep it in your mind. Save the file and go to our browser and request the pitch on hair it is. So here is our image in the background off this heading. So in this way you can add a background image in each demon elements is incidences. 8. Background Image Part 2: Okay, Now we'll know how to work. Background image in any estimable element using seizes. Right now we have a small problem, As you can see here, our bag down our end right here on. We have the same bag on reputed right after it. If I zoom out, this takes a little bit. As you can see, we have the same back down our repeated one. Then I would come out a little bit. Then we have a reputation to. So this way, this background will repudiate continuously when we zoom out this browser. So how we can sixth this little problem. So first of all, I'm gonna just go to my text editor and we just add one more properties which is bag owned . Rip it on in this bag on repeat property. We need toe, add the value. No, rip it. This value will not reputedly continue this background image in the browser. So let's see how it looked like, said the file and go to our browser and refers the page. Now, as we can see, we have lift with just only one image and our risk off the repeated image are right now gone on If I zoom out a little bit, you can see there is no repetition. What? This image By default, the background image will report it continuously. If you do not want to continue to repeat your background image, you just change it. Using this background repeat property on the value is no re pitch. So in this way you have the full control in background image using ceases. 9. CSS3 Margins: So in this video, we're gonna be learned margins. So what is margin is if I go to my browser on take a look at this elements in here we can see we have some spaces. We doing this elements between this heading within this paragraph even in this deuce. So this spaces are called margins. And now you guys asked me We don't write any emergence in our senses. So how did this margins will apply in this haste email files? Well, these are some default margins. Which browser will automatically apply in a steamer documents? There is some margins, and there is some petting as well. I can discuss more about padding in next video, but for now, please keep it in your mind. Browser will automatically apply some padding and some margins in your estimate documents. So if I go to my text editor and go to my sister's Kyle in here we have a empty of body properties in ah, Los Transit on now we have in our body heading two paragraphs and two days. So let's just go to our stance it. And after this body tag, let's give a comma and die each one then give a coma, then the space and type B people Bagram then give a comma. And then he was based on died. Do so we conducted our body, our hitting one hour program. And did you know, in this curly bracket, Liz, this type margin on in value? Just at zero. So what? This zero is done? It just removed all this default margins form this aced email file. So let's just refresh the page and let's see how it looked like. And as we expected, we just removed all their spaces. All the margins from this aced email documents on for this gap. This is not the merchandise this actually a line break as I go in my HTML document and in hair. As you can see, this is a line break between toe tips so it can be displayed in the browser. If we remove this line, break from hair and save the file on different the spade. Now we have no space in between these elements. So let's just give some margin, including these elements. So just go to my Exeter on just type, then excel. So it give us a 10 pixel margin all over these elements, as we expected, is give us a 10 pixel margin all over the elements we can also did remind this margin like margin. Bottom margin, left margin. Right on. Merge in. Stop this margin bottom will give a margin in bottom off this elements on this margin left will give a merging on left inside this margin, right? Will give the margin in right inside on this margin top will give the margin on the top of the element so we can use this core property one by one. Let's say we want a 10 pixel margin, so we just write margin 10 pixels. It give us a Martine bottom 10 pixel marching left, 10 pixel margin, right, 10 pixel and margin. Top 10 pixels. So let's say we want Onley margin bottom and margin left. 10 pixels on margin. Right and margin top. Will we go to zero? So how I can do that? I just remove these margin from here and we just give a margin. Bottom pixel and margin lived. 10 pixel on margin riot is zero pick sell because we don't need any margin. Right? And marching talk. So we just give this zero pixel and margin stopped as well. Cord zero and said the file Go to your browser on because the page. So as you can see marching top and margin right at zero Big still, as you can see here, there is no margin in top and nobody in in right. And we have 10 pixel merging in left inside and then Bixel margin in the bottom. So in this way we can add margins in estimate elements. Anything serious is 10. CSS3 Padding: in the previous video will learn what is margin on in this video? We're gonna be learned, Betty. So take a look at this paragraph. We want some padding in this paragraph. So let's just go to our text editor on after this gold record. I'm just I be before bag grow because we're targeting a work paragraph and at some betting on our paragraph. So just type he on, then open curly bracket and closing college bracket on in the club. The bracket. I'm just type heading on. Just give a 10 pixel pairing all our only semicolon slave The file. Andi Also, I need one more team. I don't like the bag on color of the paragraph. So I'm just changed the background color green to yellow and also changing this bargain color toe. You know as well so it gives us a nice clean your local er in our pack up. Reckon just save the file and go toe over browser on because the page now, as you can see, it was a nice euro color in our background, and our black text color is pretty much awesome in this yellow color, so it will be more permanent toe. You guys on as you can see here we have 10 pixels bedding all around this better optics. So in this point, we're confusing almost all the time. What is margin and what is bedding is. So please keep it in your mind. This is the actually easiest process that I will just tell you. And this is the process that also I'm falling as well. Please keep it in your mind. Spending will create a space inside. The element on merging will create a space outside dynamic. If you go to our dicks, a leader also, you can apply bedding like marginals were like varying bottom bedding list spreading right on reading. No, you can use this four properties and with this general priding as well. So in this way you can use heading to cure the space inside off estimate elements using ceases 11. CSS3 Borders: Now we know what his margin is. What is betting is now take a look at what is border. So in this video we're gonna be learned What is border? So lets us create Ah border in this paragraph. So go to our text editor. And in this Pitak, we just type border good lor Let's make the border killer rid aan den We have border then high soon with it. Let's naked to pick so on Then we have border then style. Let's make it this Save the file and good or browser on just reload the page And now we have a nice desk's border also despairing. So what is water is water is just create an outline for the spreading. So whatever you're petting is gonna be end a line will be created and that's called a border and you have to just style those outline as he want using ceases. So if I go to my ceases, there is another one way to reaching out this border. I'm just removed this a whole bunch of border court from here and just type one single word which is border. And here we just type red, which is our border color. Then give us face, then type three pixel, which is a border wit on Give us face and just type this, which is a border style, then just grows over cynical and save the file on Goto over browser and with the pitch it give us the same effect. It was the same effect as we redan in this three line. We just march those two lines into one. So we just here at our main property, which is broader and just create rebel, which is red readies the border color and three pixel is the border with Andi deaths, which is the border stain. So in this way you can create and style border in estimate elements. Even series is also there is a name for this margin padding on border, this margin bedding and border this three property are called together as a season's box mortal. If I right click on this page on go to inspect element but just drag on a little bit so it will be more visible to you guys. And now here, As you can see, this is the box mortal for this Whippet. As you can see, this is the content area where our content is on. After that, there is a petting that we created on. After that, we have our border. As we mentioned before, Border is just outlined four of our bedding. And now after this border, we have our margin, which is outside space, often estimate Enemy's. So this margin, petting and border are cold weather as a season's box mortal. 12. Height & Width In CSS3: I was. So in this video, we're gonna be learnt Height and width in series is so let's give a height and width for this bag up. One. Find a girl so good or see, Is this quiet? Okay. Before we give a heightened record disparity up one, I'm just going to my browser on Let's see paragraph one. As you can see here, the height is just about okay, but by Dick, all the browser will expand the width off this pair. So let's say I want some 400 pixel with for this paragraph. So I'm just going to my text editor and into this paragraph one class because I already sugar this paragraph one class better one so equal rights style here it will be apply on this paragraph upon paragraph. So let's just try with to for nude pixel and said the file goto the browser on because the pitch now, as you can see, our paragraph one have 400 pixel of with. And let's say I want some hornet pixel height as well. So look nice and clean, said the file on Good Over Closer and requires the pitch. Now, as you can see this paragraph one has now cornered pixel grit and foreigners with still high. So in this way you can use this height and with property, you know is Danielle. You also familiar with this height and with properties in this way, you also can use this height and with property in ceases to style your haste email elements . 13. Max Height & Max Width In CSS3: In the previous video, we'll learn about height and weight, and in this video we're gonna be learn about Max, Height and Max. So let's see how it work and how it looked like. So, first of all, I'm gonna go to my a steam file on after this and attack. I'm just give a ender. Just add a line leg up to this tank attack and given entered. And in her, we just type I am. Then it's Psi Corps source. Cool to Double Quotation and this site image. Horner then has easy thought. Chip, you do closed the image tag on. We need to add the image to North. Cheap. Easy. I already have this to emit under my image holder. So I just add this to image in this estimable file and go to our brother. And let's see how it looks like this requires the page on. As you can see, this image are pretty Miss the big it also give me us call into my browser. So let's just take a look how the max height and Max with look like so undergo to mind, takes editor and go to my style search after this do you idea? I'm just ahead. I n g on into this I n g Let's just add Mex Hi, it was just add some corn pixel on Ah, max. With all that warranted Big sell and Sid the quiet goto our brother on because the fish now , as you can see, here we have this big size images on now string toe corn pixel in the corner, basil. So what this Mac side and Max with does is it does still the browser seeing those images on the 400 still hide and corn pixel with without changing their absolute CEO. As you can see here, it does not stretch the images. Just change the images give their absolute wrestle in your mind with the custom size that we are defined in the styles. This is the fun Between max height and next week, Max height and Max wheat are changing the aced email elements height and width without changing their obsequious you. So in this way you can use Mac Side and Max really to resize hissed email elements without changing their after Greece. You 14. Child Selectors In CSS3: So in this video we're gonna be look at child selector. So what is chance later? If I go to my index dot html here we have some estimate elements. Now in this elements take a look at this A steam attack under this HTML tag we have heard and body this head and body our child to this a stealer And this a steam ill are the parent for this head and body on in the head we have some meta tags Di dio a link This are the child to this hair tech on this head attack our parents dis Tex And for the same way under this body tech we have heading Hagrup deal on attack image This are child toe this border Take on this Borg attack of the pennant for this text. So this is the child and parents tag. Now we have to sugared this child tag using ceases. Let's see how we can do that Now, after this immense track I given enter on and create a heading to a stool then was that a school on in the heading pool is just died. This is heading through and I'm just gonna copy this whole heading to from here and based it right after it. And for this thing and hitting, do we just get a spandex and wrap this takes from here. Also, close the span tag and said the file goto our browser and request the page. As you can see, this is our two heading. But I want this second heading with a different color. So how I can do that, go to our next? Did he dio and go be aware styles it And in here we just type of what child selector for this heading to. So first we just type h two eight stew is targeting this heading to and equally just give ah color for this ace too. But he was something like a red color Save the file and go to our browser and differences a page. Now, as you can see this both heading on our it But I want this second heading on liberate So how I can do that and just go to my ceases file And after this ace to we just giver space on this type of good Then sign on, then type spin. So this still the brother search for a stew in the testimonial document and then search for the child Senator off span And then I apply this style. So in here the span is the chance selector for these ace to an ace To are the parents for this spend. And we can declare this child selector using this Gilligan Shine When you target the child selector cost, you want to type a parent name, then give us space and then type a good than sign and give us place on. Then tied the child name on then with a new style. So I'm just slip this file and go to our browser on Let's see what happening. I'm just load this speech and here is or heading to as we wanted. We want this second hitting Israel and the second hitting and now red because we're just targeting this second, heading only using our child selector. So the style will apply on this second heading on. So in this way you can use this child's director to style. Your estimate elements is incidences 15. What Is Pseudo Class In CSS3: So in this really, we're gonna be looking at pseudo classes, our studio elements. So what is studio classes and pseudo elements? I don't know why this is named as pseudo classes or pseudo elements because this is not affect enemy and this is the elements as like, the other one. So let's just apply this. Who'll classes into this two paragraphs here. So, first of all, I'm gonna go to my text editor on after this class on this given ender and just type he be four paragraphs on Ben. We need to type a semicolon. Then we need to die worst later and open and closing or curly bracket on in the Kali bracket listens. Type our stone. Let's just drive something like horned Wait Board on porn sighs. 40 picks. Still, it's too big, but it's okay. And then this night ah, color to read and save the file and go to our browser and repairs the pigeon. Let's see what happening now as Ercan see hair first letter off this bare ground on Now turn to read and it's size maybe a 40 pixel, as we can written in this trail seat. So in this way, we can apply a pseudo classes. First, you need to write the parents elements than a systemic alone. Then you need to write first letter or let's say you want to also right the coast. Line this toward the sewer element first later and the coast line so you can target first later or coast line off any paragraph or any heading or any ticks. So just sit the file and go to our brother on, because the pitch now, as you can see here we have our host line is to get boiled and it's a color is red and side this 40 pixels. It was Break this line after this ages because we give a wit horde this paragraph, which is 400 pixel. So when this paragraph takes his ex treat the 100 pixel with, it will break the line on the risk off the text from the next line. So in little, you can apply your pseudo classes to style, your esteem and elements using thesis 16. Creating Gradient Effect In CSS3: in this video, we're gonna we learn how to quit Grady in in CS is ingredient are pretty awesome. It look any Burton or any estimate elements look like fancy. So let's just play with the radiant in seizes. If you write Grady in court manually, it'll be painful for both of us knew on me also. So I'm just give you a short and sweet way to create excellence type of ingredients within just a few of your mouse. Click. So Costa. Call Goto the www dot color Zillow dot com slash greedy in hyphen. Editor on you will find this school. He will also find a bunch of Gideon editor or greedy in Creator or Gideon Generator. Just tied the name on the google dot com something called Gideon generated, and you will find a bunch bunch of results. There are lots of to like this, but this one is. I used an aisle to record that. So in here we just cleared those complicated guardian with just few month click. So first of all, here is some Crease it. We already see here. If I click on this place, said you can privy read on this preview skin. So let's say this brilliant. It looked like pretty good. You also can custom with this Korean by Click on this little arrows from here. If we can click on this arrow, it will give you a colors destruction than if you can click on this color. You can choose your custom color on anything as you want late quarter, so on. If you can select your location, you can also can create your Lucas. And as well as you can see, there is a locus and changing. So in this way you can change and create your own custom. Greedy INTs in this color zilla radian generator. I like this, uh, Brown Grady in here, which is pretty good on I'm just go to my text editor. And so, first of all, under screed, a separate aced email file to demonstrate this great an effect. Some just go to my project cooler Onda Skopje This on vested right after it on intend this to index happen position. Hi friend. Greedy INTs on record on this pile on. Open it in north back costless And I'm just removed this whole bunch of paragraphs from here because we don't need this in hair because we already have a separate file for this. So under the remove it from here and we just create a stim pill burden here. I'm just using this hasty milk white button tag. No, in here, we just type some picks. Let's start something like, Hi, I am Burton. Uh, it's look nice, then sit. Define. And also, we just add a class to this burden burden. Sweet and simple. You saved the file and go to our stance it. And after this fixed position, we just add the burden class open and closing or curly bracket honey Locally bracket. Let's just died. Corn color toe white on Google Lower color Zilla Gedeon generator on copy. This year's is court from here and just best it right after this color on sleep The fine That's it. Goto our put a cooler Onda will be gone. This Gary inquired Open this up in the browsers. Let's see how it looks like. And here is our burden. Guys, I'm just human. A little bit cool. It can be more clear to you guys and here is our burden. As you can see, here is our custom met Greedy in Britain on elegance. See, we have someone pixel broader right after this button because a steam mills pipe Parton Tech have borders around it. So we just simply remove it. Just go to over burden class and to remove this border. Just type border on just I none. Because we don't need any porter on this burden. Just save the file and go toe over. Browser on reports the page. Now our border are removed. And we just left with our Grady in Britain, as you can see, how pretty it is on how easily we can create it. So in this way you can create this type of Grady in effect not only on your button on any type of a steam, it'll elements as you want.