CSS 101: A beginners guide to beautiful websites | Kalob Taulien | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

CSS 101: A beginners guide to beautiful websites

teacher avatar Kalob Taulien, Web Development Teacher

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

37 Lessons (1h 56m)
    • 1. CSS 101: A beginners guide to beautiful websites

      1:18
    • 2. What is CSS?

      1:50
    • 3. How does CSS work?

      1:43
    • 4. CSS syntax overview

      3:50
    • 5. How to write inline CSS

      3:44
    • 6. How to write internal CSS

      3:37
    • 7. CSS selectors introduction

      1:20
    • 8. Writing element selectors

      1:38
    • 9. Writing class selectors

      4:52
    • 10. Selecting elements by their ID

      3:02
    • 11. Grouped CSS selectors

      3:47
    • 12. Selecting nested elements using CSS

      5:01
    • 13. How to comment out your code

      2:17
    • 14. Working with different text colors

      2:57
    • 15. Working with different color types

      3:48
    • 16. Applying styling to different link states

      3:33
    • 17. How to change font sizes

      2:06
    • 18. A glimpse into different measurement types

      1:17
    • 19. How to change your background colors

      1:32
    • 20. How to add images to your backgrounds

      6:53
    • 21. The most useful tool you can use: the developer tools

      4:21
    • 22. Changing your text alignment: left, center or right

      2:03
    • 23. Adding borders to your elements

      2:33
    • 24. How to add a rounded border

      4:22
    • 25. Vital: Different display types

      3:48
    • 26. Changing the default width of an element

      4:06
    • 27. How to change the default height of an element

      1:44
    • 28. Adding box shadows for an eye-popping element

      5:05
    • 29. Padding: the internal element spacing

      3:22
    • 30. Margin: the external element spacing

      2:40
    • 31. How to set a maximum width on an element

      2:27
    • 32. How to make elements see-through

      4:35
    • 33. Moving your code to an external file

      5:04
    • 34. How to float your elements like a newspaper article

      5:17
    • 35. What we haven't learned yet

      1:10
    • 36. Your final Skillshare project

      2:35
    • 37. CSS 101: Summary

      0:42
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

152

Students

1

Projects

About This Class

Welcome to CSS 101: a beginner's guide to beautiful websites!

About

CSS, short for cascading stylesheets, is a layer on top of HTML. In short, CSS is how we make websites look beautiful by adding borders, colors, specialized positions, specific spacing, and overwriting the default behavior that browsers apply to our HTML. 

CSS 101 assumes you don't know any CSS whatsoever. We'll start at the very beginning with "What is CSS?" and how CSS is written. 

CSS looks different from HTML, and the way we write it, known as "syntax", is important to know about. Plus, there are 3 different areas we can write CSS — when and where do we write our code in each place? 

In this course, we'll cover all the beginner subjects, plus we'll dive into CSS properties such as font colors and sizes, background colors and images, height and width, padding and margin, borders and rounding borders, display properties, floating elements and much more. 

You only need to know a little HTML to get started with this course. However, if you've never written any HTML then you'll want to learn basic HTML first. 

Requirements

  • Basic knowledge of HTML
  • A text editor such as VS Code (download here)

Why you should learn CSS

CSS is the one and only way to make your website look beautiful. That's not an opinion, that's a fact. Frontend web technology for your browser is limited to HTML, CSS, and JavaScript. By learning CSS you'll be familiar with 2 out of 3 frontend technologies. 

But it's more than that — without CSS your website will look like it's from 1997. That was OK until about 2005. But these days you want a modern-looking website. A modern looking website will represent you better than a pure HTML website. 

If you want to get into web development as a career, you will need to know CSS. That's non-negotiable. But don't think of it as a chore, CSS can be a lot of fun to code! 

Beyond all of that, CSS is fun. It's a lot of fun, and incredibly rewarding, to take an ugly website and make it look beautiful. Every couple of minutes you can physically see the difference and improvements. Making your websites look and feel great is super rewarding, and they are fun to show off to your friends and colleagues.  

Your project

There are several small tasks at the end of several videos for hands-on experience so you can practice what you've been watching right away. 

At the end of this course, you'll take the navigation and hero from rocketman.learnwagtail.com and code it from scratch, just like you would in the real world — as if you were working directly with a designer. 

a4531b34

Meet Your Teacher

Teacher Profile Image

Kalob Taulien

Web Development Teacher

Teacher

Hi everybody! I'm Kalob Taulien.

 

Here's the TL;DR (short) version about me:

I have been coding since 1999 and teaching people how to code since 2013 I have over 350,000 web development students world-wide I'm on the Wagtail CMS core development team (Wagtail is Python's #1 most popular website making system) I try my best to answer EVERY question my students have  I love teaching — it's definitely one of my natural talents  Also I love goats! (Great conversation starter with me if we ever get to meet in person)

Below you can find all my Skillshare courses. The categories go from easiest to hardest, except for the Misc. Coding Courses at the very end. 

