Hey, what's going on everybody? It's your 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 web page 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 web page. 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 six zeros. Where white is six Fs.
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.
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. 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't 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 inline, 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 elements 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 style sheet, 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 page. 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 head elements 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 great 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 Let's say that all odd-numbered paragraphs should be red. 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, then 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 will 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.
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 style sheets. 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 your 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 Consolus. 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.
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 2P. 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 web page.
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 font 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 Consulus 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 maybe 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. 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 webpage using CSS. If you found this video helpful, you can help me out by smashing that like button, leave a rate of comment down below, and subscribe if you'd like to become a fellow bro. Hey, welcome back.
In this video, I'm going to 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 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 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. 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 too. 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 your bro hope you're doing well and in this video I'm gonna 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. and the background will adjust dynamically. We can change the direction in which the colors head. So we will precede our colors with 2, either top, bottom, left, or right.
So 2 top would reverse these colors. So green is at the top, blue is at the bottom. Or 2 left, or 2 right.
Pretty cool, right? So this time I'm going to apply these colors to the h1 header tag as well. as the p tag. So the background of these elements is this linear gradient, but not the background of the body of our HTML document.
I'm going to change this color from light green to white for both. And with the p tag, let's say two left and 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 mybackground.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 to color, you can set the background to a 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 a random comment 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 div element an ID of box 1. And let's do the same thing for box 2, but change 1 to 2. 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 2. 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 1 and we'll just copy everything over to box 2. So I would like a border of 5 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 2. So change box 1 to box 2, and I would recommend picking a different color. Okay, we have box 1 and box 2. 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 eight 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 two pixel solid. This is the boundary of our body, wherever this border is.
So we have eight 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 0 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 1. 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 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.
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 is what it would do.
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 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, 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 box1, box2, and box3. 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 box.
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 one 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 if this was float right, it will be read 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. Heya! 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 box1 and create a second box box2.
Let's also create a whole lot of paragraphs because we'll want a scrollbar. 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 2. 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 like to displace. this element down 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 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 2. Now box 2 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 ignored. box 2. It's kind of like it's a ethereal or a ghost or something. And if I were to set a position, I'll set the top to 0. 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 web page 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 1?
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 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. 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.
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 a random comment down below, and subscribe if you'd like to become a fellow bro. Hey, pseudoclasses. A pseudoclass 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. 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? 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 will 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 for buttons as well. 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 nth 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 the variable so you can select a given item from the 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 3, 6, and 9 are highlighted. If we change this to 4n, every fourth element is highlighted. 5n is every fifth element. You can place an offset too if I need this to start at 1. I would add plus 1 or plus 2 plus 3 plus 4. So yeah you can pass in a formula as an argument to the nth child pseudoclass.
And this is useful if you need some sort of pattern. So yeah those are pseudoclasses. 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 a random comment 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 5. 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 0. and the spread to 5 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 5, 5, and a spread of 5 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 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 kit's 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, 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 to use 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 a 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, fa-twitter. So type.forclasses fa-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.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 place 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. Heya!
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 box1.
And within this box we'll say hi. Within my style sheet I will select box1. 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 to 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 translateX. 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 parentheses.
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 200 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 scaleX, the second is for skewY, skewX, scaleY, translateX, and translateY. y.
The first number is for scale x and the fourth number is for scale y. So I'm going to set this to 1 for 100 percent. So if these are both 0, or at least one of them is 0, 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 your 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, 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 box1.
And within this box, let's say hi. And within our style sheet, let's set the box1 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 to, 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 to keyword are the ending properties. Let's have margin left begin at 100%. 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, animation, 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 and to.
We can repeat this animation as many times as what we would like. Animation, iteration, count. You can set this to one, two, three 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 ease 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 could set this to active. It's going to be active. So I'm going to go ahead and do that.
And then I'm going to go ahead and do that. And then I'm going to go ahead and do that. And then I'm going to go ahead and do that. And then I'm going to go ahead and do that. And then I'm going to go ahead and do that.
And then I'm going to go ahead and do that. And then I'm going to go ahead and do that. And then I'm going to go ahead and do that. And then I'm going to go ahead and do that.
to play if I click on it box one 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 rotate Let's name this myRotate, so you can use percentages too. You don't necessarily have to use both from and to. 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 myRotate. 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 50% let's set the opacity to 0. 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 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 0%. 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 atKeyframes, 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.