CSS And CSS3 For Modern Web Developer | Somenath Sen | Skillshare
Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
27 Lessons (2h 3m)
    • 1. Introduction

      1:17
    • 2. Setup Your Tools

      8:29
    • 3. Website File And Folder Structure

      1:35
    • 4. How To Create Your First CSS File

      2:19
    • 5. Write Internal CSS Style

      3:10
    • 6. Write External CSS Style

      3:55
    • 7. What is CSS Syntax?

      2:56
    • 8. Write CSS Comments

      1:52
    • 9. CSS3 Fonts Style Elements

      7:07
    • 10. Text Style Elements

      13:16
    • 11. Background Color And Image - Part 1

      5:39
    • 12. Background Color And Image - Part 2

      2:02
    • 13. CSS Class

      4:44
    • 14. CSS ID

      4:15
    • 15. CSS Margins

      5:17
    • 16. CSS Padding

      2:53
    • 17. CSS Border And Box Model

      4:21
    • 18. How To Style Hyperlinks

      6:59
    • 19. Height And Width

      2:09
    • 20. Max. Height and Max. Width

      3:36
    • 21. Child Selectors

      4:40
    • 22. Pseudo Class

      3:06
    • 23. Side By Side Boxes Using Float

      3:56
    • 24. Absolute Position

      6:42
    • 25. Relative Position

      5:03
    • 26. Fixed Position

      5:16
    • 27. Create Gradients In CSS

      6:16

About This Class

Maybe you already heard about CSS without really knowing what it is. CSS stand for Cascading Style Sheets. CSS is a style language that defines layout of HTML documents.

In this course you will learn about what CSS is and what it can do for you. we start with CSS syntax then move onto fonts, colours, margins, padding, lines, links, height, width, background images. We also take an in depth look at advanced positions like absolute position, relative position and fixed position. Also we look at how to create beautiful gradient effects and many other cool things.

After only a few lessons of this course you will be able to make your own style sheets using CSS to give your website a new great look and feel. I can't wait to show you how easy it is to begin writing CSS and how quickly that you're going to be authoring and creating your own style. Felling exsited, so then let's get started.

Topic Cover:

  • What is CSS ?
  • Understanding CSS style sheets.
  • What is css syntax ?
  • Exploring font properties.
  • Style using colours, margins, padding, lines.
  • How to style links with there states.
  • Height, width and max. height, max. width.
  • Learn difference between background color and images.
  • Advanced positions like absolute, relative, fixed.
  • How to create gradient color in css and much more.

Transcripts