If you're brand new to coding, start with BEGINNERS WEB DEV.&nb... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. CSS 101: A beginners guide to beautiful websites: Hello and welcome to CSS 101, the beginner's guide to beautiful websites. So CSS is the way we make a website look beautiful. Usually websites are plain HTML, it's boring and our websites look like they're from 1997 with CSS, we can bring our websites into this decade and we can make our websites look really, really modern and beautiful. Now css is actually really, really simple, but there is a lot to learn. So don't expect to walk away from this course as a CSS expert. It will take several weeks to get really good at CSS. But don't worry, I'm going to be there to guide you through the easiest way to learn CSS. And to get the most out of this course, you are going to need a basic understanding of HTML. Hi, I'm Caleb Italian. I'm a web developer. I've been making websites promote 20 years now. I mean premium coding instructor and I have over 300 thousand students worldwide. In this course, your project is going to include making this webpage. We're going to reproduce this hero section, including the navigation and body. So that white section up top and the image section down below, we're going to make this website look really nice using everything you learn in this course. Welcome to CSS 101. And when you are ready, let's get started with that first lesson. 2. What is CSS?: First things first, what is CSS? Css stands for cascading style sheets. They come in the file extension of dot CSS. So unlike an HTML file where we use dot HTML for CSS, we use dot CSS file extensions. Html is the backbone of every single website, but honestly it's pretty ugly. Css lets us create beautiful and modern-looking websites. How this works is CSS is a layer on top of HTML. So we write a regular HTML and then we make it look and act really, really nice by overriding the defaults and the default settings that a browser gives us with HTML, we can change all of that with CSS. So CSS or cascading style sheets do not control the functionality of a website. So if you want to click a button and you wanted to do something that actually requires JavaScript. Now, JavaScript is definitely worth learning, but you should focus on learning JavaScript after you learn CSS. So you should learn HTML first, then CSS where you currently are this course. And then you should learn JavaScript after that. Now if you don't know HTML, I have several HTML courses, the ultimate HML developer HTML 101 and HTML 200 one. So if you don't know HTML, please go back to one of those courses first or do a little Googling and brush up on your HTML because we are going to be working with HTML quite a bit here because HTML and CSS worked together. Lastly, CSS can be written in three different ways. Now it all looks the same, but we can apply it three different ways. That's a better way of putting it. We have inline with the HTML style attribute, and then we have internal with the style element. And lastly we have external CSS files. We're going to tackle all of these in this course. 3. How does CSS work?: How does CSS work? In HTML one-to-one and HTML2 2.1.1 courses. We talked about the different browser rendering engines. So your browser does the three primary things while it does a lot of things, but when it comes to rendering content, it does three primary things. It renders your HTML, it renders your CSS, and it renders your JavaScript. And in this course we're going to be using HTML and CSS. So it's going to be using the HTML NCSS engines. And just as a little recap, these engines have different rules and so your HTML looks a lot different from your CSS and your CSS looks a lot different from JavaScript. They have different rules, so we write code differently, and this is the same read across all programming languages, and this is called syntax. We'll talk more about CSS syntax and just a little bit. So CSS is really just a layer on top of HTML. Will always need to write HTML to make a website. So technically CSS is optional. You don't need to know CSS in order to get a website on the internet. However, and I would argue this, if you want to make a modern-looking website, CSS is not optional. You need to know it. Otherwise, your website's going to look like it's from 1997. So it's a fun little experiment. Go and google the Space Jam website. It looks like it's from 19971996, somewhere around there. Now if you want to break into web development for a job or you want to be a contractor, make little side money. You want 100% absolutely. Will need to know CSS and you'll need to be pretty good at it. And this course is the perfect Guide to Getting Started with CSS. Moving through this CSS 101 course, we will tackle the basics and most commonly used attributes. 4. CSS syntax overview: Okay, let's take a look at CSS syntax. So you should already have a text editor by now. You should have already downloaded and installed one when you are learning HTML. And so I'm going to open up my text editor called Visual Studio code. And what I'm going to do is go to File Open, and I'm going to open up an entire folder here and already have an index.html file. It's completely empty. There's nothing in it. And we can see all this did was give me a little sidebar here called explorer. You can always go to I believe it's view and then explore to turn this on. If it's not there. You do have to open up an entire folder for this though. And I can open up this index.html file and do HTML colon five. Hit Tab. And it just fills everything that I need for me, which is really nice. And again, this is something we covered in HTML. So what I'm going to do is just ignore this stuff for now, and this is set to a Django template. Let's change this to HTML. And let's take a look at the CSS syntax. So there's two primary ways of writing CSS. You can write it right on an element doing the style attribute, you can say style color is equal to red. And we'll talk about what color red and all that stuff is. And just a little bit, or you can in your head section, right? A style element. And in here, this is where you're going to write most of your CSS. It's going to look a lot like this anyways. So you have some sort of selector and I'm going to make this even bigger here, you have some sort of selector, curly brace, the property name, colon, and then whatever the value is going to be semicolon. And then if you wanted a second one, you could do like Property two, colon, value, two, semicolon. And so this fellow here is always your selector. And from here all the way to here, this is called a declaration, where you have a property, a colon, a value, and then a semicolon. And always make sure you have that semicolon. And so this is what your declaration looks like. So whenever I say Declaration, I'm talking about a property and a value together. So as an example, we could just go ahead and delete this. And we can say body, and that's going to target this body element. We will talk about selectors and stuff a little bit later. I just want to show you what this looks like for now. Curly brace. We can put it on a new line if we wanted to. And we could say something like background color is equal to black. And let's go ahead and get rid of this. And I'm just going to load this page up in Google Chrome by going to File, Open File. I'm gonna go to my desktop here, go to a CS101, opened up that index file that we were just working on. And we're going to see this background color is all black, and usually by default it's white. And so this is what CSS does. It lets us do little things like this. So there's nothing to do, nothing to learn. I just really wanted to show you what the syntax looks like, really, it's just some sort of selector. You can select your body element, curly brace, closing curly brace, and between it we have a declaration. And a declaration is made up some sort of property type. Then it has a colon, and then some sort of value, and then a semicolon. And we could put another one on here on the second line, colours equal to red if we wanted to. And then we could put a third one here, third value. And we could do this on and on and on. So again, nothing to learn. Let's go ahead and get started with that next lesson where we actually start diving into CSS a little bit more and get a little more hands-on with this. 5. How to write inline CSS: Okay, let's take a look at in line CSS. So from the last video, I just clean up this HTML a little bit, got rid of that old CSS. And when I refresh my page, it's a standard HTML page, literally nothing on it. It is as plain as it gets. So let's go ahead and create an H1 element. So I type H1 and then tab in VS Code and it creates an H1 element for me. And then I can say style is equal to. And then we could put some sort of elements or a property or declaration in here. And we can see there's all sorts of stuff to choose from this as all CSS. By the way, all of this, we're not going to learn all of this because that's going to take forever to learn, but we're going to learn them. The most commonly used things that will get you 90% there on pretty much every single website. So I'm going to avoid putting in a style just for now and say this is an H1. And I'm gonna copy this down and create another one. Again, I'm going to give us a blank style attribute. It's not doing anything at this point, and this is another H1. And so when I refresh the page, we see an H one and another one. Nothing is different from HTML. However, in this style attribute, we can now say something like font size is equal to ten pixels. And we'll talk about font-size in its own particular lesson. But I just want to show you that this is how we can write some inline CSS. So I go ahead and refresh this and you can see that this is still an H1. And if I right-click and inspect in here, it's still an H1. However, it differs from this one. This is a base style one. This one is an H1, but we gave it a font size of ten. Now we could also change other things, like let's change the color of the second one. Let's say the color has to be blue. And remember I'm writing a declaration here. So I write the property name, colon, space, value, semicolon. And I can save that. Go back here, refresh my page. And now it's blue. And we can merge these together if we wanted to. There doesn't have to be just one change at a time. If we wanted to add multiple styles or, or multiple CSS declarations, we can do a semicolon because it's semicolon tells the computer, oh, this is the end of this declaration. Look for another one. So we can say font size is equal to 20 pixels. And even though I don't have a space here, that would work, but I like adding a space and it just looks a lot nicer when you're writing massive amounts of CSS. So let's go ahead and save that. Flip back to our browser, refresh, and we're going to see that this is going to be a little bit smaller, not quite as small as the first H1, but a little bit smaller, just like that. And it's still blue. And with my inspect tool open. And again, all I did there was right-click inspect when two elements select my H1 that I want to edit. And over here we can see we've got color. We can toggle this on and off and we can change this to, we can click blue and changes to red. And we can change the font size. And so we can talk all of it off. This is what it looks like by default. We can toggle that back on, and this is what it looks like after CSS. So effectively, we have written in line CSS. Now, this is a good way to get started, but it is not a best practice. So just keep that in mind. We are going to break this rule throughout this course and that's totally okay. But in the wild when you're writing real production style code, you're probably not going to use this too often. 6. How to write internal CSS: Okay, let's take a look at internal CSS. So in the last lesson, we wrote internal CSS and that's just style is equal to and then we wrote our regular CSS. We can actually pull this out and put it into internal CSS. So let's do this in our head. Let's write style. And then remember from, I think it was two lessons ago, we had a selector, curly brace. Then we wrote the property and then some sort of value. So this is a property. Color is a property. Ten pixels is a value, blue is a value. So if we wanted to select all the ones in this page, we can do that. So what I'm gonna do here is I'm gonna get rid of this. And I'm gonna get rid of this. And I want to show you the before and after. So I just save that. Head on over to my browser, hit refresh, and we can see it's back to normal. Now what I can do here is I can change the selector to like an H1, and this matches the element's name. So I can select the body or I can sight an H1 or paragraph or bold or a div. And you do anything like that. Now, we changed the color of one of them. We can say color is equal to or, or colon space, which is a lot like saying it's equal to. And then that value could be blue semicolon space and then a closing curly bracket. And that whole thing here, this is styling all H 1s on the page. So this is going to select every h one, this one, and this one. And it's going to say change the color from black to blue. So if we save that and refresh your page here, we're going to see that this turns blue. And just like that. Now we can add another one in here. We could say, let's target the body of this time, and that's going to be our entire HTML element. We can say the body and just for funds these, let's put this on a different line. And we can say the background color is going to be black. And so we can see here that it does work on multiple lines. It's totally okay to have it on multiple lines. You don't actually need the spaces, although I would argue put spaces in there because it makes your code a lot more readable. And we're going to change all of the H 1s to have a font color of blue. And they're going to change the entire page, the entire body to have a background color of black. And so we don't add a comma after this. We don't do anything fancy. The only wave your browser tells or can tell that. This is an H1 selector. Is this closing curly brace. Same thing with your body. And it's gonna say, oh, there's a body. Okay, open it. Apply your styling. Close it. And let's go ahead and see what this looks like now. Now within just a few minutes, we have actually started making style changes to our page. And this is internal CSS. Internal CSS is when you use the style element. Inline CSS is when you use the style attribute like we did in the last lesson. What I would like you to do is give this a shot. Go ahead and change your body background-color. You don't necessarily need to know too much about this. Feel free to pause this video and just copy this text right into your, into your document and then open it up in your browser and see that it actually made a difference. Just get used to writing this particular syntax here, where you have a selector and opening curly brace, your declaration. A closing curly brace. 7. CSS selectors introduction: Okay, welcome back. In this lesson, we are going to be talking about selectors. Let's talk about selectors. I keep saying this word, selectors. So what I'm gonna do is just from that last lesson, I'm gonna go ahead and I'm gonna delete this and save that page and just refresh. And we can see that it undid everything. This is a base HTML page. Now. Now a selector lets us select different elements. So in here we've got two H1 elements. We could have a div in here. It says this is a div. We can have a paragraph in here. This is a paragraph and if you're just joining me now, the way I made that little shortcut there was P And as soon as you see this M at abbreviation pop-up, you can hit tab and it creates your opening and closing tags for you, your HTML tags. Let's go down here and let's create a bold element. Actually, let's use the proper version. Let's use strong. And this is bolded text. This is normal text. And so when I refresh a page, we're going to see we have a standard HTML page. Nothing extraordinary is happening yet. But let's say we want to target just this one div or just as one paragraph, or we wanted to target all of the H1 elements on a page. We can do this with CSS. 8. Writing element selectors: So we would use an internal style here. And let's say we want to select all of our H 1s. And so we have two on the page. We would say H one, opening and closing curly brace. And let's change that color to blue. Save. Head on over back to a browser, hit refresh, and it changes it to blue. Now let's say I wanted to select just this paragraph and make it real ugly. We could do that too. We could say select the paragraph and you notice that these match the HTML element. So this H1 is literally the H1 element, and this P is literally the paragraph element. And let's throw this on just one line this time, we can say Make the paragraph background color. And what color do we want to change this to you? Let's change this to what do we have here? Dark magenta. Make sure you have that semicolon. Make sure you have that closing curly brace. Save and let's go refresh. And we can see that this text is going to change. Hopefully that is a visual change that we can see in this video. Yeah, there we go. So we have something that's actually working here. And now this is a selector. A selector is the ability to select just particular elements. Now we can select it by an element, we can select it by class, we can select it by ID. We can select elements by their attributes if we wanted to. But we're not going to get into that just yet. We're going to tackle these one by one. So what I would like you to do in this video is make an H1, make a div, and then just target that H1 and change the color of it. I do not want you to change the color of the div. 9. Writing class selectors: Let's talk about class selectors. In the last lesson, we were able to select all the ones on a page and we were able to change them. We change the styling, change how they appear. In this lesson, we're going to take a look at how we can, how we can select multiple elements using a class. So let's say we have an H1 select me. And below this we have a div. Select me too. And we also have a paragraph. Don't select me. Now there are several ways we can select both the div and the H1. But in this lesson we're going to look at the class attribute. So if I go into my H1 here type class, then this is just HTML. We can change this color to blue. And we can also say in the div blue. And so you see that how they both have blue in common, they're both a class. In our CSS, we can't type H1 and div, although we can do this, this is a different type of selector. Will talk about this later. We just want to be able to select the H1 and the div, but we want to select it by the fact that they have this common attributes. They have this common class called blue. And we can do that with dot blue. And so I just made a selector here, dot blue. And you can think of class as dot. Now if you ever watch the TV show called reboot, you can think of dot is a classy character. Because classes are dots in CSS. It's just a shorthand method of, of writing this out. So now we have dark blue selected, it's going to select our H1 and our div. And in here we could say color is equal to blue. Save and refresh this page. And we can see that it says select me as blue. Select me too is blue. Don't select me is still default black. Now, what if I wanted to make this a little more complicated? Let's add a paragraph in here with some Lorem. So I hit Lorem or a type Lorem hit tab and it creates some Lorem ipsum text. And if we preview, it's a regular paragraph. Let's go ahead and select this. But let's make, let's make this one and the paragraph uppercase. So we can change this by adding a class. Class is equal two and let's call this uppercase. And this name is not super important, but I'm just going to call it something simple like uppercase. And let's also add a second class selector onto our H1, so we use space upper case. And you notice how these two now have something in common. And we can go back up to our CSS. And we can say class, uppercase. Open our syntax there. We can do text transform. And then we have all these different options theory. Let's go with uppercase and let's save that. Let's go back to our page and we're gonna see that select me and this class, this element. So we can see that the one select me and this paragraph is going to be uppercase. Just like that. Now we've selected this one and we've selected this one, but we have not selected the, select me to the second one or the last one. So this is a good example of how elements can share something in common. And we can apply styling based on that, that thing that they have in common. We also looked at how we can have two classes or more. You can have more and more and more in here if you wanted to. And the way we separate these is with a space. So we said the first class is going to be blue, the second class is going to be uppercase. So it made our first element here blue and uppercase. The second element only has blue, so we go up here, it only changes the text color to blue. And then in a paragraph, we're saying only uppercase and it's only changing that to uppercase is not changing it to blue. Lastly, we have an element down here. Don't select me. And there are no classes, there are no selectors for the P element to change all p element. So this is just a default, whatever the browser is going to give us. Oh, and one last thing here is these are case-sensitive, so dot uppercase is not the same as uppercase with a, you make sure they are spelt the exact same. I see a lot of people throughout the years. I've seen them do something like this where it's uppercase and then this one is lowercase, lowercase u, and this one is an uppercase U. And they say, Oh, it doesn't work for me. Why is it broken? And it's actually not, it's just very case sensitive. And so uppercase or even like blue and uppercase B is different. This is saying select blue with an uppercase B, so it is different. So just keep an eye on that. 10. Selecting elements by their ID: Alright, let's take a look at ID selectors. And id selector is a way to select something based on another HTML attribute called ID. And so we can say in this one here, let's make some space here. We can say the ID for select me is going to be the title. And we do this, we select this one with a number sign. And so in CSS, we can go back to our style element here, and I'll just move that up a bit. We can do ID, the title, and this is case sensitive as well. And we can change this to have, let's say text decoration of underlying. So in the last lesson, what we did was we selected this element, this element, and this element, and we apply different styling to it. In this lesson, we're going to select, select me by its ID, and we're going to give this an underline. So let's go ahead and refresh. And it's now underlined. And the reason that's not blue is because in the last lesson I was telling you how this is super case sensitive. That was the case here. Let's go ahead and refresh. And now it's blue, it's underlined, and it's uppercase. And we're using multiple selectors here. So this one element has the blue styling, has uppercase dialing, and it has an ID called the title. And once again, that ID just starts with the number sign. The rest of the syntax is identical to an element selector, like what we saw originally, a class selector, like what we saw in the last video. And all it is is that curly brace, your declaration, and then a closing curly brace. Now one thing to note about ids is they should be completely unique. So you can in theory rates, ID is equal to the title, just like we have up here. And this is going to select both of these because they're identical. And we should only ever have one ID. It's like your driver's license or your government ID like your passport. It should only, they're only should ever be the one document in existence. And just like an ID here, there should only ever be one. But we're saying that, hey, there's one selector, but it's being applied twice. Let's see what happens here. So you can see that our browser did not honor the rule. It actually made this underlined as well. Now the head is I guess that's fine. But please don't do this. What we should be doing is the title and this could be like the subtitle. Ids should always be unique. Now, why this is important is because after CSS, you're going to be learning JavaScript. And JavaScript has the ability to grab an element by its ID. And if there are two of them, it's only going to grab the first one. And you might possibly want the second one and that could really mess up your coding and cause hours of frustration. You don't want that. So always make sure your ideas are completely unique. 11. Grouped CSS selectors: Let's talk about grouping selectors together. So what I'm gonna do is from that last lesson, I'm just gonna go ahead and delete this code, and I'm gonna delete the styling that we have here. Now, let's say there is a circumstance where you have an H1 on your page. This is n one. You have a div on your page. This is a div and you have a paragraph on your page. This is a paragraph. And let's say you wanted to select the H1 and the paragraph and you wanted to change the color to blue. So currently the way we know how to do that is we can add a class to both of these. So I can click here. And then in VS Code on Mac, I can do Command click or on Windows, I think it's either all or control-click. And you can type in two places at the same time, which is really, really useful. And then we can do classes equal to blue. And that's what we did in the last couple of lessons. But we might not always have access to the class attribute. We might not be able to add anything to this and there will be circumstances in the future where that's just not possible. So let's say we wanted to select this one and this paragraph. Well currently we do H1, color is equal to blue. And then on a new line we do paragraph color is equal to blue. And this does do the job. If we flip back here and refresh from what we previously saw, changes our H1 to blue and changes the paragraph to blue. Okay, cool, that works. There's a better way to do this because you see how we have to write this twice. What if down the road you have a CSS file or some styling and it's like a 1000 lines long and there's tons of selectors in there. What if you wanted to change all those colors from blue to red? Well, we'd have to go here, type red if we forget one. Oh no, now we have to go back and check the ones red, ones blue. We have to then find this one. Go over here, change that one to read as well. Go back, refresh our page. You can see how this can just get a little bit monotonous. Instead, what we can do is, let's put this on multiple lines just for readability. And I'm gonna go ahead and I'm going to delete that. And instead I'm going to group these selectors together with a comma. So I say select the H1, all the H 1s on the page. Also select all the paragraphs on the page. And we do that with, again, select the H 1s comma space, then a paragraph. And if we wanted to select more, we could do comma div, we can select all of them. Or we could do just the bold elements or just the strong elements are just the metallic elements. We could do that. So what we want here is h one comma space, paragraph or whatever element you want to select space. And then a bracket don't make it ends in a comma though. You don't want it to end in a calm. You can actually see that my, my, my editor here has sort of ran into areas. You see those little squiggly lines underneath there. The eye is running in some sort of errors. And so that error is just because I've got that comma there. So let's go ahead and save this. And when I refresh, we should see actually nothing has changed from this beautiful. Nothing has changed. So this is red and this is read as well. So what I would like you to do is create three different elements on your page. Feel free to copy my experiment as well. Create three different elements like an H1, a div, and paragraph. Select two of them. And then change the declaration. And then change the font color. And make sure that third one is not selected. 12. Selecting nested elements using CSS: Let's take a look at nested selectors. So there's a way to select certain elements that live inside of other certain elements. So I'm just deleting this code here. And what I'm gonna do is create an example. I'm gonna create a div. And in that div I'm going to have a paragraph. So I type p, m at abbreviation shows up. I can now hit Tab. Throw some lorem ipsum in here. And I'm going to also create another part that says this is bold and then make this bold as well. So be so strong. Lets go ahead and select that cut moved to the end of the line, paste. And let's make something in here, bold as well. Strung. Go to the end of the line, cut. And let's go down here, paste. And what this looks like. We have a paragraph with some bold text and then we've got some texts outside of a paragraph. Look at this code real quick. This stuff is outside of a paragraph that's inside the div, but it's outside of the paragraph. So we've got a paragraph here with an in-line strong. Now let's say we just wanted to target me, change this to target me. Well, currently, we know a few different ways of doing this. We could select all of the strong elements. We could give it a class, we could give it class called selected if we wanted to, or we could add an ID of selected. All right, maybe not the same one, not the same name as the class name that gets a little confusing. Select me. Now we could add a class or an ID to this element. But when you work with frameworks in the future such as Django, you know, you might not have access to this right away. And so an easier way is to select it by selecting the div and paragraph and then this particular element. And so maybe let's just put this on a new line as well, make this a little more readable. And let's get rid of this stuff in here. So let's look at nested selectors. So currently we can select all of our strong elements. And we can say the color is going to be blue. And this is great. But it selected this one. Maybe we don't want that one to be selected. Maybe we want just this one to be selected. How do we do that? We can do that without a class. We can do that without an ID. We cannot do that by selecting just the elements because there are two different elements here. So what we can do is we can say target all paragraphs and then all the strong elements inside of a paragraph. And we do that by saying P space strong. So we have a p element here paragraph that matches right there on line 12. Space, not a comma, not a dashed, nothing like that. You're just a space. Then strong. And what's really cool about this in VS code is you can just put your mouse and here click. And if you look up here, it says strong PI div body HTML. It tells you exactly where this element is living. So we just want to select all the paragraphs. So we're just like every paragraph on the page. And then we're going to select every strong element inside of each of those paragraphs and turn it blue. And so when we save this and refresh our page, we're going to see that this one will turn black and this one will stay blue. Just like that. Now that is called nesting selectors, and we can go as deep as we want as well. So if we wanted to target just the ME here, we could say this is italics. And if we wanted to target just this one, we get say, select all the paragraphs on the page, select all the strong elements inside of each paragraph, and then select all the i elements inside of each strong element. And so again, if I put my mouse there and a click, I strong pee in reverse order, that's P, strong eye. And you can see that it matches up here. And so let's go ahead and give this a shot. And now only this is blue, and it inherits the Italica that our browser tries to apply by default. So that is nesting. I really want you to give this a shot. So go ahead and create something like this where we have a div and a paragraph. Make this blue, and then have a paragraph outside of your div. Don't target this, this should not be blue. So I want you to target this one, but not this one. Don't use a class, don't use an ID, use a nested selector. 13. How to comment out your code: Let's look at commenting code in CSS. There's a good way to comment code, but it's a little bit different from HTML. So in HTML, and I'm just leaving off from the last lesson year, that's where I got this code from. An HTML. We have less than exclamation mark, dash, dash. And in here we have an HTML comment. In CSS, it's kind of similar, kinda different, same, same but different, you know. So in here, in our style element, we do slash asterisk. And you can see it turned everything below here gray. And then we can say this is a CSS comment. And to close it, we do asterisk and then that same slash. So we just do it backwards. So this is the forward, this is the opening one, and this is the closing one. And this is a CSS comment. And so you can write what your CSS is doing. You can comment out your code like this. I'm gonna do a shortcut way on VS code. I can do command. It. Command Plus slash on Windows is going to be control plus Lash. And so I just go to this line here and I hit command or control slash. And it commented out. So in the last lesson what we did was we were targeting this, this little ME here. But because I commented that code out, my browser is now going to say, oh, okay, I know that there's code here, but it's in a communist. I don't execute it. Don't do anything with it. Don't even think about it, just pretended doesn't exist. And when I hit refresh, we're going, we're going to see that this changes back to black and it's still going to be italicized, but it's not going to be blue anymore. Just like that. And so code comments are really good for leaving your thoughts, your ideas, your to-dos, if you like. Let's say you're working for a two hours tonight and then it's bedtime and you want to pick it up in the morning. You're gonna see this a lot. To do thing in here, something like that. Or if you're just testing your code and you want to comment or un-comment, you can always just test it out like this. And all I'm doing is commenting and uncommenting with command slash or control slash. 14. Working with different text colors: Let's take a look at text colors now. Now we've been working with this a lot. I think we're pretty familiar with how this works. But just leaving off from that last lesson, we're selecting P strong AI, which is going to be down here, p strong and then i, we're going to target that EMI. And let's make this really obnoxious so we can really see what we're working with here. Font sizes are going to be 50 pixels and we're going to change that color to blue. So if I go back here, this is going to be a big m0 is going to be blue, is going to be italicized. We're going to see it just like that. But we've been typing names like blue or red. And we can see that if we type in color and then hit a colon, that VS Code is nice enough to give us all sorts of options in here. Now, these are nice. But when you're working with a designer, they're not going to be using these perfect colors. They're going to be using different styles and are not styles, but, you know, very, very particular color. So if we wanted to, we could have like black. Let's scroll up here. We have black, whatever gray, how many different colors of gray are there? Look at that. There's light gray, there's probably something like a medium grey. There's all sorts of different types of gray in here. But we don't have to stick with just a name. We can stick with a Hex as well. And so this is called a Haxan. It's usually six characters or three characters, so it's like FFF, fff. And you're gonna see that VS Code has said, oh yeah, okay, that's white. We can do 000000 and that's going to be black. Now if the last three characters are repeating from the first three characters, we can shortcut it and just say 000 or FFF. Or if we wanted an eggshell white, we could do something like F5, F5, F5. These are two very common ways to add colors. Now, as you are learning CSS, it's totally okay to use like red and blue, black, gray, green, yellow, orange, whatever color you want to actually type out. But when you actually start working with a real design, it's going to be very specific. So it's not just going to be f, f 0000. So that's red. It's not going to be the perfect color, red all the time because that's an obnoxious color, red. Maybe it's going to be a darker red, slightly lighter red, maybe just an off shade of red. Your designer is going to be making that choice for you. And so you're going to want to make sure that whatever they're using, you can use. And so that's where a hexes come in, hex colors. There's nothing to do in this lesson. I just wanted to show you that this is how these work. And you can have again, a color, like a named colour or instead of black, you can have number sign 000, which is the same as 000. 15. Working with different color types: Okay, let's take a look at different colored types. In the last lesson, we looked at named colors and hexes, but there's another one actually, there's a few of them. But the three you're going to be using for the most part, most part are named colors, Hex colors, and RGB slash RGBA. And I'm gonna show you what RGB and RGBA R in this lesson. So first things first, I just have a blank document here. Let's go ahead and create an H1 just because it's nice large text. And it's going to say change my color. And when I refresh my page, it just has changed my color so nothing fancy. Now I can select this one. And I can say color is equal to blue. And it changes it to blue. Or I can say red, changes it to read. Or I can say change it to f f 0's 00. That's enough. Yep. And so that changes it to read. Again. Nothing changes. Now there's also another way to do this. We can do RGBA. So RGB or RGBA. So RGB is red, green blue, and RGBA is red, green, blue alpha hat. Let's do RGB first. So let's change its color to 125. That's read one-to-five blue and one-to-five. Green does a backwards red, green, blue nail that. And so let's see what one-to-five is now the highest number you can go to is 255. So make sure it's between 0255. Let's go ahead and see what this looks like now. It's a shade of gray, it's about 50% gray. You're going to see this a lot as well. Mostly when you're dealing with base colors like black, for instance, 0's 00. Black is the absence of color in science, and that means 0 red. See your green, blue changes back to black. Now if we wanted to make this transparent a little bit, we could do RGB. And as at fourth parameter here, we could say comma. And then instead of like 50%, we use a decimal. And so it's 0.5 and that's 50%. And this is just like grade seven mathematics, something like that. Where one is equal to a 1000% is equal to 0, 0%, 0.5 is equal to 50%. So this is going to be black, but it's going to be 50% see-through, so it's going to look gray just like that. And let's go ahead and change that background color of the body. We can say body background color. And let's change this to red. And we're gonna see that this probably isn't going to look gray anymore. It kind of looks a little bit see-through. So it kinda looks like a darker red just because it's black, but it's 50% see-through. And so it takes on the color that's behind it. Now again, when you're working with designers in the future, they're going to be using RGBA a lot just because that alpha, that transparency is really, really nice to work with. What I would like you to do is give this a shot, use RGB and then RGBA, you might have to Google a couple different colors. You can Google like, what is the color yellow in RGB. And then you can change the alpha with RGBA. 16. Applying styling to different link states: Let's talk about links. Links are pretty ugly by default. They're usually blue if they're not clicked and then purple if they are clicked. So I'm going to clean this code up from the last lesson here. Due to do. Give us some room to work. And so let's say we have some lorem ipsum in here and we wanted to make a link. We could do this. A HREF is equal to H t d ps Caleb dot IO. And let's turn this into a link and some extra white-space. And so, because we know in HTML, whitespace doesn't matter. Let's refresh our page and we can see we have all of this in one line and there's a link. Now this thing is purple by default because I've already gone to Caleb dot IO. If you haven't gone there, it's going to be blue. Let's go ahead and change this. So we can select this link with an a element because it's the only link on the page so we can slack and it's totally fine. We often worry about multiple links with multiple styles. And we can say the color of this is going to be red. And when we refresh our page, it's red. Now that doesn't look very good. Let's start making things look a little nicer. Let's say the color has to be black. It has to fit in with the rest of the text here. Okay, so that looks a little bit better. But what happens when I click and hold, depending on your browser that can actually change. What we want to do here is we want to be able to change these, these states, these link states. So now what we can say as a, and you can see when I do one colon after the a selector, it gives me all sorts of things to choose from. Some of these are pseudo-selector, Some of these are just regular selected. Let's go ahead and use hover. What happens when we put our mouse over the link? And so the syntax for this is our selector and then our state. And when we hover over this, let's change the color to blue. So I just save that. And when I go back to the page, you can actually see nothing happens when I refresh. However, I'll put my mouse over it and it's going to turn blue just like that. So now we have some sort of interactivity using just CSS. There's also an active state. So a active, and that's when you click and hold. So when you do a click and hold, let's change that color to red. So let's save that, refresh our page. When I hover over, it turns blue. When I click and hold, it turns red. So these are the different states of a link. We're saying by default, make it black. When you hover over it with an action with your mouse, make it blue. And when you click it, make it read. The last one we have here is visited. So we could say any link that has been visited changed the color of that. Let's change this one to something. It's gonna be really hard to see, but very noticeable, yellow. And because I've already click this link, right, I click, it, takes me here. I go back because I visited this link already. It's now yellow. And these are the different link states. So go ahead and give this a shot. I want you to create a link on your page. Change the default color, change the hover colour, change the active color, and change the visited color. I want you to experiment with these and get a little bit of experience with it because you're going to be using this probably every single day as a front end web developer. 17. How to change font sizes: Alright, let's take a look at font sizes. So font sizing, we've actually worked with this a little bit. All I'm gonna do here is create an H1 and put some Lorem Ipsum in there. And when I show you the page, yep. That is pretty obnoxious. But we can change this. And let's give this a class of small. And that's just what we're going to call it. And so we can say select all the ones on the page with a class of small. And this is new, this is a new selector. We haven't seen this yet, so we're gonna select every H1 and then make sure we only select the H 1s out of that group that have the class of small. And we can do font size. And let's make this like super tiny, like three pixels. So I'm gonna save that refresh and it's super tiny. I'm zoomed in quite a bit to, I'm at 200%. If I zoom out to a 100%, yet you can't even see that whatsoever. To 100%, you can barely even see that. So that's how we change the font size. And that's the font-size declarations. So its font dash size, colon space, and then your measurement. Now we don't use a measurement like three because three is not going to do anything. If I do this, refresh, it's almost like nothing happened. And what I can do here is comment this line out. So it's as if it doesn't exist. Refresh the page and we can see that nothing is happening. And that's because I gave it an improper measurement type. I said three, or I could say three pixels and that's actually going to do something. Let's go ahead and change that to like 30 pixels. Okay, it's a little bit smaller. What happens if we said 75 pixels? This is going to be huge like that. So that's the font size. There's not really much to do here. You've probably already worked with font-size in one of the previous examples already. I, just because I was using it as a way to example other things. But if you haven't used the font size declaration yet, go ahead and give this a shot. Don't forget to use pixels. There are other measurements, but we're gonna talk about measurements in the next lesson. 18. A glimpse into different measurement types: Okay, welcome back. Let's talk about measurements. So in most css, not all, but most, we are going to be using measurements such as pixels, EMS, REMS, things like that. So these are all different types of measurement styles. But for the most part in this course we're going to be sticking with pixels just because it's the easiest to wrap our head around. For funds ease, if you really want to level up your CSS game right now you can always go off and Google what an e m is an m. And you can always go and google White and REM is Remi. But throughout the rest of this course, we are going to be sticking with pixels just because it's a little more absolute and easier for us to understand at the very beginning. And again, this is a CSS one-to-one basics course. So we want to stick with just the basics for now. But even when you're working with a designer at design is going to come in. And it's going to say that something has, for example, a height of exactly 50 pixels. And so you might want to be using pixels for the most part anyways, instead of EMS or REMS, just because it is a lot more absolute. So there's nothing wrong with using pixels. We're going to be using pixels moving forward. But if you want to level up your game, you can always google what an M is and what a RAM is. 19. How to change your background colors: Background colors. Okay, let's save this page, and this is a blank page. And when I refresh my page here, we see absolutely nothing. Now we've worked with background colors a little bit, but let's go ahead and start making our page look a little nicer. Let's actually start working with some stuff that we can keep. So I'm gonna select my body element. And I want to give this a background color and then a particular color. Now I know I want off white and this might be a little bit hard to see at first, but hopefully when I do the transition, it shows up in the video. So this is just regular white. And if I refresh, you can see it's a little bit off now. Now what I can do is I can always re click, inspect, click my body, and you can see the background color is F5, F5, F5. What if I wanted to change that to red or black 000 or default wait. Doesn't do anything. At five, at five, at five. And this is what it's going to look like when I toggle this on and off. So white, white, white, white, something like that. And just so it's not as hard on the user's eyes, we could also do something a little darker, f z, f z, f z. And we can toggle this on and off as well. So now we have a very light gray color. So that's the background color. You can use a hex color, you can use a name color, you can use an RGB or an RGBA if you wanted to. We learned about color type's already, so feel free to use any color type you are familiar with. 20. How to add images to your backgrounds: Back round images. Let's go ahead and add a background image to our page. Now, background image has slightly different syntax, but we can say back ground image and we do IM AGE in HTML, it's IMG in CSS. We actually type it out its image. And this one isn't just like website.com slash IMG, dot-dot-dot JPEG. Not quite like that. It's very similar, but not quite. Instead, what we do is URL braces are parentheses. And then we put the link in here. Now this can be a relative length. This can be an image that's in your same folder or it can be an absolutely and can we learned about those in HTML? So you should be familiar with pathing and absolute and relative links by now. Now I don't currently have an image. Let's go ahead and grab an image. I'm gonna go to an Splash.com. And let's go ahead and grab this cool image because this is pretty nice luck and let's grab that original size. That's gonna be a big image, but let's grab it. And I just put that image into my CSS folder. So it's right beside my index.html and it's called background dot-dot-dot JPEG. And you can see it VS Code, it shows up here. And when I click it, we can actually see what it looks like. So that's pretty cool. And in the URL I'm gonna say background. And we have to make this just a touch smaller background dot JPEG. And that's going to link, and it VS code is actually smart enough to use this one. But it's going to link to this one over here. And this is a relative link. So let's go ahead and go back to our page. And even though we have a background color, the background image is going to take precedence. So let's go ahead and refresh. And well, we don't see anything because that image was far too big. So let's go ahead and try to contain this image. Now we can do background size and VS Code is gonna give us options there like we saw, contain or cover. Let's go with contain and see what the differences between contain end cover. So save that, refresh. And it looks like the images showing up over and over and over again. And in fact, you know what, this might have actually been too big of an image. So what we can do here is let's just go back to on splash. Let's grab a different image, something that's going to be a little bit, I wanted to look cool, but I also want it to be smaller. So let's grab, let's grab this photo of Chewy here. Let's download a smaller image, a small one. Now I have to background images. I've got background dot JPG. I've also got 2y dot JPEG. Let's open up VS code. We can see it in here. This is 2y I, I purposely downloaded a smaller image. And let's go ahead and comment this out. Let's just backtrack a bit. And let's type in 2y dot JPEG that matches the name over here. And with a standard background. There we go, that's better and we can actually see it's repeating over here a little bit and let's get rid of this. And that's totally okay. So now let's see what the background size containing does. It makes this image contained in the body element over and over and over and over and over again. What about cover? Cover makes sure that the image takes the entire width, the entire spacing of the entire body element. Now what's cool about this is we can say div stuff here. And we can change this from a body to a div. So let's select our only div on the page and refresh. And we can see that it's sort of starting to show up there. Let's go ahead and give this a height as well. Just for funds these, let's do 300 pixels. There we go. We can also give us a background color if something darker and C 000. But we have to move this onto the body. So now we're getting into a little bit of refactoring. This is completely normal. And you're gonna be doing a lot of refactoring as you start to write more and more code as well. Now we've got a background color of black. We can see the image in here. And it's going to take up as much space as I can from this element. So if we change this height from 300 pixels to 100 pixels, we only see basically this guy, let's say 200 pixels. And we can see just their heads. Let's change that background size from cover. Let's change it back to contain. And so what this is going to do is try to take this whole image and it's going to contain it in here. Now it's repeating because we want to see the whole image. But it also wants you by default, take up as much width as possible. So let's go ahead and change that background repeating. And we can do background. Note, not color, repeat. And then we can repeat on the x-axis, y-axis, or no-repeat. So let's say repeat on the, now it's already repeating on the x-axis. Let's go ahead and say no-repeat. And now we have an image on a page using a div. And this is a common practice. You're going to see this a lot. There is no image element, it's just the background. Now let's see what happens when we go in here, we changes to our old one back round ab.js JPEG. We can see that shows up in there as well. And let's just go ahead and undo that. And so this is background images in a nutshell. You have your background image, your URL to whatever resource. You have a background size container, you have background repeat, there's also things like background positioning. So we could do background position. And this is going to take, oh, look at all these different measurements, CACM, EMAX FOR I am all sorts of things in here. But these ones that we actually want to use, the named ones, let's go ahead and say center on the left axis or the x axis, left and right. And then center on the y-axis, That's top and bottom. And now we have an image that is perfectly centered. And what you can't see over here is our texts still shows up, but we've just centered that image. Now what I would like you to do is go to unspliced.com grabbing image, any image changed the background size, change how it repeats, change its positioning as well. And if you need a little bit of help with that on a div instead of on a body. And you can always just set the height to like 200 pixels. And you can make sure that the image actually works on your page because it's all about positioning. That's really what background images are about. It's about specialized positioning. 21. The most useful tool you can use: the developer tools: Let's look at the inspect tool. We did this in our HTML one-to-one HTML2 one courses as well. We can always right-click on the page and go to Inspect. And this is really important because we can click on an element like a body and we can see the styling. So I clicked on, right-click inspect, make sure you're in the elements tab. And then in the sub tab you want styles not computed or event listeners, you want styles. And then I just select the body and it's got a background color. I can toggle this on and off or I can change it if I wanted to, I could change it to red, make it really obnoxious. I could even go in here into the body itself. And I could say color is equal to white. And let's change that background color back to black. And all I'm doing is clicking around here. So I click in here, it lets me create a new declaration, new property and value. Or I can go in here and I can just click white edited, or it can go in here and change the color from color to background color and overwrite it background color. And to toggle these on and off, all we have to do is click that checkbox on and off. Now where this gets really handy is in that last lesson, we set a background image on this div. Now what if you don't know all the values? And because CSS has a lot of properties and also has a lot of values. And a lot of this comes down to sort of memorization and understanding where you can get your answers from. So you have a background size here. I'm just gonna click on contain its Lex it for me, delete. And now I can go to auto contain cover and I'm just toggling through these. I'm just hitting my down arrow and we can see what these look like. Three main ones here. So auto is the same as initial, as revert and unsat, but contained and cover are different. So we can see what we're looking for here. Now why this is important is because if we go back to contain and we wanted to change the height, we could do this and we can make that height bigger and bigger and bigger. And we're actually not going to see too much here, but we can make it smaller. And that's just because mine spectacle was in the way. And there we go. I don't know why it made a height a second time for 201 pixels, but all I did was click on the original 200 and go up or down. I'm hitting the up arrow or the down arrow. We can also change this to something massive like 3 thousand pixels, which isn't going to be huge. Or we can change the height to 300 pixels. And if we want to experiment, that's cool. We can, we can absolutely do that. We can toggle it on and off, see what the default is. We can do all sorts of things. And if you ever like, ooh, you know what else is there. You can always just type in background. And you can see all these different things. There's background attachment, blend mode, clip, color, image origin, position, position x, position y. Repeat. It goes on and on and on and on. There's all sorts of stuff in here. And so if you ever like, oh, I want to learn more about background images, for example. You can absolutely do that by going into your browser. And the nice thing about this is you don't actually need internet for this whatsoever, and you don't need to be able to google it. You don't need to be able to Bing search it or look for an answer on Stack Overflow. You can do all of this right in your browser. Now the last thing to note is I'm going to change a few of these things. So let's say I get rid of centering and I change it to be this. If I hit refresh, it's going to go back to the default value. And that's because we didn't actually change anything in our file here. This file is untouched. What our browser essentially does is takes a copy of our index.html file and renders it and then says, oh, this is the stuff that was rendered here. You can play with it. It's in a sandbox, it's playground. So when I hit refresh, it's going to go back to the normal page and I'm going to lose my progress. So usually what I do is I'll change something in there and then I'll take all this, copy it, copy. And then I'll just throw it in here and paste. And then I'll just fix up sort of the syntax here to make a little more readable. And you can see that it's exactly what we have written already. So that's, that's how I make changes in the browser and then copy it into what I actually want to keep. Moving forward. We're going to be using the inspect tool a lot. And moving forward, you're going to want to rely on the inspect tool to see everything that you can possibly see. 22. Changing your text alignment: left, center or right: Let's take a look at text alignment. So let's say we have an H1 on our page. Hi, my name is Caleb. We can select this one and let's do this with an ID. So we've got an ID of intro. And we can say select the one with an ID of intro. And in here, by default, this is going to be aligned to the left. So let's refresh our page from what we were working with and it's aligned to the left. Now said we wanted it to be centered or to the right. We can absolutely do that. All we do is text align. And we can say Center, justify left-right, start, inherit initial or uncertain. We want Center. And so what do we save this and refresh our page? It's centered. Now, a cool thing we can do here is we can just go up to our element. Right-click inspect. Make sure you selected, you've selected that H1 and where it says text align center, we can change this. So this is what center looks like. End, initial, inherit, justify, left, revert, right? There's all sorts of stuff in here. The ones that you're probably going to work with is going to be left, right? Justify when there's enough text. And we're not gonna get into that one and center. So left, right, center and may be justified. In this lesson, what I want you to do is create some texts used like an H1 and change that text alignment to be centered. Then open up your inspect tool and change it to be right. Like that. Now if you are writing HTML and you've been writing the center element, no longer use that. You can rely on CSS and said it's better to use CSS then to use the center element. If you have not been using the center element, please ignore that you saw nothing. Once you are done that, let's head on over to that next lesson. 24. How to add a rounded border: All right, continuing from that last video, what I did here was a border width of five pixels, border style of solid border color of red. So is this ugly red border. Let's go ahead and make this really atrocious. Let's see if we can really make this obnoxious 50 pixel width border. Yeah, that's pretty groves. That's honestly to gross. Let's do 15. That's a little better. So in this lesson we're going to be talking about border radius. And we can do border radius as the property and then it takes some sort of value. Now typically you're going to be working with either pixels or percents. So let's do a ten pixel border radius. And what this is going to do when a refresher pages, it's going to make a nice little angle here, nice little radius, just like that. Now we can apply this to images, not just borders. We're can apply it to anything, any element out there, as long as it has some sort of hard edge. Well, luckily, every element in HTML is made of some shape of rectangles, so they all have hard corners and you can apply a border-radius to everything. Now what if we didn't want the border radius to be ten pixels? What if we wanted it to be as round as it could possibly be? Let's do 50%. That's looking pretty gross. And, you know, it's good to know that we can do things like this as well because there is a place in time for this. And I'm gonna show you right now how this sort of work. Now this looks disgusting. But what if we said this element has a width of 200 pixels and a height of 200 pixels now is going to be perfectly square. I'm going to comment this out. And this is going to be perfectly square like this. Let's move that down. And we have a red square. Now if I uncomment the border radius, we can see it's a perfect circle. So now there is a place and time for a border radius that is super obnoxious like 50%. Now what I would like you to do is create a new div on your page. Give it a border, some kind of border. Give it a border radius of 50% or five pixels, or ten pixels or one pixel if you want to be like really, really elegant about it, give it a width and a height so that you have a perfect square and then just fiddle around with it. So give that a shot, pause the video here, and when you're done, hit Resume and we will learn a little bit more about border-radius. Okay, so this is border-radius and what this does is it applies the radius to the left and the top left, the top right, bottom right, bottom, left corners all equally. And I commented that out. So we're not going to see that anymore. And what we can do is we can specify an individual corner. So we can say border, top left radius is going to be, let's say five pixels. Border top right radius. Let's make this one obnoxious. Let's make this 50 MS2 border. Bottom rate radius. Let's do this one as five pixels. And the border, bottom left radius. And now we have something that looks a little bit like a leaf. So we're now we're starting to make shapes, which is really interesting because all this is, is a border. And what I find to be kind of peculiar is if I right-click on this element, go to Inspect and hover over this, you can actually see it's still a square. Your browser thinks this is a square, but the CSS engine then renders it to not be perfectly square. So what I would like you to do now is try to fiddle around with the border, top left radius, top right, bottom right, and bottom left radius. Now if you're feeling really spicy and you want to go one step further, we can always do border radius. Five pixels, 15 pixels, 55% pixels, 50%. And what this is going to do is top-left, top-right, bottom right, bottom left. And that's going here, here, here, and then down here. And that's going to go in a clockwise order. Go ahead and have some fun with this. This can really spice up like your own profile, your portfolio page, if you will. 25. Vital: Different display types: Let's look at display. So in HTML 101 and HTML2 01, we learned about different block types and so on. H one, this is a block element and a span. This is an inline element with more text beside it. And if we do with more text beside it, we're going to see something very interesting. So when I load up my page here, this is a block element, this h one, and you can see it's taking up all this extra space over here. It's a block element. It's selfish. And once they use as much as possible space, even if it doesn't need it. And you can tell that's a block element because even though this is a block element and we wrote with more text beside it, it kicked it down into it's own line. Whereas the span is an inline element and it's that, you know, and I'm only going to take up the amount of space that I actually need. And yes, other elements and other texts can live beside me. I'm totally cool with that because I'm not selfish. But block elements are kinda selfish and they take up all the space that they possibly can. Now with CSS, we can overwrite this. And this is really important because you're going to see one element over and over and over again. And that's the div, the development. This is a block element. The div element is a block element is going to be selfish, is gonna take up as much space as it possibly can. And so let's say we have these two block elements and we want these to be side by side. We can do that is we can overwrite this. Now with CSS, we can say select both divs on the page. And we can say display and its default behavior as block, but we could say display inline. And let's also give us a border, one pixel, solid red. So both of them have a border and we can see where we're working. In fact, actually, let's back that up. Just one sec. Let's change this. Let's comment this out. These are block elements as taking up all the space that they possibly can from left to right. Let's change the display type to inline. Go back to our page and hit refresh and the work side-by-side. Now why this is important? Well, there are probably 1000 different use cases, but the most popular use case that you're going to see is div. Divs or block elements, but they're also dummy elements. They don't actually mean anything. So you're going to be overriding display block from a div to display inline, inline block. Now, now here's the difference between inline and inline-block. Okay, this is a very important thing to distinguish, is honored div here. If we said the width was supposed to be 200 pixels each and the height was supposed to be 200 pixels each. And actually this is really cool. I didn't know that VS code does us, but this tells me here that the property is ignored due to the display with display inline, the width, height, margin, top margin, bottom, and float properties have no effect. So now we're getting into internal rules of CSS. So when we go back to our page, it has absolutely no effect. Now to get around this, we simply say display inline block. And when I refresh the page, we can see that they turned into proper squares. What I would like you to do is fiddle with this because this is a vital, vital, vital, vital for working with CSS. I want you to create two devs and then I want you to make them side-by-side. Use display inline, and then inline-block and set a width and height on both of them. Make sure that they can be side-by-side and that they are two squares, just like I did in this video. Give that a shot. Once you've done, let's head on over to that next lesson. 26. Changing the default width of an element: Let's talk about width here. So let's go ahead and create a new element. I'm going to style it first and then I'm going to give it an element. So let's select a div that has a class of half width. And here we can say the width is going to be 50%. And I can actually read this and create something out of this. Now watch this, this is really cool. And VS code, I can do div dot half width and then hit tab. And it won't my class out for me. So basically I just wrote CSS, hit tab and it wrote out the HTML for me. That's really cool. That's called an Emmett abbreviation. This is half width. And so when I refresh the page from the last lesson, doesn't look like much is happening, but in my inspect tools here, in my Developer Tools, you can see that it's actually taking up half the width here. And if I scroll all the way down, I can select that inside here. And it's only taking up 50% and I can change that to, let's go ahead and change it to 90%. And now you can see it's taking up 90%. Now I find that hard to work with. So what I like to do is add a border. So I do border one pixel, solid red. And this just shows me what I'm working with here. So when I refresh the page and went back from 90% to 50, because I was just fiddling around in the developer tools and it doesn't save your work there. So I changed that with back to 50%, gave it aboard and we can see what we're working with here. Now. We can also give this a width of something a little more solidified. So 50% is 50% of your browser. So if you shrink your browser down, and I'll show you what I did there. Let's go back. Right-click inspect, and I'm using Google Chrome for this. Click this little icon toggle device toolbar. And we can see when we toggle this, that the width is always 50% of the page. It's never, ever going to change. It's always going to be 50% of the page, even if that page is super tiny. And this is 300 pixels wide. So this is a very small mobile device. Or we can say, let's say 500 pixels. And when I refresh this, and this is pretty hard to see, I apologize for that. Is it's always 500 pixels here, always, always, always. And so when I do this, we can see it's always 500 pixels. And when I do this, the box itself actually isn't getting smaller. My viewport is getting smaller, but watch us when it gets small enough, it bumps on over. So that's really hard to see. Kind of a terrible example, but there are two different ways to specify a width. Now, the thing to know about width is you need to have display inline-block or display block set one of the two. It's important that you have one of the two set because if you said display inline and you set a width VS Code is already complaining here. Let's go ahead and get rid of that view. Inline is only going to take up the minimum amount of width that it possibly needs. It's not going to understand that you want a width of 500 pixels. So to get around that, we do inline block. That works. And we can check this out. We can see that it only takes up 502 pixels on my screen. Or we can do blocked. Same thing, 502 pixels on my screen, but it also takes up this extra white-space there. Now we can do the same thing without a div. We can change this to a span. Let's get rid of display block. So it's, it's normal thing and let's go ahead and change this to a span. So span, half width, 500 pixels, one pixel solid red border. Will span is an inline element and we can tell it's an inline element because the width is not being set here. We can also tell that it's an inline element because if we go here and just hover, it's using the minimum amount of space possible. But we can overwrite that. We can say display inline-block or display block. And this will now accept width. 27. How to change the default height of an element: Height. Let's talk about height. So we, we talked about width in the last lesson and how it works with inline, inline block and block elements, or how it doesn't work with inline elements rather. So I'm not gonna go over that again If that was sort of beyond your understanding when I just said this about ten seconds ago, definitely go back to the lesson on width where I talk about the different display types. So let's go ahead and give this a height of 500 pixels as well, height 500 pixels. And you can see that this is actually getting easier for us. We've spent a little bit of time together. We know that this is a property, this is a value, this is a selector, and we can have multiple declarations in here. And so width, 500 pixels, height 500 pixels. We don't really need to go over like what height actually is in the English language. We know what it is already, and we know that width works one way, so height should probably work in a similar way. We're speeding up how fast we can learn CSS here, which is really nice. They'll go ahead and refresh this page and get rid of that. And we have this big square. Now that might be too big. What I'm gonna do here is select that 500 pixels, go to Selection, add next occurrence. And now I can type in two places. Let's do 250 pixels each. Save that. Now we have a square. Now as a quick recap, width and height are only going to work if you have display inline-block or display block set. It's not going to work with inline because I'll show you just doesn't work with inline. Inline is supposed to be side-by-side, takes up the least amount of space. It's very, very polite. Whereas inline-block and block or little more selfish and they take up as much space as they possibly can or as much space as you tell them to. 28. Adding box shadows for an eye-popping element: Box shadows. Okay, this is a really, really cool ones. Let's go ahead and create a new box here. And I'm going to actually get rid of all of this and let's delete that and delete that. And let's create a new element on our page with the idea of box. So BOX AND I hit tab because it shows em at abbreviation, shows me what it's going to be. And that's all I'm going to do. Now. I've got a div. We know it's a block element and I can select that ID with box. And I can say the width of this box is going to be 200 pixels. The height of this box is going to be 200 pixels, and the border is going to be one pixel, solid black. And let's not make it one pixel, let's make it two pixels. And we're just going to see a black box on our page, just like that. Now what I can do here, and we're going to start using a lot of components together is I can add a background image. And let's add the URL. And let's add chewy in there. Let's say the background position, it has to be center and center. And let's say background size needs to be cover. And let's see what this looks like now. Okay, so we filled it with a background image. That's pretty cool. Let's go ahead and add a border radius of 0 on the top, 50%, on the top right. The bottom right is going to be 0 and the bottom left is going to be 50% as well. So it's going to look somewhat like a leaf like that. And I think I might have said that backwards. So this is top-left, top rate, bottom rate, bottom left. Now with a bach shadow, we can say box shadow in this, this is a very interesting one. So we want the x-axis, the y-axis, and the color. So on the x axis, let's move this over ten pixels. On the y-axis. Let's move this over ten pixels. And the color, let's make this red just so it's obnoxious. And we have some sort of box shadow. Now, that's not bad. I don't mind that. But let's say, you know, we didn't want such a hard line there. Let's say we wanted to blurred a little bit. We can say x. Why? And then as a blur value, we can say, let say, five pixels of blur, and then change it to red. And we can see that it gets a little blurry there. We can actually make significantly blurry or t, let's do 15 pixels. There we go. Now, that sort of suggests that there's some sort of light over here. Let's go ahead and change that X two like two pixels. So it's gonna move right to pixels and then it's going to move down into pixels, the y-axis. And we have some sort of glow back here. So that's looking pretty good. Now there's one other thing we can do. Let's go ahead and get rid of that blur. And that's what our border looks like. We can also say inset. So give it a box shadow on the inside. So it looks like it's a little bit hollow. Look at that. So that's not bad. Now, that's red. Let's go ahead and add 444444. So a darkish color. And let's change these two pixels and go to selection. At next occurrence. Let's make these six pixels each inset and a dark grey color. There we go. Now it's working on the inside. And we can also blur this. So before insight we can say five pixels. So we can say move it on the X axis, six pixels, Y axis six pixels blur every pixel by five pixels. Inset means the box shadow is going to be on the inside. And then we set the color. And let's go ahead and refresh. And we can see that there's some form of a blur in there. Let's go ahead and make that blurrier. There we go. And so now we're sort of working with all of these individual components are these declarations or making it bigger into this bigger image component called a box. And it's called a box because I gave it to the idea of box. It doesn't have to be called box. We could call it leaf. And it will see nothing changed. So again, your box shadow goes x, y, blur if it's inset or not. And then the color. What I would like you to do is give this a shot, create a square. You don't have to do all of this stuff, but create a square, let's say a 100 pixels by a 100 pixels, go ahead and give that a bach shadow, say your X axis, your y axis. You're blur value. Make it inset and not inset. So toggled them on and off and then add a color. 29. Padding: the internal element spacing: Alright, let's talk about padding and margin padding and margin R2, things of the same coin. There are two sides of the same coin, but they do different things for a different reason. So let's go ahead and start off by creating a box. And this box is going to have a width of a 100, 100%. That's way too much. Let's do 200 pixels. Height of 200 pixels. And a border of one pixel, solid, note dashed, blue or something like that. And all I want here is some sort of box to show up. And so in here I can type box and it creates a box for me. And look at that standard box, nothing fancy. Now, when I right-click on here and go to Inspect, I can actually see that a, this is a block element is taking up all this extra width over here. But if I scroll down in my Styles area, so I clicked on elements and clicked on my element, the box, click on styles and scroll all the way down. We can see that there's padding, margin and border. And so this is our element here. It's 200 by 200 and it's exactly what we set it to be. Then there's padding that's spacing on the inside of the border. Then there's the border itself and then the margin around it. So let's talk about padding. Padding is going to be on the inside so we can do a nice example like this. So example of text, there's a weird way of saying that refreshes page and it says example of text. Now if I wanted to add some padding so that my text doesn't hug that border. We need some sort of spacing on the inside and that is called padding. So we do padding and let's add ten pixels. And that just sort of widens and widens the gap in between the content and the border. And if we scroll on down, we can see that our inner content is still 200 by 200. The padding is ten pixels on either side. On all four sides, we have a one pixel border and there's no margin. Now a lot like with our border radius, and I'm going to add that padding in your padding, ten pixels. A lot like our border radius, we have top, right, bottom, and left. And we can actually see that in here. We have top, right, bottom left, and there is a shorthand way of writing ten pixels, 15, 20-30. We could change all of that. So we could say, let's first of all comment this out. And we can say padding ten pixels, that's the top. Then let's do this. Top right, bottom left, he goes in clockwise direction. So ten pixels on the top, 15 pixels on the right, 20 pixels on the bottom, 25 pixels on the left. Refresh our page and we can see that, yep, it definitely did something over here. And when I click this and go over here, we can see top is ten, right is 15, bottom is 20, left is 25. And so that's how we add spacing on the inside of an element. This is very, very, very important. In the next lesson, I'm going to talk about margin, which is essentially the exact same thing, but the spacing doesn't live within the border, lives just outside of the border. 30. Margin: the external element spacing: Let's take a look at margin. Margin is a lot like padding. However, padding is inside of a border and margin is on the outside of a border. So carrying on from our last video in our last lesson, let's go ahead and add a margin of 30 pixels. And when I go back to my page and hit refresh, this isn't going to say dash, this is going to say 30303030. So refresh. And there we go, 30 all the way around, and it gives us 30 pixels all the way around. Now, we're going to see something weird here is it's also saying the margin is also all this area. And that's because it's a block element. Let's go ahead and change this to display inline-block. And you're going to see that it actually respects the margin, the 30 pixels all the way around it. Let's go ahead and scroll to the bottom so we can see that it's taking effect on the bottom as well. And again where it says styles here, you can just scroll on down and it will show you what it is. And just like padding, it doesn't have to be just margin 30 all the way across. What we could say is let's copy this. And I just copied that whole line margin. So we've got top, right, bottom, and left. And now we can see 10152025. That's exactly what we told it to do. Now a really cool thing if you ever want to center an element is we can do margin. Let's say we wanted margin auto. And what this is going to do is automatically center this for us. And actually I forgot to thing. It needs to be a block element. So this one needs to be a block element. And that's why it reserves that extra space all the way over here. That block element is reserving that space in case it needs to move around a little bit. So when I hit refresh, we have now centered our block element. And if you want to give it a top and bottom margin, and we can always say margin, top 50 pixels. Margin bottom 50 pixels. And there is a shortcut way to do this as well. We could also, or alternatively say margin top 50 pixels, right Auto, bottom 50 pixels, left auto. And we can comment this out as well. Go back to our page and refresh. And that top margin has been applied, but it's still centered in the middle of our page. 31. How to set a maximum width on an element: Okay, let's talk about max-width. We have been working with width quite a bit. Let's go ahead and use max width. Now, max width is not necessarily going to be used on every single element, but it is going to be used on, let say, an inline element. So let's say we have some sort of element with an ID called inline. And it's going to have a, not a width, a display inline block. Let's go ahead and create this element in line, hit tab and some text here. And let's also give that a border so we can see this border, one pixel, solid red. And so we see this text here. Now we can say because it's an inline block element, that it should only ever reach a maximum width before the text breaks onto a new line or overflows. So when we say give something a width of, let's say 500 pixels is going to give us a width of 500 pixels. But let's say we wanted it to be flexible. So it can start off this small and it can get up until this size. We would use a max-width. So let's go ahead and add a max width. And we're going to see that the width actually changes back down to the minimum size. And in our tool here or developer tools, we can right-click and SPECT. And let's add a bunch of text. I'm just gonna copy all this stuff in here and we're gonna see something very interesting. This doesn't take up the entire width. This takes up 500 pixels, 502 pixels, actually, because there's a border on the left-hand board. On the right. They're both one pixel, so 502 pixels in total. And what we can do is because we've selected this element, we can say that max width. Let's click on that and let's go see we're making it bigger and bigger and bigger. And eventually the text is going to start getting a little bit shorter and wider on the page. That's what max width is. So a width is a hard set value, as we were saying, the width has to be like 500 pixels. But a max width can be anything between 0500 pixels or, or whatever you set that value to be. It doesn't have to be 500, it could be any value. Now you're likely not going to use this too much in your project, but it is good to know about. So there's nothing to do in this particular lesson. And the next lesson, let's go ahead and get started with capacity or pesante opacity. 32. How to make elements see-through: Alright, let's talk about making things see-through with opacity. Mercer called opacity. I don't know. I've heard people say it either way. So for this, we need to start layering our page. So in our body, what I want to do is add a background image. And I'm going to set the URL to be 2y. Let's go ahead and refresh our page here and we have this image of Chewy. I don't really care that it's repeating right now. We could totally touch it up if we wanted to, we know how. But I want to create a box somewhere on the page and be able to see through it. Let's go ahead and create a new CSS element. Let's give it an ID of box. And it's going to be display. Block width 200 pixels, height 200 pixels. So now we have a perfect square. We could do margin. We know how to do this, we know how to make this centered. So we could do margin auto that will center it for us. Or we can say margin top is going to be 50 pixels to the right is going to be automatic. So it's going to center it for us. And because I only have two values in here, it's going to repeat these two values so it can be top, right, bottom left. Let's go ahead and add a background color of black and make that text color white. And text align center. And you can see we're starting to really piece all of these things together. And I'm going pretty fast with this. Let's add a padding of 25 pixels as well. And so what we should see here is in the middle of this page we're gonna see a 200 by 200 block with some white text on black background box. But before we do that, we actually have to add the box to the page. There we go. So it looks like I'm centering the dog. That's funny. Did not mean for that to happen, but that's still funny. So what we can do here is we can actually make this transparent. Now there's no text in here. Let's go ahead and talk about chewy real quickly. Hi, this is chewy. He's an amazing logo. White text, paddings kicking in Texas centered. Things are looking good, but let's say we actually wanted to see the dog and we didn't want to censor him. Well, we could say is opacity. And instead of saying like a 100% or 50% or 10%, we use a decimal. And so 100 is always equal to 10, is equal to 050, is equal to 0.5. so a quick little math lesson there. So let's say we want this to be 50% see-through. We could do 0.5. And now we can actually see through it. Now, we can't see is this text is also transparent. Now, this is one way of doing opacity and this is going to change this entire box to be not transparent but translucent. It's going to be 50% see-through. Now, we could do this a different way and make that text make sure that it's not see-through. So a good example here would be color is equal to red. And that's not really read. That's pink. And it's because it's 50% see-through. Let's go ahead and comment out that OPA city, it, pass it. And let's change that background color to RGB a. So we're gonna do 0.5000 for 50%. And this is going to change the background color. But that text color is not going to change. It's not going to be 50% transparent because we said, hey, the whole element has a 100% transparency, but the background color, just as one declaration, has 50% see-through rate. And there we go. That text is a little more bold, but that background didn't change. So there's two ways of doing opacity here. You can use RGBA, which a lot of people are going to do because opacity isn't going to change the entire thing to be translucent. Or you can change the entire thing to be translucent using opacity. Now what I would like you to do is experiment with this. You can even use this exact same code that I've written here. But I want you to experiment with this using RGBA and opacity. And remember, because we're using translucency or transparency, we're making it see-through anyways, we want to use a decimal, not a percent. 33. Moving your code to an external file: Alright, let's take a look at external CSS. This is very, very important. So, so far we've been writing all of our styles inside of a style element. What we can do is we can throw all of this into an external file. So we create a new HTML file, not an HTML file, an HTML element called link. So I just take link hit tab and it created a rel style sheet. And this is the relationship of the linked documents. And we're saying, hey browser, there's going to be another file that you need to go and fetch for us. But just so you know, it's going to be a style sheet. And then the HRF is going to be the name of the South. Who had you do style.css? Now, just taking off from that last lesson, if I right-click and inspect and go to console and then refresh my page. We're going to see 404 error file not pound found style.css and does not exist. And that's because we don't have a file called style.css yet. So what we can do here is new file, style.css, and it's empty. There's nothing in it. So if I go refresh my page, that error doesn't show up. So my browser now knows that there is an external file being pulled in and it's being pulled in properly. Now there's nothing in there. But what we can do is we can say grab all this stuff and cut. We can get rid of our style here. And we can go to our styles.css and paste. And we can get rid of that comment that's not needed. And just save that file. So we save both files here. And now we've cleaned up our index.html file. All of our CSS is in its own main.css file. Refresh the page and everything works perfectly. Now if I were to delete everything out of this page, this page would be pretty boring. But if I were to put everything back into this page, it has a little bit of life, little pizzazz. Now. Now at first you're probably thinking, well, why on earth would I do that? What's really nice is you can create another index file or another file we'll call this second dot HTML and some other text and CSS 101, let's change this to second page. And so now we have two index or two HTML files. We've had index.html and second dot HTML. If I go back here, index.html works. And if I go to second dot HTML, this works as well. Actually, that change my zooming level. There we go. So when I flip between the two pages, I get all the same styling, all the same good is, but I can change my tax, I can change my content. Now again, where this gets really, really powerful is if you have a 100 HTML files, you don't want to be writing style. And then going in there and being like Box yada, yada, yada, and copying and pasting that a 100 times that will drive you nuts. And that is no way to live your life as a web developer. Instead, we throw everything into an external file and then we link to it. And now I can change, let's say I can get rid of the background image on style.css and it's going to take effect on both index and second dot HTML. So let's go back to our browser and I'm gonna hit Refresh, and this is on second dot HTML. We can see that up here. I got rid of the background. And if I go back to index.html, I got rid of that background as well. And all I did was commented out in one place instead of two places. And so it's a lot more efficient to write your code like this. Now there's another benefit is when you are serving your website, your browser can actually cache this entire CSS file, so it doesn't have to download it every single time you view a page and it's actually significantly faster, so it's good for your users as well. So the preferred way to write CSS is in a CSS file. I just called it style.css. You can call it literally anything you want dot CSS as long as it has that dot CSS in there. Now I really, really need you to give this one a shot. This is very, very important. This as again, super vital part of CSS and HTML and how they link together. So in your index.html file or whatever file you're creating, I want you to add a link. Take all of that styling throat in your style.css. Notice how there is no style element in here. There's no style element whatsoever. And then take your insides, the inside of this element. So you had a bunch of stuff in here. Take your selectors, cut them, and put them into your style.css file. So make sure that works with an external file. And then after that, I want you to level that up, copy this file into Lake. Another one called second layout.html, and make sure that your CSS file loads on both pages at the same time. 34. How to float your elements like a newspaper article: Alright, let's take a look at floating elements. So what I'm gonna do here is I'm going to, I'm gonna comment out this box and I'm gonna keep my external stylesheet links to my page. So I'm going to write code in style.css, but I'm not going to delete this. I want to keep this because maybe I want to use it some other time, but I'm going to leave or make some extra space to work here. And what I wanna do is demonstrate floating elements. And so a floating element is very, very interesting. So we can have a paragraph and we can put lorem in here, and we could copy this paragraph over and over and over again. Let's go ahead and copy this over and over and over. Actually, nope, that was wrong. That's back that up. Let's add a line break. Let's do this. This way. Due to, due to, due to, due to do. We're going to have a lot of text in here. And let's refresh our page. And so you can see that style.css is still working for us actually, let's go ahead and comment that out because that's going to be counter-intuitive to this lesson. There we go. And so we have all this text in here. And now the idea of floating is when you have an image, you can put an image somewhere in here and you can either make it float to left or float to the right. And that's going to make your text wrap around everything. So let's go ahead and add an image and I'll show you what a normal image looks like inside of a big paragraph like this. We could do, let's say the BAR here, we can say IMG SRC is equal to 2y dot JPEG. And let's give it a width of 200 pixels or 200 pixels. And the height is going to be automatically inherited. So whatever the aspect ratio is for a width of 200, it's going to have the proper height. And that didn't work because I spelt surely wrong. Ok, so we've got this image over here and it's close, but it doesn't really look like a, like a news website or, or like a newspaper would do it. We would actually want the text to wrap around here. So what we can do is we can say style is equal to float. And then we can say float, right? And what this is going to do is boom, move that image all the way to the right and have text flow around it, which is really, really nice. We can also say float left. And it does the exact same thing. Now we can also add some margin round here, margin ten pixels, just so that we have some spacing around there. We could do border. One pixel solid black, and I'm doing internal CSS here. And then I can say, give this a box shadow, x axis 0, y axis 0. Let's make it blurred by five pixels and make this black. And now we have some sort of image that actually sticks out. Now this is all internal CSS and this is probably the most frowned way of writing CSS. So I'm gonna grab that, cut, delete it, and I'm gonna give this a class of floating image. And then if I go over to style.css, I can select that image with Image.all floating image. Alternatively, this would work as well. And I can just paste that in there. And so newline. Newline, newline. And if I did that right, and I refresh this, nothing should change. Beautiful. And if I wanted to change that floated, I could change that to right. Just like that. And so that's how we sort of make images and content float side-by-side. Now, what do you think is going to happen if I have two images floating side-by-side like this. Let's take a look. They float side-by-side. They literally tried to get as close to each other as possible and others a little bit of text in here. And so it's good to offset things as well, which is very, very interesting. So you might not get the exact outcome that you're looking for, but it can be very, very close. Now the nice thing about this as floating image is going to be floating to the right, we can overwrite this with internal CSS. And this is a good case for internal CSS. We can say float left. There we go. That looks a little bit better. Now, I really want you to give this a shot. You're going to be using floats quite a bit until you get into significantly more advanced CSS. Floats are very, very important at this point in time in your development career development path. So make sure you are somewhat familiar with them. What you can do as another, It's sort of fun example or as something to play with is you can do an ordered list or an unordered list and lie. And you can put them all side-by-side. Or you can have div dot float. And you can put these all side-by-side and make them float side-by-side. Go ahead and give that a shot and don't feel like you need to master this one. But give it a shot, have some fun with it, and just sort of get some hands on experience with how this one works. It's, it's a little bit weird to get a hang of at first, but it's really good to tinker around with it and just experiment. 35. What we haven't learned yet: Okay, let's take a look at what we have not learned yet. A lot. We have not learned a lot. Css is really, really big, and we learned the most common ways of doing things. But there are a lot of other things that we didn't learn just because it's very advanced. And I have a class called the CSS masterclass. It's something like 16 hours long and it covers everything else you're about to see. So here's what we didn't cover. Transitions, animations, positioning, overflows, lists, tables, the box model, attribute selector, pseudo-selectors form styling, flexbox grid specificity gradients, things like that. We did not cover any of this. And there's actually significantly more to it as well. This list is not a very comprehensive list. But if you wanted to go and continue learning your CSS, I would suggest my CSS masterclass course. Or you can always go and google some of these and start to play with it on your own. You know Enough CSS to be very dangerous now. So you can always just go and Google your own tutorials and read up on different ways of coding some of these different properties here. I have full faith at this point. You are actually able to pick up any of these quite easily. 36. Your final Skillshare project: Okay, let's talk about your project. So your project here is going to be to go to rocket man adult learn wag tail.com. And I want you to recreate the navigation and the hero section using what we've learned. This, I want you to recreate this. Now you can always go to that website and you can right-click and spec and see how I did all these different things. And that's gonna get you pretty far, but it's not going to get you all the way. This particular page uses a different type of styling, uses a framework. It uses things like flexbox, which we didn't necessarily learn. But there are ways around that. And I'm going to leave that up to you to figure out how to get around more complex things by using simpler methods. And that's actually a really good thing to learn in web development. Always keep things as simple as possible. Now, this is not an easy project and I'll just flip back here. This is not an easy project, but it's really, really good practice and it uses everything we have learned in this course. So once again, this is not an easy project, but it is perfect practice. And the reason I say that is because one day a designer is going to hand you a design and it's going to look something like this. And they're gonna say, okay, now you have to code it and you have to figure that out on your own. Now you can always go to rocket man, dollar and wait till.com and you can see that right up here. But yeah, i designers gonna say Here's a design, make it happen. And you're gonna have to try to make it happen. And you're not going to have very much guidance or support and you're gonna have to figure that out on your own. So this is really, really, really good practice. This is real life practice here. So go ahead and go to rocket man. Don't learn, wait till.com. Recreate the navigation and hero section using what we've learned. If you're like, oh, I don't have access to this particular image or this logo. That's okay. You can use your own logo. You can just Google something. You can throw any image in there that you want. It doesn't also have to be based on rockets. This is just a fun little website I made once upon a time. You can make it about coding, your favorite food, your favorite family member, your favorite hobby. It can be really anything. But recreate this layout and feel free to swap out the contents. So the text that you see on here, or feel free to swap out the images are both. With that said, go ahead and give that a shot reference. Anything you need, feel free to Google as much as you possibly need in order to get to the answers that you're looking for. And a lot of questions will come up in it's totally normal, but feel free to Google your questions so that you can find the answers. And again, that's a big part of web development as well. 37. CSS 101: Summary: All right. You have gotten through CSS 101. That is a very, very big deal. So first of all, I would like to say thank you for taking my skill share course. I hope you learned a lot and don't forget, you can always follow me here on skill share for updates on all of my new courses and other educational things that I put out. And don't forget, you can join me in 57 thousand other developers in the learning to code Facebook group. We can ask questions, get feedback on your projects, and get new ideas, get some inspiration, continue learning, learn other things that aren't covered in this course. Again, ask lots and lots of questions and join a community of learners. Last but not least, I'm Caleb Talia. I've been your instructor today and congratulations on finishing CSS 101.