Become A Web Developer - Part 5: CSS | Andrei Neagoie | Skillshare
Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
7 Lessons (1h)
    • 1. Your First CSS

      13:48
    • 2. CSS Properties

      10:31
    • 3. CSS Selectors

      16:28
    • 4. Text and Font

      7:37
    • 5. Images in CSS

      4:15
    • 6. Box Model

      5:06
    • 7. px vs em vs rem

      3:03
11 students are watching this class

About This Class

CSS and CSS3

This is the tutorial you've been looking for to become a web developer in 2018. It doesn’t just cover a small portion of the industry. In this multipart video series we will covers everything you need to know to get hired: from absolute zero knowledge to being able to put things on your resume that will allow you to live the life you want. 

Sounds too good to be true? Give me 5 minutes of your time to explain to you why I built this course and what is different here than thousands of other courses all over the internet.

  1. There is no wasted time here. We won’t be using outdated technologies like PHP, Wordpress and JQuery. Although still useful, outdated technologies like the above are low paying and demands for them are decreasing. In this course, you will learn the specific technologies that are the most in demand in the industry right now. These include tools and technologies used by the biggest tech companies like Google, Facebook, Instagram, etc… It’s geared specifically for people that want to learn employable skills in 2018.

  2. After finishing this course, you will be able to apply for developer roles, or upgrade your job title as a developer and earn a higher salary. We won't be taking any shortcuts in this course. I am going to take your from absolute zero, where I teach you how the internet works, to mastery, where I show you how to build an image recognition app using a Machine Learning API (a subset of Artificial Intelligence).

  3. This course is taught by an instructor who has worked in silicon valley, and one of the top tech companies in Toronto. I have built large scale applications, and have managed a team of developers. I have worked directly with these technologies. I am not an online marketer or a salesman. I am a senior software developer who loves programming and believes that there needs to be a course out there that actually teaches valuable skills.

  4. I know your time is valuable. You want a course that outlines the best way to learn the topic in simple, well explained methods so that you fully understand topics instead of watching somebody on your screen and having no clue what is going on. I have created this course after consuming hundreds of books, tutorials, and online courses while I was learning. I have taken the best pieces, the best methods, that I have found, and condensed everything so that you can learn in the most efficient way possible. 50 hours of videos doesn't mean much if the instructor isn't engaging or focuses on outdated topics. 

  5. We have a thriving online chat community so you really feel like you are part of a classroom and not just watching videos by yourself. You will have a chance to communicate with fellow students, work on group projects together, and contribute to open source. Anytime you have a question you can ask in the chat and someone will surely be able to help you right away. 
  6. The course is designed to give you employable skills so you can get a job. Here is what one student recently wrote after taking the course and being hired right away: 
    "I’m a self taught dev, who has been out of work for ~6 months. I had some family things that came up that prevented me from seeking permanent employment, so for awhile I was Postmates/Uber delivery driver.
    After taking this course, I immediately got catapulted back to where I was before, but better equipped and with the knowledge to take on the next job. I had just finished the React section when I went to a recent interview, and it really helped me excel. As of today, I am officially re-employed back in the field, and it is all thanks to this course. I had a blast creating the final project, and FINALLY got around to learning SQL statements, and getting to use them in a project. I’m really ecstatic that Andrei went with teaching relational databases over something like MongoDB, which can also be fun, but is less practical for use on the job. So thanks Andrei , I really enjoyed the course and will be making sure to share it with others who find it helpful. I’m also looking forward to the new ES7/8 content that was recently added, and going through the DB stuff again when I go to build a personal project."

In this course, you will be taken through online videos and exercises where you will be able to do the following things by the end:

  • Build real complex applications and websites
  • Build an image recognition app together at the end of the course so you can add it to your portfolio
  • Go into a job interview confident that you understand the fundamental building blocks of web development and the developer space in 2018
  • Be able to go off on your own and grow your skills as a developer having built a solid foundation
  • Learn how front-end, servers, and databases communicate and how they all fit together in the eco system
  • Build your own startup landing page. 
  • Go off and remotely work by being a freelance developer and bid on projects.
  • Know EXACLTY what a day in the life of a developer is like and what the day to day technologies and tools will be that you are using. 

By the end of this course you will be comfortable using the below skills and you will be able to put them on your resume:

  • HTML5
  • CSS
  • Bootstrap 4
  • Javascript (ES6/ES7/ES8)
  • React + Redux
  • Git + Github
  • Node.js
  • Express.js
  • NPM
  • PostgresSQL
  • SQL

This course is the accumulation of all of my years working, learning, and teaching coding and all of the frustrations and incomplete information I have encountered along the way. There is so much information out there, so many opinions, and so many ways of doing things, that unless you have spent the last years working with these technologies in a company, you will never fully understand. So this course is the answer to that exact problem. I have gone through thousands of coding books and online tutorials and bootcamps. I have worked with these tools on real applications. Throughout the years I have taken notes on what has worked, and what hasn't and I've created this course to narrow down the best way to learn and the most relevant information. 

I will succeed if you succeed in this course. Therefore, I will be there every step of the way helping you understand concepts and answer any questions you have.