1. Introduction: Maybe you already heard about ceases without really knowing water Teas sees a stand for cascading style. Sit seizes a style language that defined layout off HTML documents in the scores you will learn about awards seizes is and what is can do for you. We start with the syntax, then move on to foreign sculler margin padding line links, height with bag on image. We also taken in that look at advance position, like absolute precision related position and fixed position. Also, we look at how to create beautiful, greedy in effect and many other cool things. After only a few. Listen off this course, you will be able to make your own style. Sit using CSS toe, give you're website, a new great look and feel. I can't wait to show you how easy it is to begin writing ceases and how quickly that you are going to be Autorite ing and creating your own style feeling excited. So then let's get started 2. Setup Your Tools: before they started cording our estimate pages. We need some tools for doing, including First, we need a whip closer. If you are using Windows, then Internet Explorer will already install in your windows because Internet Explorer is the article frozen. But if you are using Mac Safari already installing your Mac, because so far he is a default browser in Mac. But in this course I recommended Google Crume because Google Chrome is pretty much lightweight fast on DSA Cure. But if you are familiar with Mozilla Firefox, you can download Mozilla Firefox as well. Firefox is also a damn good browser to start downloading Google Chrome Goto www dot google dot com On in the search box, type Google Big and click on the very first result. The Web address is www dot google dot com. Slask Room Now in the West Side, click on download in download page. You see a download Chrome Britain. Click on that button, click on Accept and Install Google com set up will downloading and after it download complete double click on it to install it. I'm skipping the step because I'm already installing Google Common using it, but believe me, it is very simple. Process to install Google Come in your mission. Just double click on the set of file on, Follow the instruction After downloading and install our brother. We also need a coordinator to read our core goto Not bad hyphen plus hyphen plus dot org. Or go to Google and I North Bad Plus Plus and click on the first result on the search in the note plus last was with Syed. First, let's check the North Plus Plus plus features. Click on the Features Link Over here. The very first creature is thin, just highlighting which is very important, not part plus plus. Also have features in user defined syntax. Ally Teen You I. Although competition what competition, function, competition and function Perimeters Hills Mighty documents. You can view multiple documents in not trust restless interface. Although there is option mighty view, you can view asthma's document as you can in no plus plus players. Also, you can ju mean and doom out your court. Multiple language support no matter what country, what religion you are, you can use note plus plus plus in your language. Also, you can record your macro and playback on also no prospects plus is lightweight and, of course, is 100% free and open source. So now click on the download button over here. In the download page, click on the very first link No plus plus plus in stroller. Download an installer in your machine. I'm just cancel it because I'm already download and install not for specialist, so I'm just keeping the step. But when you don't know, note plus plus plus installer does double click on it toe open the installer and follow the instruction to install new trustbusters in your machine. The second coordinator that I recommended is sub line text. Sublime text is pretty much good coordinator on support almost every type of programming language, but the blame takes is not free. You can download Sibling takes trial version by Click on this download for Windows Button over here, give you free 30 day stand. You can try it, and if you think supplying core editor is good for you, you can buy it as well. To buy sibling test, click on the piling on the top Sibling text cost $70 our license. You can buy multiple license as well by click on these the licenses for business. Burton, over here, choose your continuity. How many of license you want to buy? Here? You can get a discount for a Blunk purchase he fuel purchased 10 plus license. You can get $60 for license. You can buy 25 plus lessons. Then you can get. Then you get $55 per license. And if you buy 50 plus license, then you can get $50 for license. After explore your help. Your you can buy these if you want. The next quarterly dirt that I recommended is Komodo. Eric Humanoid is also a free and open source coordinator for Web developer, which also support of almost any type of programming language. You can click on this download button to download commemorated. You can download commander it and use it for free because it is open source and 100% 3 but co moderated. Also have upgraded version, which called Comodo i D. You can compare tomorrow idiot and comodo idee features over here as you can see Comotto idee or for more features than comodo ready. If you want to buy Comotto, I d click on the by and of great burden over here on in this page, you can see three type of licence for Comodo I d. Foster on his Commodore I. D. Personal, which costs $99 for license. Then the 2nd 1 is most popular and which called comodo I D. Which cost to $95 per license, which is pretty much costly on 31 is common Weide Core Team, which is $1615 far five. License, which is pretty much costly also. So if you want to buy Comotto, i d. Just to your license type and buy it. But I recommended Void the free one, which is Camano Idiot downloaded on. Use it. We know comfortable with it, then upgrade to Comodo i d version. The next quarter leader that I recommended is bracket goto brackets dot ru. So let's talk about bracket Bracket is another open source text editor on which is lovin bracket, is it understand? With design, as it say here, a modern open source text editor that understand what design What does that mean? That means you can open appears defile in bracket directly on bracket will generated sees this core for every layer in that year's different, which is pretty damn cool on. I love that feature. By downloading the bracket, click on this big download bracket button and don't know the bracket in your computer bracket. Also support Fiercest three processor Saxon List, which is a pretty damn cool creatures as well. All good support, Life preview and in Line a Leader, which is also good creatures. So if you're comfortable with bracket, you can download it and install it in your mission and use it. 3. Website File And Folder Structure: in this video, you gonna be learned Violin cooler structure off our website. So I'm in my project. Holer sees this project cooler on in this cooler. We're gonna be created some more coolers. So right, click on this colder and go to new and click on Fuller and rename this colder toe. See, Is this because we're going to restore our all seasons while in this colder? Now we need another holder called Jizz Jasmine Jealous Group. And in this corner, we're gonna be store our javascript script and we need another quarter hooches gold image. Some web developer or programmer are named this image cooler, something like I am G, which is a shorter home off image. But for this tutorial, I'm gonna using the full name, which is image on give Ender on in the season. Schooler, we need another quarter going fund where we can store our all with horns which will using to create this website. So this is the full a structure off our website 4. How To Create Your First CSS File: in this video, we're gonna be learned how to create our ceases file. So farcical. Open up your note pad plus plus and goto file and click on new When you click on new, you can see a tab like this and no goto file again and click on Save s Select your holder from hair And now in this quiet limb section name you'll see icis style And in the save s type option click on this job down and select from hair See, is this gets gets trail seat and gone Sue And now we can go toe or put it cooler And in the series is cooler We can see our seasons file style George seizes another way you can save this file, which is actually our first courses. First of all, I'm gonna just delete this file from here and right click on this cooler on go to the new and click on text document and in text document we just rename This takes document toe style and after that we just removed this door Txt extension and just type dot c s s on hit enter When you hit Enter a dialog box will pop up on it can asks you Are you sure you want to change it? Click on ISS on here Is he Here is our style door to Caesar's quien. As you can see in this type section, there is a casting get styles it document. So in this way you can create a season's file. 5. Write Internal CSS Style: 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 6. Write External CSS Style: 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. 7. 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. 8. Write CSS Comments: in this video, we're gonna be learned how to write. Sees this comment. So first of all, before this h one bag, you know, a stolen seat, I just get some enter on. So in hair, we just write a comment. So we need to open a slash then we need to add a stir when you were the star. As you can see, the whole court in this season's pile are turning into the green. That means the whole cord actor into the comment. So now Taipower Comment here, Let's die thes is herding one and then we need to close our comment. So we type star and then we just dive splice. So when we take this last, as you can see, our seizes core color are back to normal. That means the comments are ending here. So in this way we can type a seizes comment in Caesar's fine her first we need to open a slash s. Then we need to type a star, and then we need to type our comment. And then when you closed the comments, we need toe courses the same thing in opposite way. So first we need to type a star, and then we need to type us less, and that's it. So in this way we can type assist this comment in a scissors, Klein. 9. CSS3 Fonts Style Elements: 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 10. Text Style Elements: 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. 11. Background Color And 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. 12. Background Color And 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. 13. CSS Class: in this video, we're gonna be learned ceases class. So what is is this class serious? Is class is a property that we used to style the same esteem. Ill elements, weaving different style. So let's in. We have here two paragraphs just copy this better. I grew up and basted right after it and save the file and go to our brother and just repress the page and let's see what's happening. And now, as we can see, we have ah second paragraph with the same style with the first paragraph. But I don't need this. I want a different style for the second paragraph. So how I can do that? I use the class property to use the different style in the second paragraph. So let's see how we can do that. I'm just going to my text editor. Andi. Just do some little changes in this paragraph. So it looked like a two paragraph. Let's it this this paragraph one on this is that's what the NYT's and said the while and in the battle up drag, we just add attribute called Class equal to double Condition on In the double condition. We just need a name for discuss. So let's say this is, uh, grip one, and we need another class for the second paragraph as well. And let's just give this second paragraph class name to pair up to because this is the paragraph two and saved the fine. And now we need toe goto the style sit. And after these general paragraph tech, I just had our coast plants who just add that girl one and one more thing. Guys, when you add a class in styles it you need to add a daughter before the classmate. But when you add the class attribute in your esteem ill elements, you don't need to pull any doors. As you can see here, we don't put any doors in this class attributes. We just put the name off the class, but when you digger this class using sis's you knew toe, add that little daughter before the class name. Then we need to open our curly bracket and closer curly bracket on India curly bracket. We just right something like, let's say we need a different background color court, this two paragraph so just type background color. We need first paragraph begun color as green and for the same way. We just copy this whole ish less from here and pester tried after it and just change this farrago of one to pack up to because we trigger the second paragraph which name is back up to on. We just changed this bag on color toe green, toe blue and said the file. Then goto our browser on din, repress the page and let's see what's happening and when you referred the page. As you can see, the two paragraphs are now different background color. One is green, as we can mention in this ceases file. We need paragraph one dragon color as green and other one is blue, as we mentioned in this season's while, we need second paragraph back on color as blue. So in this way you can use class property to style the same a steam l element using different style 14. CSS ID: in this video, we're gonna be land Sea assist I d syriza's idee are similar to thesis classes. But what? I have a different purpose for that. So, first of all, I'm just create toe lives there, so it will be better understanding to your ways this creator was give do and close the deal . Um, copy this. Holy live on. Vested. Right of good. Andi, hope some content in this def. Something like this is Do this one that similar to panda, This is Dave to Doesn't look good. No, on also, I just give a lang brick for Because Racine, you saved the file and go to our brother and is the pitch. Now here is our give on. And here is our gift to now when I goto my text editor on goto my style shit. And when I have to style this two days isn't a different style. Let's say I want this cost. Def content Color is red. And second, if content color is green. So how I can figure those two lives in two different style in seizes, as I said recorded the similar to classes, but ideas and classes have different purpose for that So this just type our host hiding so similar to classes. Just type I d and then equal to indoor mint condition on in the double condition this type Deve one Andi in the stricken deals Just give the I d on d n equals two level condition on den type this to now we have our two ideas, which is the one and if to now let's just go go astray and shoot. And this type of work Who ideas here After this paragraph two class I'm just leave or enter on type our first div do you one? But you want to type? Ah, Hessen. It's similar to class. When you type a class name, you have to type a dot shine Behold the last name Onda we knew didn't Ah, I d you have to write Ah, half sign before died in him. Then we have opened our curly bracket on in the curly bracket. Let's just type color to rid on a similar for the i D to which is deep too. Just change this D wanted if two on change the color too grin. Save the fine and go to our brother and refers the pitch. Now, as you can see, our first deep I'm just human a little bit so it can be more clear to you guys. So as you can see, our cost deal is now a color in red on our second ive is now collectible green as we can written in the style suit. So in this way, you can create gives on style Estivill elements using dips. 15. CSS 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 16. CSS 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 17. CSS Border And Box Model: 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. 18. How To Style Hyperlinks: So in this video you're gonna be learned how to style a link. Now he goes, That's me, Link. I know how to create a link. It will create using anchor decks, but not so easy like that. When you create a link, he will create Ah, four different state for that link a normal state. Ah, Homo stated Active stood and ability instead. So in this video, we're gonna be style those state style this course state off the link using ceases. So I'm just going to my esteem and file on after this deep bag and just give up. Enter on Type E Equal and Curtis on each of years, the cool do double condition the condition. Let's drive suited be and being dot com on for the chicks. Just course through, uh dot com website and close the anchor diggers will no save the file and go to our brother on with the piece. Now here is our link. Let's go door text editor and add a line break up to this Steve so it could be more clear and prominent to you guys said the file on Goto our browser because the page now here is our link, as you can see here, if I horror on it, it was so being dot com on the bottom left corner. So let's just go to our takes. A leader on Google docs is under style. Those link the first state for the link is the normal or the defaulted. So, Liz, this type he before ankle sticks on. Then just give us semicolon on type link. As you can see, we just tied the property. Andi then tied the state. This is not the property. This is the street, and this is not the value as well. This is the property is the property, and context is the property, and this link is the straight for this tank attack. So this open including or curly bracket on and indignantly bracket list. The strike first thing is color and make the color. Let's say Green said the file, and go to our brother on because the fish now, as you can see our link color, are link default color on now green. Now what you are next, a teacher on Let's type one more stitch, which is e semi colon, then who are on and open and closing a war curly bracket. And in the curly bracket, let's type. First thing is color. Let's make the color is orange. Um, one more thing we need to add is formed, which on we need toe heard boy and save the file. Goto our browser on. Just replace the pitch and lift. See how it looks like. And as you can see, the link color is the green. And when I, who are on the link now the color of the link are turned toe orange and the stakes are going to be bold. And now we need to add another street. Hey, Michelman on now we need to add Villagers and no, let's say, Just change the color too, right? So when I click on this link and visit the website that link color are trying to read the little, said the file, and go to our brother and refuse the page. And as you can see when I click on this link, it goto the being dot com which side on when I back to the webpage. And now, as you can see, the link color are turned to read because this link I already visited and I add a property in ceases. When I visit this link, the color are going to be right. And that was happening in hair. I already visited this being dot com website, so the color turned to read. So Liz is add another street called Active. So just i e. Semicolon active and whatever I have to do is just changed the color. Do blue save the file goto our brother. And because the pitch no, take a look at this link when I over on it and click the link. So when I click the link, it will go to the active state on the color will go to the blue, and when I released the click, it will go to the being dot com with state. So in this way you can style a link in their different state use instances. 19. Height And Width: 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 . 20. Max. Height and Max. Width: 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 21. Child Selectors: 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 22. Pseudo Class: 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 23. Side By Side Boxes Using Float: in this video, we're gonna be look at how to create side by side boxes using float So first of all, in our in its stock based email after this age too, I'm just day death Close this the first on in the do list Die this IHS more works one and get this deal a class. Let's a box one on. Um, this copied is horrid. Give on bested right of great and also changed this Sligon dips class name toe box two on also in hair box too and said the find on and good wa style seat on after this paragraph who just type VOCs one Andi, then the costing you need to pay is give it a bag on cutter. Let's make it green, then give you the height and width. That's a full 50 pick. So also give up with two who did excel on. Now I'm just copy this whole box of one class on festered right after it and change this box one toe box. Who and change the background color green toe blue and saved the fight. Goto our brother and replace the pitch. Now we have two boxes. One is books one and other one is box two. I want these boxes on side by side, not one by one. So how I can do that? I can do that Using the floor property. Some just go to my text editor on in tow. A style seed first in the box one classes. I'm just heard. What? School lift. And in the box surpluses. I had the float right on civically good over browser and refers the pitch. Now, as you can see, we have these two boxes on now side by side, because the float property will remove the extra spaces. And on this element, Andi, when I exclude left the float left property will pose this box one element in the left hand side and the float right property. Pull this box to element in the right hand side and hence there is no space in between this element. This two elements are now side by side. So in this way we can use this floor property to make side by side element in a steamer 24. Absolute Position: ceases help you to position your estimate element. You can put any sterile elements at whatever location you like. There are three type of position in CS. Is that use competition or is Tamil elements, which is one is absolute precision. Sticking one is really equation on. The 3rd 1 is the fixed vision. So in this video, we're gonna be Look at the absolute question because we want to do that. I'm just go to my project holder on to create a new esteem milk wile to demonstrate this ceases position. So it will be better toe understanding you guys. I'm just copied is a steam ill document from here and basted right after it. And rename this to in next high Quran tradition and red click on this file and open it in notepad plus plus. Now, in this while I'm going to remove this whole bunch of stuff from here because we already have this elements in our index not estimable file. So we do not need this in hair. We just demonstrate our syriza's position elements in this estimate. Fine. So first of all, I'm gonna open a deal. He wrote a class. Let's say John closer give and be doing the deal. Let's just dive something high. My live is John. And copy this deep on. Pissed it right of great on change the class school. No. And also changed the name to kind of sleep The file and Garbo our thesis coil. And after this books to class I'm just add the classical June and let's just add something like a border that said border something like hope Hicks still make it larger So it will be more care to you guys Solid on Give it a color toe green semicolon on. Then we just die tradition on in the position property we just tied The value is absolute. Um, let's give the wheat and height. Also, we do 2 50 pixels and like a high do so 70 pixel Also give up margin door straight 2 50 pixel. Um, margin left school. That's so 70 pipe pics of Save the file and go go over Project cooler on goal kick on this file. Open this up in the browser and let's see how it looked like. So here is our host deep, which is John, and we have solid skin color for pixel border founded. So let's do some styling with Steve as well. So this copy this whole bunch up court from here and pasted right after it and changed the classman toe. And, uh, on all the changes the border color to red, whatever color you want and position is absolute. Make the top merging off 30 pixel on on the left, marginalised 55 pixels and save the file on this is good or browser and rippers the page and see what happening now, As you can see here, if I was human a little bit, so it can be more clear and readable. Two days, as you can see here Now our to Dave's are overlapping toe each other. So this is the absolute position. When you apply the absolute position on a HTML element, it will does not care about any other element on that Whippets. It's just position those element on the absolutely what you're typing on your ceases. As you can see here, the second do which is call Anna our position absolutely on the 30 picks, their top and 55 pixel left. It does not care. There is another DIF called Joan on its way. It just overlapping the Joan element and position excelled on the absolute way So you can use this property toe position. You're a steam l elements on the absolutely whatever you want. 25. Relative Position: in the previous video. We'll learn absolute question on in this video. We learn the real equation, the host of all. I'm gonna go to my project holer and create another workable copy for these estimable document renal. This Index seven. Position to index. Type in petition, hyphen. Absolute on. Change this in next hyping position. Have a copy toe in next. Eichmann Pollution Hyphen. Well, it is and record on this file and open this of in not close list. Okay, Now, just remove this Dee from here on type A better girl. Let's say this is one and copy this paragraph because some couple of pen 1234 is good. So to stand this number two go three four. And in the second paragraph, this just I heard a class. I just heard something like better to. Okay, no, just good war overseas is file and add the class pair too. Openwork early Brecher and closing Arculli bracket on in Nikolay bracket. This is copy this whole I think from the classical Anna and vested in the bear to class. And we're just moved this height and width property because we don't need this in hair on business change this top motion toe save 15 picks l on from left margin to let's say something like Dixon and said the fight so possible I'm gonna show you if I give this paragraph by absolute position how it looked like then I will change this absolute position , toe really position and also show you guys how it looked like, So it will be better to understanding those two positions separately in front of you. So first of all and just said this file and go to our put a cooler and double look on this file. Open this up in the browser. I'm gonna zoom in a little bit so it can be more clear, Clear ways now, as you can see, when we can apply the absolute precision It was the absolutely position This paragraph margin 15 pixel talk on eight pixel from left. So I'm gonna go to my text editor and this change this absolute position toe really And said the file and goto our browser on records the page And now let's see what happening. So when a difference, the pain now is going to see this paragraph on now a little bit of more down from the previous one. So why this was happened? Because this is now the really Parisian. When we apply the absolute push in on this paragraph, it will count the talk Krypton pixel, form the top right corner, right home, this dork. And when we apply the related equation for this paragraph, it will count it off. 15 picks ill where the first paragraph were ending. Really? Depression are counted margins or spacing right after where the previous estimate elements are ending. So in this case, when you had the related equation for this thing in paragraph, it will count the tall, stripped in pixels face right after where the cost Bagach who were indeed. So this is the difference for this to tradition on. In the next video, we'll learn about the fixed portion. So in this way, can he Was this positioning in a stable elements? Esther, as your need using ceases 26. Fixed Position: So in this video, we're gonna be learn something called a fixed position. So in our previous video, we will learn how to create related creation and how to care. Absolute position now, in this video is gonna be learn how toke it fixed position. So, first of all, I'm gonna go to my project. Fuller on. Just copy this file. Come here and vested right after it to create a walkable copy on change the name toe. Next type in petition. Hi, friend. Fixed on right Click on this vile and open it in north. But plus plus. And now, before we went to do some experiment using fixed positions for Costa call, I'm gonna create some couple of paragraph here. We already have some paragraph here. So we just European best This constable on just removed this class because we don't need it in hair on. Just copy the school paragraph some couple of more times, so it will be look nice. And also give us a school in our browser, so it will be better to understanding the explosion. Now sleep the while on Goto our but a cooler. And I want to go on this wild open is up in the browser and let's see how it looks like. Now, as you can see, we have some couple of paragraph here. I'm gonna zoom in a little bit so it can be more clear and visible to you guys. Now, as you can see here we have some couple of paragraphs there on. Let's try the six question on this third bagger. So I'm gonna go to my dexterity here and in this heart Bagger up. I'm just aired. And us, we could do the will condition on give you the class name something like fixed because we're recruiting this class for off the explosion. So fixed name is the perfect court. So let's go to our stance it. And after this, better to class just give enter on just tied our class fixed on opening, closing or curly bracket in the curly bracket list. Type our border. I'm just do it wanting. Just copy this whole bunch of court from this better to class and tested on this fixed glass and just change this position to related toe on for the top. I'm just give When did pick Sue Emergen on from the left on just give prettified pixel margins. So it looked greater. Just save the file and go to our brother and just replace the pitch. Now, as you can see, here we have our could bagged up hair which we just apply our fixed question. So just watch carefully when a school a page on what happening in this paragraph As you can see her, this is the magic off the fixed position. So this is how the fixed position is work. When you apply a fixed position on a element this can now fixed on that particular area on whatever you move the page or school lipid, it does not care about anything is just fixed on this particular area. As you can see here. If I school lapis, the paragraph is still on there on equal try absolute or reality position. On this paragraph, it will scroll out to the bridge. But this is happening because we apply the fixed position on this paragraph. Expedition are fixed the position off the element that we applied the fixed position for and it will stick on the place that we can decide. So it does not care about just anything If I school Lepage, Or if I moved the page or whatever, I want it. Just stick on that portion that I've wanted to. So this is the magic for the fixed position. You can use this expedition as far as your project need to style. Your estimable element using CS is 27. Create Gradients In CSS: 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.