CSS in 1 hour 🎨 (𝙁𝙧𝙚𝙚)

hey what's going on everybody it's you bro hope you're doing well and in this video i'm going to teach you guys everything you need to know to get started using css so sit back relax and enjoy the show if you wouldn't mind please like comment and subscribe one like equals one prayer for the youtube algorithm okay let's do this css css is an acronym for cascading style sheets it's defined as a style sheet language used for describing the presentation of a document written in a markup language such as html i stole that definition from wikipedia i like to think of building a website very similar to building a house we need three things structure style and functionality we can use html for structure this would be like the skeleton the frame of our house with css we can add styles such as colors decorations lighting and with javascript we can add functionality in our house analogy this would be similar to plumbing heating electricity but in this video we're going to focus on style now to work with css you'll need a text editor i just so happen to be using vs code so let's jump over to that here we are within vs code or some other text editor that you prefer so you'll need an html document to work with if you don't have one just go to new file and then you can create one just make sure the extension ends with html there are three ways in which we can apply css properties to html elements inline internal or external external works the best especially if you have a large website we'll need some sample text to work with so let's create a title for this webpage using a pair of h1 header tags this is my website and let's create maybe four paragraphs as well so these are in pairs of p tags and we'll need some sample text if you need some sample text type lorem and then tab to generate some sample text so let's copy that line and paste it three additional times okay there we go so we can apply css inline so whatever element you would like to apply css properties to within the opening tag you would set the style attribute equal to some css properties within quotes let's say that i would like to change the background color of my webpage so within the opening body element i will set the style attribute equal to one or many css properties let's change the background color so type background color colon and then end it with a semicolon and then we will list either a color name like black you can use rgb values and these come in groups of three so black would be three zeros so depending on what values you have here this will change the color or there's hexadecimal values hexadecimal values are preceded with a hashtag and there are six digits that follow so black is 60 rows where white is six f's but you can always look up a color picker and then just copy the values after you find a color that you like it's a lot easier perhaps we would like a black background so i'll just keep this simple and use color names instead but you can use rgb values and hexadecimal values okay now i would like to make my h1 header tag white so i will set the style attribute equal to the color property this time color is for the font color background color is for well the background color so color white now with our paragraph tags let's apply more than one css property so let's set the style equal to and list whatever properties you would like to apply within double quotes and then separate each with a semicolon uh let's begin with the background color let's make this maybe gray and let's change the color to what about white then i'm just going to copy the style attribute and paste it for each of these paragraphs this is somewhat redundant but there's an easier way of doing this with internal style sheets to apply an internal style sheet within the head of your html document you'll need a pair of style tags whatever element you would like to apply css properties to you will list that element for example the body then follow that with a pair of curly braces then you will type the name of a css property like background color and set it to some value like black and then we no longer need this style attribute there we go you may need to save and refresh this time let's apply css to the h1 header tag via an internal style sheet uh so let's copy this value and get rid of it okay this time we would like to change our h1 header tags so list that here within our style element h1 curly braces list any css properties within the curly braces color white and we'll do the same thing with our paragraph tags so let's get rid of these so type p curly braces and then we will paste the css properties so you can apply more than one css property just place them within the curly braces so there we go and you can see that this is a lot less redundant instead of making all of the changes in line you can place them within an internal style sheet now the last method which i think is the best method is an external style sheet so we will create a new css file so i'm going to right click go to new file let's name this style.css i'm going to copy everything within my style element and then get rid of our style elements tags and within the style sheet we will paste everything that we just copied now we just need to link our html file with our css file and to do that within the head tag we will type link rel equals rel is an attribute that names a relationship of the linked document to the current document so rel will be stylesheet then set the href attribute equal to the relative file path of your css file they're right next to each other i only need to list the file name there we go we have applied css properties via an external style sheet and this is the preferred way of doing things so you can reuse this one style sheet for many different html pages so let's say that we create a new html document like page2.html by the way if you need to generate the body of your html document if you're using vs code you can type exclamation point and then tab let's create a really quick html document for page two this is page two and then i'll create two paragraphs let's say okay i'm going to open page 2 with live server and take a look page 2 does not have any css filing but we can reuse the same css file all we have to do is link our html file with our css file within the header element i am just going to make that link so this is really convenient if you have to make any changes to your website let's say that you need to make all of the pages on your website instead of the background color black let's say maybe gray well you can just make that change here and that one change will apply to all of your html documents so you only need to make that change in one place that's why external style sheets are really useful one unique feature of css is that we can target any specific element by id or a class that they may be in any element that has these names will have these styles but what if i would like maybe one of these paragraphs to have a different font color i can give one of these paragraphs a unique id so within the opening tag i will set the id attribute equal to a unique identifier let's say p1 because it's well the first paragraph so then to target that specific id i will type hashtag that id and let's set the color equal to what about tomato now for practice let's give each of these a unique id let's say p1 p2 p3 and p4 if we need to change p2's color to tomato well then we target p2 what about p3 just change the id to p3 and then p4 so you can target a specific element by id you just have to be sure to fill out that id attribute or you can target anything within the same class a class is like a group in this example let's say that all odd numbered paragraphs should be read all even-numbered paragraphs should be blue so i'm going to instead give these each a class you can keep the ids if you want to so type class equals the first paragraph will be odd class odd the second paragraph will be class even then odd and even so to target elements by a class you type dot the name of the class so anything within the odd class let's say we'll have a color of red and i'm going to get rid of this tomato color our first paragraph is within the odd class the same applies with our third paragraph and then i would like to make any elements within the even class blue color blue so our second paragraph is blue and our fourth paragraph is blue so yeah everybody that is a quick introduction to css it means cascading stylesheets we can apply css properties in one of three ways inline internal or external in this series we will be using external style sheets so yeah that's a quick introduction to css if you found this video helpful you can help me out by smashing that like button leave a random comment down below and subscribe if you'd like to become a fellow bro hey it's you bro hope you're doing well and in this video i'm going to demonstrate how we can change font styles using css so sit back relax and enjoy the show if you find this video helpful please remember to like comment and subscribe your support will help keep this channel running hey uh let's get started with fonts to change the font family there is a font family property now with fonts sans serif fonts tend to look better on the web there is a generic sans serif font that you can use now what you commonly see with font families many people list more than one value for their font family and there's a good reason for this so i'm going to list two fonts one font that i'm fond of is consoles so in case a web browser doesn't support this font it will use the next best font available so people tend to list either two or three fonts for a font family these are sort of like contingencies in case the first one doesn't work now a good resource for open source fonts is fonts.google.com let's take a look at this so you can search for any fonts that you may want to use one font that i do like is press start to p if i would like to use this font i just need the style sheet so i will select the style otherwise you can download the family go to view your selected families and copy this link then within the head of my html document i will paste that link let's head back to our style sheet so i will change the header of my webpage so within my h1 header tag i will list the font family property and set this to the name of this font press start to p and you don't necessarily have to use this specific font you can really use whatever fonts that you like and if i take a look at my web page it now is using that font and just as a contingency if a web browser doesn't support this font i can list a backup let's list console us for the contingency then maybe sans serif so you can list more than one font family just in case the first one doesn't work then a web browser will use the second one if that doesn't work then the third one here's a couple other things you can do with fonts you can set the font style to italic you can change the font weight there's bold lighter you can select a value let's pick bold you can set a text decoration this is an underline uh let's pick underline and there's various adjectives you can add to your underline like wavy or dotted you can also select a color for the text decoration like maybe cyan so you can also change the font size as well let's pick maybe 18 pixels for the font size well ladies and gentlemen that is how to change the font of your web page using css if you found this video helpful you can help me out by smashing that like button leave random comments down below and subscribe if you'd like to become a fellow bro hey uh welcome back in this video i'm gonna show you how we can add borders to html elements so to create a border we need to set a border style well the default is none but let's set this to maybe solid for a solid line there's a couple other styles too like dashed dotted double ridge groove inset and outset we can change the border width by setting the border width property to some amount of pixels maybe five you can change the border color border dash color and pick a color i like gold let's stick with gold you can round to the corners by setting a border radius border dash radius the higher the number the smoother the rounding and i would like to add a little bit of spacing between my letters and my border so i can add some padding so we have a little bit of spacing between our text and our border now let's change our h1 header tag you can specify a border side such as top bottom left right border so we have bottom top left right i will set the border top style to maybe dotted i'll do the same thing with the bottom because i think it'll look cool and maybe the left side as well border left style let's make this i don't know double with the width color and radius you can also specify a side as well so let's change specifically the left border border dash left width and i'll set this to 10 pixels and i'll change the color to border left color i like silver let's pick that so yeah that's how to add borders to html elements whatever element you would like to add a border to you can set a given style and we covered a few of them solid is a very basic border you can change the width color radius and you can add padding and you do have the capability to change specific sides of the border such as top bottom left right so yeah everybody that's how to customize borders using css if you found this video helpful you can help me out by smashing that like button leave a random comment down below and subscribe if you'd like to become a fellow bro hey what's going on everybody it's you bro hope you're doing well and in this video i'm going to show you a few useful things we can do with backgrounds using css so sit back relax and enjoy the show hey welcome back so in this video i'm going to show you how we can change the background color set a linear gradient and how we can set an image as our background so like we discussed in previous videos you can set the background color by changing the background color property and set this to some color of your choosing now another option is to set a linear gradient the property name is background and the value is linear gradient and within the parentheses you can add two or more colors perhaps sky blue and light green that's kind of nice but unfortunately this background repeats itself once it reaches the last element so we can actually change that with another property and to change that we can set the background repeat property to a value of no repeat here's another issue now we have all of this white space after our last element so there is another property if we would like to stretch this background background attachment and the value is fixed so we can resize this window add the background will adjust dynamically we can change the direction in which the colors head so we will precede our colors with two either top bottom left or right so two top would reverse these colors so green is at the top blue is at the bottom or to left or to right pretty cool right so this time i'm going to apply these colors to the h1 header tag as well as the ptag so the background of these elements is this linear gradient but not the background of the body of our html document i'm gonna change this color from light green to white for both and with the p tag let's say two left instead okay now this is how we can set an image as our background so find an image that you like here's a picture of central park and i placed this image along with my index.html file as well as my css file so i will set the background image to a value of url you can place an external url in here but since these files are right next to each other i only have to list the file name my background dot jpg but this is probably going to be a different name for you okay so this image is gigantic i'm going to copy background repeat and background attachment and i will set the background position to center but then i would like this image to expand and shrink based on the size of the window so there's one more property that we need and that is background size and we will set this to cover okay now if i resize this window this image will resize dynamically so yeah everybody that's a little bit about backgrounds using css you can set a background color you can set the background to a linear gradient and you can even set an image as your background so yeah those are a few things you can do to change the background using css if you found this video helpful you can help me out by smashing that like button leave random comments down below and subscribe if you'd like to become a fellow bro hey welcome back margins margins are the space around an element here's what we're gonna do we're going to create two boxes i'll use a div element and give this development an id of box one and let's do the same thing for box two but change one to two and within each box we will generate some random content so type lorem and then tab to generate some sample text and do the same thing for box two okay that's everything we'll need within our html document within our css document let's style both of our boxes so let's begin with box one and we'll just copy everything over to box two so i would like a border of five pixels solid a width of 250 a height of 250. let's change the font size to 22 pixels and change the background pick a background color that you like okay let's copy this and paste it for box two so change box one to box two and i would recommend picking a different color okay we have box one and box two margins are the space around an element you can see that we naturally have a little bit of margin between these boxes the body element of our document has about 8 pixels worth of margin and let's take a look at that so i'm going to style our body and add a border maybe 2 pixel solid this is the boundary of our body wherever this border is so we have 8 pixels of margin outside of our border we can actually get rid of that so that these boxes are touching the sides of the viewport by setting margin within our body to zero pixels and these boxes are now touching the sides of our viewport so margin is the space around an element but margin is easily confused with padding padding is the space between the content and the border for example i'll add 10 pixels worth of padding to box one this space between the content and the border is padding and i'll just casually increase the padding just so it's more visible this space between the content and the border is padding it's easily confused with margin now margin is the space outside of a border we can select margin top bottom left right let's begin with top margin top i'll set this to 50 pixels so we're saying at the top of this element add 50 pixels worth of margin this element along with any elements underneath it will be pushed down by 50 pixels likewise i can apply this to the left and this will push this element 50 pixels to the left same thing goes with the bottom any elements underneath this margin will be pushed by this amount and there's also margin right but there's nothing to the right of this element because it is a block level element if i need to apply some amount of margin all around an element i can just say margin then that amount 50 and then we don't need four separate lines this would do the same thing in one line you can use percentages instead of pixels so that way when you resize this window it resizes dynamically so if i were to set margin left to 50 this margin will use up as much space as 50 of the width of our window okay one trick if you need this element to stick to the right hand side of your window you can set margin to auto and the margin on the left hand side will be automatically calculated so it's going to push this element to the right this will all be margin and likewise you can do the same thing with margin right then this element will stick to the left-hand side because the margin on the right is taking up all the space on the right side of this element here's a trick if you set both margin left and margin right to auto then this element will stay horizontally centered in the middle of your document so yeah that's a little bit about margins and if you ever forget how margins work if you right click on an element then go to inspect there will be a diagram right here so it shows that our content is 250 by 250 any padding if there is any the width of the border and the width of the margin and here are the values so yeah that's a little bit about margins it is the space around an element so yeah those are margins if you found this video helpful you can help me out by smashing that like button leave a random comment down below and subscribe if you'd like to become a fellow bro hey uh let's talk about the float property the float property positions an element to the left or right side of a container it's popular for wrapping elements around images in this brief example i have three images and two paragraph elements i think this would look a lot better if this text wrapped around these images so what i could do is that whatever element i would like to select i can apply a float property any elements that are floating are taken out of the normal flow of a document and all elements that follow after will wrap around them by setting my images to float left all images will gravitate towards the top left corner of my document it's as if we're reading them from left to right or we could float right then we're reading this right to left let me give you a different example images are inline elements here's a different example with block level elements this time we will create three boxes using a pair of div tags let's set the class equal to box we will have box one box two and box three and let's create some sample text create a pair of paragraph tags i'll type lorem and then tab to generate some sample text copy this paragraph and paste it two additional times let's say okay let's style our boxes so to select a class type dot then the name of the class so let's create some boxes the width will be 100 pixels the height will be 100. let's give this a border of 1 pixel solid change the font size to something readable like 40 pixels i'll text align center and let's change the color background select a color i'll pick tomato because i like tomatoes divs are block level elements after each element the entire width of our viewport is reserved to display this element so if i give our class box the float property it will be taken out of the normal flow of a document and all elements that follow after will also follow that pattern so they will float and wrap around any elements from left to right top to bottom if we're using left or this was float right it will be red right to left top to bottom if you would like a stopping point where your elements are no longer floating you can use the clear property so let's say with our paragraph tags i would like this text to stop floating i will use the clear property and set this to left if we're floating left or to the right if we're floating right or you can set this to both so yeah basically speaking with the float property it positions an element to the left or right side of a container and it's popular for wrapping elements around images if you need to stop floating you can use the clear property which is what we did here so yeah that is the float property if you found this video helpful you can help me out by smashing that like button leave random comments down below and subscribe if you'd like to become a fellow bro hey yeah let's talk about css positioning let's begin by creating two boxes i'll use a div element let's name this first box box one and create a second box box two let's also create a whole lot of paragraphs because we'll want a scroll bar so if you need some sample text you can type lorem and then tab okay so copy this line and paste it maybe like 10 times that should be good enough and let's copy all of these paragraphs and paste them underneath our boxes doesn't really matter how many you have we just need a lot of room to work with okay let's design these two boxes now that we have a lot of sample text let's begin with box one i'll give this a border of one pixel solid a height of 300 pixels a width of 300 pixels and pick a background color any color is fine now let's style box two and we'll make this smaller 100 by 100 and a different color i like tomatoes so there is a position property where we can format the layout of an element there's five that we'll discuss absolute fixed relative static and sticky static is easy that's the default any element that is positioned statically is in its normal state so there's no change here now relative we can move this element relative to some point of origin the point of origin of box one our blue box is the top left corner and there are offsets top bottom left and right if i would like to displace this element down and to the right by 50 pixels i can set the top offset to 50 pixels or some other unit of measurement and then offset it from the left by 50 pixels as well so this does create an empty vacuum of where this element was so think of this as a reserved space take a look at this what if i were to set top and left to an even greater number like 150 this element will cover other elements underneath so that's something you need to take into consideration or we could do the same thing with box two now box two is displaced and this corner the top left corner is the point of origin okay now let's discuss absolute positioning any element that is positioned absolutely will be taken out of the flow of the document so with box 2 let's set the position to absolute so you probably noticed that all of this text is running underneath this element it's as if our document is ignoring box two it's kind of like it's ethereal or a ghost or something and if i were to set a position i'll set the top to zero then this box appears at the top of our document and here's the reason why any element that is absolutely positioned will search for any parents that are positioned non-statically if it does not have a parent it will instead use the viewport we're setting the point of origin for box 2 to the top left corner of our webpage because it doesn't have any direct parents that are positioned non-statically now if i set top to 150 pixels then the point of origin is the top left corner still and it will be pushed down by 150 pixels and maybe to the left by 150 pixels as well what if i would like box 2 to be positioned in the center of box one okay what i'm going to do is make box 2 a child of box 1 by placing box 2 within box 1. however box 1 is positioned statically that's the default so i will set the position to maybe let's say relative and let's uh set top to 100 and left to 100 there box 2 is now within the center and the cool thing about this is that if i move box 1 box 2 will follow and stay in that same place it's positioned absolutely so let's set the left offset to maybe 250 there and box 2 is staying in the same place then maybe the top by 250 as well that's kind of the idea behind absolute positioning it searches for a parent that is positioned non-statically such as relative or some of the other positions i'm about to discuss if it doesn't find a parent it uses the viewport so we'll keep box 2 right there next we have fixed fixed will stay in position of your viewport so even when you scroll it's going to stay wherever you set it uh let's set this in the top right corner so top zero pixels and right zero pixels so this box will stay in the top right corner of my viewport so that is fixed and lastly we have sticky anything that has a sticky position will stick to an edge of your viewport when you scroll past so if i set this to top then this element is going to stick to the top when we scroll down past it but currently it's in its normal place but when i scroll past it will stick to the top of my viewport and then when i scroll up past it it will snap back into place or we can set this to the bottom when i scroll up past this element it will stick to the bottom then snap back into place or we could combine them both so if i scroll down past this element it will stick to the top if i scroll up past the element it will stick to the bottom so that is the sticky position so yeah everybody those are a few positions in css if this video helped you out you can help me out by smashing that like button leave random comments down below and subscribe if you'd like to become a fellow bro hey pseudo classes a pseudo class is a keyword added to a selector that specifies a special state of the selected elements what the heck does that mean so with elements elements can be in a special state like if you hover over them you click on them things of that nature so let's create a hyperlink for this first example let's create a hyperlink that will take us to google because i can't think of anything else at the moment so let's set the href attribute equal to the url for google by default this hyperlink is blue but we can actually change that type the element you would like to change the css properties of followed by a colon and then we have access to all of these pseudo classes so a pseudo class is a special state so anything that is a link let's change maybe the color color what about lawn green i guess anything that is using an a element that is a link is now lawn green so if i click on this link it takes me to google anything that's visited is also another state a pseudo class and the default color is purple let's change that to a colon the pseudo class is visited maybe gray for the color like it's been disabled so the color is now gray since we've already visited this link what if we hover our cursor over this link that is another state a hover color what about tomato i like tomatoes so by hovering my cursor over this link the state of this element is now hover and these css properties will apply when this element is within this state and there's another useful one for hyperlinks and that is active if we were to hold down our mouse over this element then let's change the color to what about i don't know yellow so with active if i hold down the mouse then this link is active it's within the active state now let's create a button this time button click me so anything that's a button we'll use the pseudo class of hover this time and let's change the color to light gray so by hovering my mouse over this button it's going to change the color let's make that background color actually background color if you have a navigation bar or menu bar setup it's actually fairly useful to have the background color change based on what the user is hovering over to let them know that they can select something let's change the active pseudo class four buttons as well uh let's say if we click on this then it will be white cool all right here's another we'll need a list it doesn't matter what kind of list i'll just make an unordered list and let's add 10 list item elements this next pseudo class is really useful it is the m child pseudo class so with these list items i would like to change the background of selected elements think of a child as an element within an element so these list items are all siblings and what we're going to do is change the background color of a few selected elements we will select our list item and say that the nth child will be will have a background color of yellow as if we're selecting something so place a value as an argument within these parentheses these list items are all siblings so let's say that the first child will have a background color of yellow so i will pass in a one or two three four five you get the idea this is really useful with javascript because you can place a variable within here and then increment or decrement to the variable so you can select a given item from a list i'm just going to turn this into a comment real quick now with this next one let's say that the color will be sky blue and i would like to apply this css property to all even siblings and let's do the same thing with all odd siblings and let's make the color what about powder blue so in this way we can alternate the highlighting of our elements so that they may be easier to read this next value is going to be somewhat strange it's a formula that we can pass in as an argument so what if i need every third element highlighted i would say 3n n is the current number that we're on so elements three six and nine are highlighted if we change this to four n every fourth element is highlighted five n is every fifth element you can place an offset too if i need this to start at one i would add plus one or plus two plus three plus four so yeah you can pass in a formula as an argument to the nth child pseudo class and this is useful if you need some sort of pattern so yeah those are pseudo classes it's a keyword added to a selector that specifies a special state of the selected element so yeah those are pseudo classes if this video helped you out you can help me out by smashing that like button leave random comments down below and subscribe if you'd like to become a fellow bro hey let's talk about shadows there are two varieties of shadows we'll discuss text shadows and box shadows in this example i have a basic h1 element let's begin with text shadows with this css property there are three numbers and a color that follow the first three are in pixels and then pick whatever color you want for a shadow maybe gray the first number is for the positioning on the x-axis a positive number will result in the shadow being moved to the right a negative number to the left the second number is for the y axis a positive number will move your shadow below your text a negative number and your shadow will appear above the text and you can combine these two if i need the shadow to the bottom and to the right i will set these first two numbers to be positive the larger the numbers the greater the displacement of your shadow this third number is for the spread a higher number results in a further spread so if i set this to 15 we can barely see our shadow anymore maybe let's set that to five that's a decent looking shadow okay you can also add more than one shadow i'm thinking for this example we'll create a sort of fire effect around our text so maybe i'll set the color to be yellow and i would like the shadow to appear directly around our text so i will set the first two values to zero and the spread to five or some other number so this kind of looks like our text is glowing so separate each individual shadow with a comma and i would like a red shadow this time and i'll place this directly above our text and set a spread to maybe five yeah there we go that's not a bad looking effect okay now let's discuss box shadows it's the same values as before there's three numbers and a color except this shadow will appear around our entire element let's set this to black i would like the shadow to appear to the bottom right of this element so five five and a spread of five works that's not too bad remember with box shadows the entire element is going to have that shadow effect so you may want to consider setting width and height properties of your elements we can set this so that a shadow appears when you hover your cursor over this element but you need to use the hover selector so h1 colon hover so if i were to hover my cursor over this element then this shadow will appear so it's kind of like a 3d pop-out effect so yeah those are shadows we discussed text shadows and box shadows if you found this video helpful please be sure to smash that like button leave a random comment down below and subscribe if you'd like to become a fellow bro hey yeah everybody in this video i thought we could do something a little bit different in this video i'm going to direct you to a useful resource in which you can use free icons for your websites the name of this website is font awesome this isn't a sponsorship or anything like that i just tend to like to use this website for free icons so there is a free version i'm going to start for free and you just need to set up an account so enter an email address and then create and use this kit then it's just a matter of verifying your email address to create an account after signing in you'll need to add your kits code to a project this is a small script so i'm going to copy this kit code and within the head of my html document i'm going to paste it and now we can search for some icons at the top menu of this website we'll go to icons and we can search a lot of these you do need a paid account but there's a lot of free icons as well so let's look up any free icons let's look for a home so click on an icon you can select a size and a background color and choose this icon click on start using this icon all you have to do is copy this html code and then someplace within the body of your document you can paste it and we now have that house icon so let's search for a few more how about twitter select a size and a background start using this icon copy the html code and then paste it okay one more how about youtube so again select an icon select a size select the background start using this icon copy this code and paste it okay let's style some of these elements let's change the color of our twitter icon so this portion here is the class name f a dash twitter so type dot for classes f a dash twitter and let's change the color property i think aqua is fairly close to the original logo color and let's do the same thing with youtube so dot fa youtube and i will change the color to red and you can add really any css properties we can also turn these into hyperlinks so i will surround one of these elements with a pair of a tags then i will set the href attribute equal to a url then when i click on this icon it takes me to youtube it wouldn't be a bad idea to play some of these within the header or the footer of your webpage so yeah those are font awesome icons and how to style them using css so if this video helped you out please be sure to help me out by smashing that like button leave a random comment down below and subscribe if you'd like to become a fellow bro hey uh here's a few transformations that you may be interested in let's begin by creating a simple box i'll use a div element and assign this a unique id of box one and within this box we'll say hi within my style sheet i will select box one i'll give this a border of 4 pixels solid a width of 250 pixels and a height of 250 pixels as well let's change the font size to something larger like 225 pixels we will change the text alignment to center and change the background too pick a color that you like to work with transformations there is a transform property and you can select a transformation that you like let's begin with translate x you pass in an amount of pixels to translate your element on the x-axis if i set this to 50 pixels this element will be translated to the right by 50 pixels or a negative number for a left translation okay let's select translate y and do the same thing this transformation moves elements up or down on the y-axis or you could combine them both and that is just simply translate but you pass in two numbers between the parenthesis so this combines both an x and y translation we can rotate on the x-axis you pass in an angle like 180 degrees so that is a rotation on the x-axis there is also a y-axis rotation and a z-axis rotation we can scale on the x-axis scale x one is the default two means two hundred percent so this image will stretch twice as wide or three times as wide there is scale y and that will stretch on the y-axis or you could combine them both with simply scale if i set both of these values to 2 our image is twice as big we can skew on a given axis skew x and then pass in an amount of degrees like 45 degrees we can skew on the y axis or we can do both pass in two values within skew let's say 20 degrees for both there's also matrix matrix is a little more complex there are six values that we can pass in and they start in this order the first value is for scale x the second is for skew y skew x scale y translate x and translate y the first number is for scale x and the fourth numbers for scale y so i'm going to set this to one for one hundred percent so if these are both zero or at least one of them is zero then this image is going to disappear so matrix combines the following scale x skew y skew x scale y translate x translate y so using matrix you can add more than one transformation let's say i need this scaled twice as big and translated let's make that a little more drastic maybe 250 or i could skew this too so yeah those are some simple transformations whatever you would like translated just place this property within an element and you can select one of these based on what you need so yeah those are some simple transformations in css if this video helped you out you can help me out by smashing that like button leave a random comment down below and subscribe if you'd like to become a fellow bro hey it's you bro hope you're doing well and in this video i'm going to demonstrate a few simple animations using css so sit back relax and enjoy the show hey y'all let's create some very basic animations i'll create a simple box i'll use a div element and give this element a unique id of box one and within this box let's say hi and within our style sheet let's set the box 1 element to have a width of 250 pixels same thing goes with the height let's change the background to maybe red i'll give the font a size of 225 and text align center to use an animation we first well have to create an animation and we can do that by using the key frames rule so at keyframes and then follow this with a unique name for your animation for this first example let's have this element slide into place from the right i'll name this my slide something unique two keywords that we can add to our animation are from and two and follow each with a set of curly braces from will be any properties you would like to apply to this element when you begin the animation the two keyword are the ending properties let's have margin left begin at one hundred percent so the margin on the left of our element is going to take up 100 of the width of our window and this animation will end with margin left being 0 there will be no margin on the left of this element this will be a gradual transition between these two properties but we have to set a length of time that this animation is going to take but before that we have to specify an animation by setting the animation property to the name of your animation mine is my slide and we need to set a duration animation duration let's say that this entire animation will take 5 seconds 5s and there we go with our keyframes there is a gradual change between these properties anything within from and2 we can repeat this animation as many times as what we would like animation iteration count you can set this to 1 2 3 or infinite so this animation will loop when you set the animation iteration count to infinite a couple other things you can do too you can add animation play state and the default is running but you can set this to paused and the animation will pause in place but let's keep that at running you can add a delay animation delay maybe we'll have this begin after one second so it's been one second then the animation begins i'll keep that at zero okay this next one is animation timing function so right now our animation is occurring linearly we could have this e is in so this accelerates but doesn't slow down ease out where we begin quickly and then slowly decelerate ease will do both it accelerates and then decelerates near the end or linear where it's a constant animation there is a shortcut where you can apply all six of these properties and just to demonstrate i will place all of these within one giant comment block so beginning in this order we begin with the duration this time let's say three seconds then the timing function linear a delay if you need one i will keep that as zero the iteration count that will be infinite the place date running then the animation my slide so this is a shortcut where you can combine all six of these separate properties you can also place this animation within a pseudo class in this next example i would like this element to only be animated while i have the cursor over this element so i can use a pseudo class for that so box one and the pseudo class of hover and i will place my animation within that pseudo class and then we should probably switch these margins around so that it slides to the right instead this animation will begin if i place my cursor over this image or we can set this to active it's going to play if i click on it box 1 colon active and then let's place our animation within it so nothing's happening until i click down on this image but once i let go the animation ends so you can combine animations with pseudo classes let's create a couple more animations how about a rotation let's name this my rotate so you can use percentages too you don't necessarily have to use both from and two let's say that once this animation reaches 100 i would like to apply the transform property and we will perform an x rotation of 360 degrees so let's set the animation to my rotate so that is an x rotation let's do this with y and let's get rid of that here is a y rotation and a z rotation let's change the opacity so at keyframes my opacity okay this time we will set this to 50 then your animation will have these properties revert to what they originally were when you began the animation so at fifty percent let's set the opacity to zero so this will fade out then fade in see if i set this to 100 this will fade out slowly and then snap back into place but if you set it to 50 there will be a gradual transition and then it's going to revert back after 50 let's change the scale of our element at keyframes my scale let's have our image shrink and then grow back in place using transform scale 0.5 to 0.5 so this will shrink and then grow and lastly let's change the colors this will be a challenge round keyframes my color change we'll go through the colors red orange yellow green blue and purple so let's have this begin at zero percent we will have the background color be red then at 20 this will be orange 40 will be yellow 60 will be green 80 will be blue and 100 will be purple actually since our element is beginning as the color red we don't necessarily need this specific portion okay let's try this my color change so we should be able to go through these colors and then it becomes red again at the end so yeah those are some simple animations in order to use an animation you have to create an animation so you use at keyframes and then come up with a unique animation name and then set some properties on what you need exactly so yeah those are some very basic animations in css if this video helped you out you can help me out by smashing that like button leave random comments down below and subscribe if you'd like to become a fellow bro

Channel: Bro Code

Views: 27,279

Keywords: css, css crash course, html css, css3, css tutorial, css for beginners, css beginners

Id: wRNinF7YQqQ

Length: 60min 0sec (3600 seconds)

Published: Wed Sep 08 2021