I am 100% confident that you won't find a course like this out there that is as well organized, and as useful, to build a strong foundation for you to start a new career. We're not going to be building simple todo applications and cat image sliders. We are going to learn actual practical skills that will put you into the workforce. Some unique sections that you won't find anywhere else are:

  • React.js + Redux: you will learn the library that companies like Netflix, Facebook and Instagram use to build fast, scalable applications. This is one of the highest in-demand skill in the industry.
  • A day in the life of a developer: What will your day to day look like and what tools will you use? I will take you through a sample day at a tech company.
  • How does the internet actually work. What is the history of these technologies: I will actually have you understand the underlying concepts of the internet, and how the technologies we have now, have come to be where they are.
  • How do you actually deploy a real life app so that it is secure, and won't get hacked: How does a real life app get out to the public?
  • What is Machine learning and how you can harness it's power: Whether you have heard about it or not, this is something that you will hear more and more in the coming years. Those who understand the high level concepts and can harness it will have an advantage. 
  • What is your developer environment on your computer look like: We will be setting up our computers with all the tools necessary of a developer so you can use the same setup when you go into the workforce.

Why do we teach the above? Because in this day and age, just knowing HTML CSS and Javascript is not good enough and you won't be able to grow in your role and command a higher salary. I am teaching you these things because these are the things you should know in 2018 so that you are miles ahead of the rest. 

Make this the year that you took a risk, you learned highly in demand skills, you had new experiences, and you received new opportunities. I hope you join me in this journey. 

This is the proudest work I have ever done in my life and I am confident that you won't find a course better than this. 

See you inside!

Taught by: 

Andrei is the instructor of the highest rated Web Development course on many platforms. His graduates have moved on to work for some of the biggest tech companies around the world like Apple. He has been working as a senior software developer in Silicon Valley and Toronto for many years, and is now taking all that he has learned, to teach programming skills and to help you discover the amazing career opportunities that being a developer allows in life. 

Having been a self taught programmer, he understands that there is an overwhelming number of online courses, tutorials and books that are overly verbose and inadequate at teaching proper skills. Most people feel paralyzed and don't know where to start when learning a complex subject matter, or even worse, most people don't have $20,000 to spend on a coding bootcamp. Programming skills should be affordable and open to all. An education material should teach real life skills that are current and they should not waste a student's valuable time.  Having learned important lessons from working for Fortune 500 companies, tech startups, to even founding his own business, he is now dedicating 100% of his time to teaching others valuable software development skills in order to take control of their life and work in an exciting industry with infinite possibilities. 

Andrei promises you that there are no other courses out there as comprehensive and as well explained. He believes that in order to learn anything of value, you need to start with the foundation and develop the roots of the tree. Only from there will you be able to learn concepts and specific skills(leaves) that connect to the foundation. Learning becomes exponential when structured in this way. 

Taking his experience in educational psychology and coding, Andrei's courses will take you on an understanding of complex subjects that you never thought would be possible.  

See you inside the course! 

Transcripts

1. Your First CSS: it's time to flaunt your inner designer because we're about to learn some CSS to start off . I want to show you this website if you look at it while it's it's quite quite pretty. Look about that's really nice now. Hopefully in the future we can create something like this. But I want to show you what this website will look like without CSS here. It is pretty impressive rate with just CSS you'll be able to create something like this. So let's get sorry to, shall we? I've created here for us a simple website, nothing that we haven't seen before. You can see that I have created semantic tags with header knave and an ordered list that has some links a p two and a pitak that's wrapped in another semantic tag cold section. Okay, so again, nothing crazy. If I go to the about page, it's the exact same thing except for the about. Ally doesn't have an anchor attack and then same with log it. Okay, so let's talk about CSS the way that we would add CSS to something like this is while we create a CSS file. So let's do that. I'm gonna create and you file that I'm going to save. Let's call it style docked CSS. If I say that you'll see at the bottom over here. That sublime text now has CSS as the file. The rules with CSS are very simple. We essentially have a selector, and then we have these squiggly brackets and within it we put our property semi Colin and then value. And then we have this special characters well at the end, and that is pretty much CSS. You know this you can write CSS just like a CML just a couple of sin tactics rules. And once you get used to it, it's very, very simple. But obviously this doesn't really mean anything. So let's write actual code here. I'm going to comment that out by again, doing command slash and sublime text. You can see that the commenting is different than in html. And let's say that we want to make this home text read. The way we would do it is we want to select what's called the selector. So here we want to say that the h two we want that to be read, so all I would say is each to curly brackets and then within here. I want to say the property. I want to change the color to the value that is red. So if I say that and refresh well, nothing happens. And that's obvious, right? Because how does this file know that this file exists? We have to link it somehow, and we do that in the head. And we haven't talked too much about the had tag element in the HTML section. But by now, you can probably tell that had just contains information about what the page needs. Maybe not the stuff that we see on a webpage other than the title, but meta tags and information that we need or the website. Okay, so in here we can actually link to this style sheet that we call style dot CSS with a link tack. This link tag allows us to link this HTML file to something else and against the blind. Tex has something very useful here. If I hit tab, look at that. It auto fills it for me. These are the standard attributes that you'll see to link to CSS. So you just have to get used to it, and eventually will become second nature. So we have our yell here, which is the addict attribute for relation. It just specifies what relationship this link will have them. We have the default style sheet and then for the type this is the media type. You want to say that it's a text CSS file were essentially telling html Hey, just a heads up. We're linking to a CSS file here and in the H. Ref, this should be familiar. We're gonna link to stall dot CSS. So if I type in style dot CSS and safe, let's refresh turns red. And just to let you know that index dot html is in the same folder as style dot CSS. We can check it over here. If I click on exercises. Siri that? Yep, half style dot CSS with index foundational perfect. Okay, now what if we also want to make the paragraph over here the separate color as well? Well, again we would do this selector and then we'll do call there, let's do pink. I save refresh and it's pink. Hopefully you can see that you also see here that sublime text does some really nice color airing for us So five, for example, I put a property that doesn't exist like Miss Belt color. Well, you see that it doesn't highlight it properly with the blue collar, and you know that you've made a mistake again. Another great feature of sublime text. So CSS What? What does it actually stand for? Well, it stands for cascading style sheets and style sheets that makes sense that, you know, we're creating cell. She's. But what does Cascading meat? Well, cascading means that it always takes the selector that is at the end, and that's simplified terms. But I want to demonstrate for you what that means. So let's say at the bottom over here I do this again. Paragraph. I want color to be green. Well, if I save this, what do you think will happen? Let's refresh in C. It turns green. And why is that? Well, because it's cascading. It's saying, OK, all set H two to read. Okay, I'll said paragraph two pink, And then it says Okay, I'll said P two green so you can see here as it trickles down and cascades, it takes the last input that receives for a specific selector. We'll get more into the cascading effects of CSS in a later video, but I want you to understand the basic concept around it. OK, I also wanted to show you something cool they can do with Crow, and we did this in the first couple of video Siri's. But now you lot should understand what it means. So again view developer, developer tools. And from now on, I'll be using this shortcut to open it and you'll be able to do it as well. And if you remember, we have our style tap. And if you click on the style tab, we have the A team on the left, styles over here and nothing for the styles. But if I now go into my home and I click on that will show you color red So Google chrome or allows us to see our CSS styles. So I could even add stuff here, and I could say background color unless do block. Look at that. So this is a really good way to play with your website and add colors. You can check and uncheck here, and also if you see something on a website that you really, really like, you can go to that element. Let's Ah, let's try it off here. Let's go to wait. But why dot com And let's say that we really, really want to know how this was made. We can right click, do inspect. We'll take us exactly to that element. And then we can see here some of the properties, the CSS properties that they've used the same year again. See that the background color is this and so on and so forth. Okay, let's close that for now. The last thing I want to leave you with is what if this closest? What if I also want the about page to have styles and same with the log in page? As you can see, there's no style for these ones, but we want the same thing for the about and log in page. Well, as you can imagine, we copy the link tag and we go to you about we link it onto here and then log in. We can again link it here. I save both of these files. And now if I refresh and go to about look about, we have our self and you may be wondering, Well, what if I want different styles for maybe for the log in. I want this to be blue instead. Well, we can actually create multiple style sheets. So I can say, for example, let's create a new file and we'll call it style two dot CSS. I say that, and this time I'm going to say that I want my each to to have color blip. I say that I go into my log in html and now I'll make log in reference the second style sheet inside of the 1st 1 So now if I refresh log in is referencing our style to CSS. But all the other ones are still referencing de old one. Okay, I lied. There is one less thing that I want to add, and that is that this is the common way off adding styles. But there's actually two other ways that you won't see is often, especially when you're starting off. But I wanted to show it to you so that you're not surprised. The first way of doing it is something called in line styles, and this was the original way that we incorporated a styles into our a she male, and that is by specifying within the element, Let's say Let's go with head over here We want to say style So it has a style attributes and then within here we can do background color. I must do three on refresh and we're at the about page right now. We change that for index at a shame. Also, let's go over here and look at that. We have the green background and if you want to add more again, we do color. Read that safe and refresh and look at that. The header has the color red and you'll see here that these ones, they're still purple. Well, because they are linked ags and have the default linking. Okay, so that's one way and the third and last way is in the head. You can actually create style tax and then within the salt style tags, you can enter CSS. So if you just refresh here, so we have a fresh, clean slate. I can now say all the P tags or less to ally this time. So all the lists I want the lists to have background color of purple, so find how save this and refresh everything is purple and that looks pretty yucky can keep adding stuff on here. And I could say color white save, refresh. And it changed the color to white. Now you may be wondering, Why don't we just do it like this? This seems a lot simpler than linking to another CSS file. Well, the reason is that for this website, everything is fairly small is just a couple lines of CSS. But you can imagine what with websites as they get bigger and bigger, you'll have hundreds and hundreds of lines of CSS, and having one massive file will be very, very challenging to maintain. You can also think of it as if you were working on an HTML, and you also had a team of designers that we're working on a CSS file. You wanna have a separation where we have some team members working on the CSS and then some team members working on the email, and that is a concept called separation off concerns. It's a fancy way of saying that everybody just worry about what they're good at, so html just worry about text and CSS. Just worry about Stiles. This phrase separation of concerns is something that will encounter throughout later videos . When we get into JavaScript and react and it's a very, very important concept in Web development and computer science in general, so we will get back to that. But you know that it will be a phrase that will keep coming up. So for now, let's delete this. Let's keep things the way that we have it. Let's refresh. And in the next video, I'm going to show you a couple of CSS properties that are more exciting than just color and background. I'll see you in that one. No, by 2. CSS Properties: and welcome back. Let's make this website a little bit prettier than it is now, and I'm gonna introduce you to some CSS properties. Properties are, as the name suggests, properties that we want to change within a webpage. And you might be asking yourself, You know, how many properties are there? And as we did with the HTML section, I have a recommended resource for you and that is CSS tricks this website. Anytime you google any questions about CSS, Most likely, some of the top 10 answers are going to include something from this website. So I highly highly recommended, especially if he go to the menu and almanac, because within this almanac we have all the CSS properties listed on here. So any time you have a question and you want to say what is justified content well, you can click on it, and it will actually give you examples. You can play around with it and learn about the specific property, just like with HTML tags. Although there are way more properties, you don't need to know all of them and memorize them because that's not realistic. That's not the best use of your time. We're going to focus on the ones that you'll encounter most often. And any time you seen nuance pop up while you're working, you can always look them up and learn about them because they're very, very simple to read into. So let's try a few of these. I'm gonna start off with our stalled out CSS over here. And let's change a few things. We wanna have our home being the center. Let's start off with text the line. And if I type in center and I save my texted now is now centered. Okay. We also want to add a border to this image border, and this is a little bit unique. You can do something like this. You can do five pixels, which is the size of the border. What style of border you want so you can do dashed and the color of the border will do purple. So I save refresh, and we have a border. You can also do solid, and if it's solid, if the solid border okay, what else can we do? Will be nice to have an image, maybe an entire image for the website. So how do we do that? Well, the tag that we would want to apply it to is probably body. So if I go into body and you might notice something here as, um creating these selectors, I'm going from top to bottom body, which is the parent of almost everything is at the top. And as we get more and more specific, we trickle down to smaller elements again. We'll get into that in a later video, but just keep that in mind. I guess so. For body would be awesome to have a cool image on our website so we can do background and you can see the sublime text. Actually, auto fills or has some suggestions for us, and we can look for you this and pick the one that we want. But based on the name looks like we want background image with a background image, we want to specify a URL. In our case, I actually have on my desktop, saved a nice little picture and let's tie to let something simple like background image and I got this from a website called on Splash. If you haven't checked it out, they have a ton of high quality free images. They can use So again, here we are referencing our Let's put this actually in here. So it's in our project folder and then within our project folder, we can say that it is background. The image thought Jay Peak. So I see this. I refresh and look at that. We have this image, but you can see that in a big image and doesn't fit the screen. So how can we do that? We can do background size cover. So if we do that and refresh Look at that. We have a beautiful background on our website. Okay, let's say we want to remove these little dots next to our links. We can do that by going into we want to change our hell. I elements. So we go into style and we can put in here Ally, and we'll do something called list style and we'll go none and refresh. And look at that. Those little pesky dots are gone. Whenever I select about, I want the cursor to not be this. I want to change the cursor to maybe have this little hand gesture. I like to call them making mouse hands. Okay, so we go into our H two and we could do something called cursor. And let's say you don't really know what properties cursor hats or you don't even know the property. You can go into CSS tricks and again go to see look at cursor. You can kind of guess by the name what it does, and it tells you all the information you need to know. But you can see over here that they even have a demo of what you can do with cursors. So we want the pointer so we can just but pointer here safe. Let's go back to our website refresh and look at that. We now have a pointer when we hover over about okay, and maybe the last change we want to do is that we want to make sure that our home about and log in our on one line this is a little awkward when they're stacked on top of each other, and we can do that by selecting Let's look over here. We want to select our allies and we can use something called display and display has a few properties that you can use. One is block and by default. This is actually already a block, but there is also something called in line block. And if I save this and are fresh, look at that. We have everything in line. Now we want to change a few things here. We want to make sure that our colors are better than just purple and green and pink. And what if we want some specific color? And we have a certain design that we want for our website? Well, colors air very, very interesting. And CSS because there's a few ways that you can do them. And I want to show you one of my favorite websites for picking colors. What this website does, it actually gives you the colors that you can use, along with a nice addition of what it will complement that color so you can play around with this and change a bunch of criterias. You can click over here and see what color combinations work, but let's say we wanted to use something like this, and if you hover over and click, you'll see over here that I get a couple of numbers that we can use. So the 1st 1 is a hacks number, so hacks number has a hash and then the number associated with it. So I just copied it from the website. You see the numbers a little bit different. Essentially, they can use anything from 0 to 9 and then all the way to f so A to F. And this represents a specific color. So if I copy this and let's make our color on this make its the color over a header, we go back to our CSS and save this and refresh. You'll see that our color changes. Okay. We also want the border again to complement the color. Let's to this border color. We also have something called RGB and RGB again. You see over here that there is a hex color and an RGB color thes air both the same color so you can pick whichever one you want. In the case of an RGB color, you can do something like this Say we want for our border. Have RGB color off thes valleys. So that is the value of Brad Green and blue. So that's what RGB stands for, and we just wrap it like So. So now if I save this and refresh, look at that, have a nice little outline just to show you of what exactly I mean by red, green and blue if I set all of these 20 So that means that red is in full force and green and blue are non existent. If I save and refresh, that is red. If I change this to green, then that's in green effect. And you can imagine here that if I changed a blue 2 to 55 everything else zero, this will be blue. There you. So let's go back here to what we had before cause I like the other colors way better, So let's refresh Perfect. Now RGB. Let's do one other cool thing, and that is called RGB A. And that is stands for Alfa. You can actually set the A pass ity. So with the fourth number, you can actually do something between zero and one and one being, well, opaque, and you can still see everything to zero where it's completely transparent. So let's through 0.5 here and can see that there's a bit of ah fate now in our color perfect. So using a tool like this, you can really pick what colors you want your website to have and choose the one that complement each other. Well, I use this website a lot when creating new websites and thinking of color templates to use . It's a really, really good resource, and you can use Hex and RGB, whichever whichever one you want. Just It's good to have some consistency if you want to add some a pass ity. So the Alfa this last number then definitely use RGB A. Okay, so going back here, our website is starting to look somewhat OK, but in the next section, I want to talk a little bit about selectors and more things that we can do with them. I'll see you on that one, but by 3. CSS Selectors: and welcome back in this video, we're gonna talk all about selectors. Let's go back to our home base here begin. Look at our styles. So far we've Onley been selecting elements, but most likely we need something more than this. So let's go back to our example and look at what sort of selectors we can have. Let's say, for example, that we want the style that we have for the big home header to also apply to our Pitak. How can we do that? Well, we can do something like this. I save refresh, Awesome. So that's a way of doing a selector. And there's actually a whole bunch of things that we can do with selectors and I created for you a nice little cheese shoot here that all attach after this lesson, and it references to really good resource is that I recommend one is the CSS tricks that I've already mentioned and you can see over here all the selectors that they have, they're not as many as they had with properties, and it's actually not as overwhelming as you think. Probably about 30% of the East are the ones that are abused most of the time. And we also have our good friend W three schools that lists a bunch of the selectors here. So let's go over a few things and understand the main selectors that we have. So I've listened them off for you over here. But I want point your attention to this line cascading style sheets at the most basic level . It indicates there you'll type of. That indicates that the order of CSS rules matter, and that's something that we've already discussed before. You remember the P tags. So the order matters because we know that the CSS will read the last line and make sure that the color is green. So that's the most basic level. But there's a few other things that we can do. So let's look at the selectors. The 1st 1 is class the class. Well, do something like this. So let's say we want to add a few more p tax here and refresh OK, perfect. We love the way everything looks, but ideally for the paragraphs, we want the border to be a slightly different color. So what we can do is we can add something called class, so the class property. We can give it any value we want, whatever we want to call it. So let's call it weap text. Now we can copy and paste this class attributes to all the P tags. And if I go back to my style, let's make this put it up a bit. I can now add period Web text. And then from here you can see that it's highlighted green and we want the border to be five pixels dashed green, safe and fresh. And look at that. So class is a good way to select a group of elements and make sure that they all have the same cells and we can add multiple ones. So this one could be active. And this adds a second class, which we can say has the text color read. So if we say that, save this as well and refresh you see over here than now this is red. The class is very, very useful. Let's look at the next one. Drag this over here. Okay? The next one is I. D. I d is similar to class, except for you can use Ah, same I d on Lee once. So let's say that we want a group thes p tags by wrapping them in a diff. And you might remember this from the HTML section where we talked about this ag, that is very, very useful for CSS for occasions like this, where we want to wrap something so I can do I d equals Dave one. And if I say this, I can now go back here and for an i. D you want to do a hash sign, Dave one. Let's do background blue save and fresh. All right, that looks absolutely hideous. You know what? I think this will look really, really good if it was if it had a bit of a passage e. So again, we remember RG be a And if we want to Blue, if you remember, is red, green and blue So to 55 then Well, I capacity of, let's say 0.2. We saved that refresh. All right, that looks a lot better. But now let's say we copy this and we want to add a second section. Now we would have to call this diff to again. We want to make sure that the I ds are different. Otherwise, we break the rules Now, if I save this, we'll have something new but no styles in this one. We want to add a different style four def. To So again, the selector of def two will have. Let's say this one instead of blue has the background red with capacity off point to Let's refresh and look of that now looks. It's a lot better than you used to. Okay, let's go back to ah, couple of the one. So this is a star. So the star, it's not used very often, but it symbolizes all elements. So if I do and usually you'll see stars of the top. But if I do something like this, I can say that we wanted to align everything. It's a text, the line, and we want to do right. If I save that and refresh now we see that this move to their right. But these didn't and the reason is because again, something cold specificity were saying that Yep, I want everything to be right. But then as we go down the CSS, you'll see that we're saying H two and P, we want text line to be center, so these elements instead of coming to the right, Get to the center. So just to prove to you that that's correct, If I comment this out, I save and refresh. You see, everything moves to the right. Okay, and let's refresh Perfect. The next one is the element. And this something that we've already seen you can see over here. We're selecting the element, and then we're putting the property and valleys. The next one is the element comma element, and that is just like we've done here before. We want both H two and P to have these properties the next one, and this is a little bit tricky is element space element, and this is a little bit different in the top one because elements space element what it does, I'll show you over here. I saved this and I refresh And who, What just happened here? You'll see that now. The text. The line of center does not apply to these paragraphs anymore, and that's because this syntax of writing a selector means I want you to select all peas that are inside h two. So now even the H two is installed anymore because this says we only want the peas that are inside age two and you'll see that we have nothing inside H two other than the text. So if I do something like this home, home, home, them like that. Okay, perfect. I say that and I refresh. You'll see that home gnome is added with these styles, Let's look at the next one. The next one is element greater than element, so this one is a little tricky. So if I go like this and I refresh, nothing's changed. But this says that I launched to select all peas, all paragraphs that have parent of age to so to show you exactly what that means. Let's add this on our new lines so you can see better if now, within this P if we do something like this, where we wrap this in a div like so, and I refresh this thes style didn't get applied because it's on Lee once peas. So paragraphs that are parents of age two and this piece of his parent or her parent is the diff Mr and Mrs Div. If we put this back to the way it waas and refresh, you'll see that this time it works because it's saying all peas inside of H two, which is the case. Hopefully you're still with me. This is us hardest selectors. Get so once you know these ones? Honestly, you've covered 90% and nothing else will. Scary. Okay, let's look at one more element plus element. So this one, if I go element plus element and refresh what just happened? This says select any P element. That is exactly after an H two element. So what does that mean? Well, we need to make it so that the P element is right after the issue. So if I go like this safe and refresh, you'll see that now we have our styles applied. Let's look at a few more. And like I said, these swans are probably the hardest. These last ones are kind of fun. Okay, so we have hover so hover. What that means is if I go over here and I put hover at the end, this means that when I refresh, nothing happens. But when I hover, my mouse look, that it changes the style to what we just wrote down over here Sounds pretty cool. One especially for buttons. The next one. If we look over here is last child and first child, and you might guess what that means. So a good way to demonstrate this is we wanna use Web text. So Web text as if you remember, is all these little Laura MIPs ums I can say in here, Last Child refresh and on Lee, the last child of each Web text. And you'll see here that there's two of them because it is selecting the last child, this one and this one. And then there's also First Child, which, as you can imagine, if I refresh it's like the first time. And then finally, I want to show you one last thing that I don't recommend, but you might see it in some code bases, So I don't want you to be surprised when you come across it, and that is this. So I can add something like exclamation mark important here and you'll see again. We get that nice, highlighting an important means. Let's see what happens here, I refresh, and everything just turned pink, even though this P over here says, I want the color green important overrides any of the cascading salsa rules and says, Hey, I don't care what anybody else says The P is pink and you can see here why I don't recommend using this because although you know for sure that the P tags will be pink, if somebody else comes and starts working on your style sheet and maybe this is hundreds of lines and they don't know that the important tag is there, they could be confused us. So, Hey, how come nothing's turning green? I can play all around with the color here and nothing's happening. And again, it breaks the rules of cascading style sheets so you don't really want to use it. But again, if you see it out in the wild, you won't be surprised this way. The last thing I want to leave you with is the idea of specificity. If this is your first time running into it, it might get a little confusing, and you do need a bit of time to get used to it. But trust me, you'll get there is just one of these things that everybody goes through, and eventually you'll have an ah ha moment. When selectors win out in the Cascade, it depends on three things. So the first thing is specificity, and I have a resource year that really explains it. Well, a simple way to think about this is how specific is your selector. So this has a specificity score off here. This has a little bit higher because it's more detailed, it's more nested, and this one is higher. This one is even higher, and you can see that it keeps going higher and higher. So the more specific something is, the more likely it will win out and make sure that that is the stop. And there's actually a really fun specificity calculator. It's really hard to say that word, so if you click over here, you can type in whatever you want. So let's say a, for example, is just one point. But if I do hell, I that's too. And if I do ally, that's even higher. And if I do a even higher But then I add and I d off food, you see that I desire even higher. And then, if I add another class, um, let's to blue. You'll see that the specificity increases and you'll see over here that in line styles is actually the highest. So if you remember, that is putting a style directly into a section that will always win out over others. So you can play around with this and I will link to some of the resource is that I have in the next section. But again, this is something that will be very specific, wants to get to a certain problem. You can figure it out, but I hope that makes sense. Let's go back over here to the last two things. So the other thing was Thean Porton Spartans is, as I mentioned, this exclamation mark important. So that always depends on what kind of styles the cascade gets. And then finally, it is the source order, and that is, let's go back to our index file. If we had another style sheet here, let's say, were importing another style sheet. And if you remember, we have style to hear that makes the H two color blue. If I put this in, save and let's go back to our website and refresh. This turns blue because our browser reads this style sheet and then reads this one, and because this one happens after this, the later Stahl gets at it. So if I switch this over here and I save, refresh and let's make sure that the H two has its own style Celestial patient to sculler Red fresh. You'll see that this style winds up. Okay, I'm gonna leave this out for you in the next section. You can play around with CSS and some of the selectors, but this is the hardest it's gonna get. And once you remember these rules, you're all set. I'll see in the next one the way. 4. Text and Font: welcome back. And in this video, we're going to be talking about text and font. Let's go back to the about Page looks quite lonely and empty right now I'm gonna turn off the hover effect cause you couldn't get kind of annoying after a bit. Let's remove that here and refresh. All right. Perfect. In the about a she male Let's try and make this taxed a little bit prettier. So I'm gonna do our little short Clement with sublime tax. So, Lauren, and then make sure I close off this p tag. All right, So I'm gonna show you a few tax properties that we can add going back to style. And I'm going to remove the pink color so we only have this be to worry about refresh. And you'll see here that it's still not green because this as higher specificity than this again. If you don't know what that means, just check out my previous video. The 1st 1 I'm going to show you is called text decoration. And very simply, this one you can do underline, refresh. You get a nice underline. He can also do a line through for fresh. And there you go. Nice line through the next one is text transform and this one you can do something like uppercase, and you can transform the entire text. And to top case, you can do lower case with Issa's well, but you could try that out on your own. Next one is line height, so in line high and you can put the pixels. So we want 20 pixels of space. There's a line height. If we do 200 pixels, you see that? That's a lot of spacing. So let's keep it a 20 just cause that looks nicer. Refresh. Perfect. Next one is kind of like this. We're gonna keep this. I'm gonna add it to the bottom. The next one is font style. You can set something like a metallic save fresh, nicely italic lettering. The next one Let's to font Wait. And here you can actually do a number between 109 100 or you can do just simply something like bold and obviously that changes the weight of the font. We also have something like font size. Obviously want to change the size of the text and you can do something like percentage, so ah 100%. If you do that, nothing changes. But if you do 150% well, that gets 150% bigger. If you do 80 you will get 80% of the original. And then finally, I also want to show you font family. So this is where you get to pick what kind of font you want. So if you want something like Georgia, I saved Refresh. We got that nice little font. If you have something that is multiple wards, you'll have to use quotation marks. So if you have something like Times New Roman, you'll have to write it like that. And a special quality of font family is that you'll see a lot of this. This means that on who's ever locked up, the website opens on if that computer doesn't have times new Roman than print the Taxed and Georgia, and you can have multiple of these separated by comma. And that might sound surprising to you. But fonts are simply pieces of information that each computer has been. It's not equally distributed amongst everybody, so some computers might have certain kinds of font like times. New Roman and others might not and you can check online which funds are available and Windows and Max. But keep that in mind that you wanna think about fonds and how your websites going to display. Because a user might not have that specific font on their laptop. Now, two questions might pop in your head right now. One is well, Andre, what if I have this super awesome custom font and I want to use that? And the 2nd 1 is, how do we make sure that a user always sees the same font on a website even if they don't have it on their computer? So how can you do this? One way is to actually include a font file that you have on your computer with all your website files. But I'm gonna show you an easy way that a lot of developers use and it's free. And that is Google thoughts. Google phones actually has these free fonts that you can use, and there's a Thanh of them. Anything that you find here is more than enough. And I've used this many times when building websites. It's a great, great resource. I really like this one. So let's pick this one point red one, and you can see over here that you can play around and see what it looks like. You can also see the size difference, and if you click the plus sign over here, you'll see at the bottom that I have a selected item, and if I click on it, it shows me how I can added to my website. So first thing we want to do is we want to copy this and this my look familiar. And this link tag, which is a style sheet, has a reference to Fahnestock. Google, AP Istock Com were saying, Hey, grab the fonts before you load up is a shame. L file on my Web page, loaded up with the fonts that are founded this website. So, yes, if this website is down and let's say there's no Internet, it's access. They won't be able to love those funds. But it's Google. We can trust them. Most likely they're going to be online. And the 2nd 1 you can see over here what we can add to our CSS file. So we just copy that. Go to a style sheet and let's change this to our new Google fund. I say that. Let's go to our page and refresh. Look at that. That is nice and pretty. Let's make that bigger just so we can see it. Well, we obviously need some line spacing here so we can do a line Height, 50 pixels there you One thing you might think about and this is something that will get into in the advanced Assess section is that by loading this, we're actually making our website a tiny bit slower. Because now, in order for this website to load, we need to grab the south sheet that we've created plus go to this link and grab our funt again. Something that we don't want to worry about yet. But things to keep in mind and in the advanced section will cover that a little bit further . But there you have it. There are your general text based font based properties. I'll see you in the next one the way 5. Images in CSS: and welcome back. I'm gonna show you a property that is commonly used with images. So I have a really funny picture here. Oven alpaca. So we're gonna copy that. Actually, we're gonna use the link for this, and we're gonna add an image to our website. Let's just make our font size a little bit smaller. Perfect. And I'm gonna try and add a picture to the left over here. So if we go to our about page and in our section over here, we can try and add a picture. So let's do an image tag. And if you remember, we have a source and that source I just copy and pasted the link. And if I save this and refresh Oh, that's a big picture. So as your main remember we have to do with, I must do 50 pixels and height 50 fixes. Let's save him a fresh and you can see that we broke. Let's make that a little bit bigger, actually, us too. 200 and 200. Perfect. You can see here that we actually broke a bit of our CSS, and that is because if you look over here, we have used this selector, which says Immediate neighbour of H two, We can just do this for now. Refresh. And there you have it. But I kind of want the text to be on their right side over here. How do we do that? Well, we can so like the image and use a property cold float and float. You can do right or left, so if we do left and refresh, it floats the image to the left and you see that the text wraps around and this property was created specifically for these reasons to have images floating to either left or right and be able to have text wrapped around them. You'll see instances where float is being used for positioning elements, and that's not the best practice because it has some funny properties. For now, just use it with images, if you can, and one thing to note with float, and just to show you that I can do it on the right as well. If I go like this and refresh, it flows to the right, kind of like this better, so we'll keep that there. The other thing I want to show you is that if we added anything. So after the image, we wanna have a footer And in this footer ill say websites made with love Close that and safe And we also want to make this actually a lot smaller. So I'm gonna do five pixels because I want to show you something. So you see, over here I've made this line had very, very small But I wanted to demonstrate for you because this is floated to the right Everything just kind of tax onto the left side over here. And if we wanted to make sure that our footer is at the bottom of the website, we would have to use a property that always almost always clock comes with float and it's usually put in the property after the float is being used on the our case footer and we have to specify clear both. So if I save and refresh, we have that at the bottom. And let's align into the center here and refresh hope I didn't. And let's to center save I am a fresh perfect. Now we have website made with love with a whole bunch of gibberish. But I want to show you that property float for images and make sure that we clear so it can start on the website on its own past the image we'll see in the next one. But why? 6. Box Model: Welcome back in this video. I want to talk about the box model in CSS. It's a very important concept and that's something that you might have been kind of curious in the back of your head about. And that is this image right here in CSS. We have this idea of the box model which has the content. It has the padding, the border, which we've seen before, and then the margin. So we're gonna talk about that in this video. So we have our not so pretty website right now, but I have left intentionally are log in page still kind of blank, and you see that there's no styles apply to it. Because if we go to the long and pain Shawn and a drug it over here, it's referencing style to which doesn't have much styles happening. To really emphasize this point, I wanted to just, instead of the Laura MIPs, um, I'm going to create a diff If I give this a class of box model, I can go into my style, to which I'm gonna drag over here and I can say box model border five pixels, solid threat. I save this and refresh Okay, so we have our box model. Let's add something into the stiff. We have a and right now it's covering the entire space. But if we add three more Dave's, we'll call this one. Be the next on C. I save and refresh. Okay, we have these. And if we wanted them all in one line, then you might remember that that was display in line block and I save. Refresh. There we have it. Okay, let's talk about the box model here. Let's say we wanted more space inside of these for the letters. Well, in that case, we can use something like patting so padding. I can put 20 pixels, save and refresh, and there's our padding. But let's say we wanted different padding so that the sides are wider than the top. In that case, we can do something like five pixels of the top 20 pixels on the right side, five pixels of the bottom and 20 pixels to the left. I refresh and look at that, and that's just a standard that you'll have to get used to its top right bottom left. You can also actually do padding, as you can see in the dropped on bottom left top right to specify. But this is a quicker way of doing it. If we remember, there was one more and that was margin. So margin allows us to create space outside over the border. So if I go 20 pixels here and I save refresh, you can see that we created 20 pixels on the left side and right side, but also the top and the bottom. Let's say we only want spaces between the boxes, but not at the top and bottom Well, same principle again. We can do zero pixels, 20 pixels, zero pixels and 20 pixels. So top right bottom left safe and refresh. There you. Now this might get tedious. There is one other shorthand way, and that is you can remove this. So this means top and bottom. This means left and right. I save this and refresh. Nothing should change and it doesn't and we can do the same of the top here as well. Perfect. One last thing I want to show you is that if we open up our developer tools so again we do inspect, you'll see in our styles that we have our box model. So if you see over here, we have our content. We have our padding and it says 20 pixels, five pixels, five pixels. We have our border, five pixels, five pixels, five pixel, five pixels and then our margin zero with 20 on the side. So again, chrome allows you to browse around and make sure that all these are properly done. The last thing you might ask is, What about this content? How can I change this? And that's very simple. You can do something like with Let's do 33 pixels. Save and refresh, and also do height. Do 55 pixels safe and refresh, and you'll see over here that in our box model, we now have the content with 33 pixels by 55 pixels. All right, that's it for now. See in the next one. But why 7. px vs em vs rem: Welcome back. Before we finish off this section, I wanted to show you one last thing, and that is, up until this point, we've used pixels quite a lot, but there's two other options that we can actually use. So let's remove our box models for now. And instead, let's create some paragraphs. So using our Lauren shorthand and let's close this off. Perfect. Let's say that we also wanted to have another paragraph that says Introduction, save and refresh. And there you go. We have our paragraph Now, if we wanted to add some class to this paragraph, we can just go in here and we don't need the box model so we can delete that we can do something like P and let's do font size and for false eyes. I've shown you that we can do percentages, but you can also do pixel. So let's do 20 pixels. Save and refresh, and we have pixels. Okay, so let's say I want Laura MIPs, um, to be a little bit bigger can use span again. That's kind of like the diff tack that you've seen before. It's just good for in line. So again, this way, we can add styles. So I saved that. Go to styles and now we can still expand and we can do something like this. We can do font size. Five PM I refresh. So what it's saying is we want the font size to be equal to five times the containing element, which is 20 pixels. Because if you remember where inside of a P tag, just to show you that that it's right if I do 100 pixels and save and refresh its the same . So e. M. Is is kind of nice, because if I do something like to yem and refresh, well, if I change this to 10 pixels and I refresh, this always stays relative to the B one other one don't show you is R E M, and that is the size in relation to the size of the root element. What is the root element? Well, it's the HTML. So whatever the document is, it's always going to be twice as big. So if I do five refresh, that's great. But if I change the font size over here to five, that won't be affected at all. Good job getting this far in the course I know I've thrown a lot of properties and selectors are you, But I promise in the next section we're going to start building some real websites and have fun with all this knowledge. Can't wait to see you in the next one, but by