What is a CSS Class how do we color a background with it

This lesson is exclusive to members

Course contents
SECTION: 4
Project 2: Bike Repair Website 6:12:48
SECTION: 6
Project 4: Bootstrap Yogurt Website 3:35:39

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Course info

128 lessons / 17 hours 5 projects Certificate of achievement

Overview

Hi there, my name is Daniel Scott and together we’re going to learn how to build professional responsive websites. which look good on mobiles, tablets and desktop screens.

We will build 4 sites together...
  • a simple but elegant restaurant website.
  • a bike repair website. 
  • a responsive portfolio website.
  • a Bootstrap website.  

We cover everything you need to build your first website. From creating your first page through to uploading your website to the internet. We’ll use the world’s most popular (and free) web design tool called Visual Studio Code.

There are exercise files you can download and then work along with me. At the end of each video I have a downloadable version of where we are in the process so that you can compare your project with mine. This will enable you to see easily where you might have a problem.

We will delve into all the good stuff such as how to create your very own mobile burger menu from scratch learning some basic JavaScript and jQuery. 

 You will...
  • Learn how to work with responsive images and icons. and stunning full screen background images and probably one too many gradients. 
  • Learn how to create forms and to choose great fonts for your website. 
  • Learn how to work with Bootstrap 4 to easily add carousels, cards and complex looking menus. 
  • Setup a domain name with hosting so that your website is live on the internet for others to see.  

There are fun class projects for you to work on which will enable you to practice what you learn. By the end of this course you’ll have a great understanding of important web design topics like HTML5, CSS3, Flex box, Responsive design and Bootstrap.   

If that all sounds a little too fancy - don’t worry, this course is aimed at people new to web design and who have never coded before. We’ll start right at the beginning and work our way through step by step. 

Who am I? 

I’m Dan, and I’ve been building websites for about 15 years now. I am award winning instructor, and have won a MAX Master award for the last 2 years in a row at the prestigious Adobe Max conference.

Time to upgrade yourself?
Sign up for the course and let’s learn how to build responsive websites.

Course duration 16 hours 42 mins
Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Certificates

We’re awarding certificates for this course!

Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.

Downloads & Exercise files

Download Exercise Files Download Completed Files

Transcript

Hi there, this video is all about a Class Selector. It's going to allow us to do this, where we style the yellow box differently from the pink box. We'll do the same thing with this P-tag. We'll make one P-tag different from the other one. That is the job of a CSS Class Selector. Let's jump in now, and learn how to make it work. 

So here's our CSS. This thing here is called a Type Selector. So it's selecting all the Div types. The problem is, it's quite generic, because every Type that happens to be a Div, do this stuff to it. And that's why we have a Class Selector. So what we want to do is, let's bin all of this. Put my 'Return's back in, I 'Tab' in. So instead of deciding all Divs on every page are the same thing, let's create what's called a Class Selector. 

So all it means is, I get to be unique, I get to say, "I'm going to create a class", to know it's a class, and not like that Type Selector we just did. You put a full stop in front of it in your CSS. Okay, that says, "I'm a Class." What kind of Class? I'm going to give it a name. You can call it anything you like. This one I'll call 'Box 1'. Then like the rest of the CSS we've been doing, it's the same. So Curly braces, Return, and then we style it. So that little full stop at the beginning means I'm a Class. 

What are we going to do to that Class? We're going to say it's a background color. Background color of yellow. Semicolon. We're going to have a width and height. Width, 600 px, by a height of 400 px. So we've got Box 1. Now there's no way of kind of connecting these two yet. So it says, "Hey, Box 1, be yellow", but down here it's like, "Well, I don't know what you're applying it to." So what you do is you leave the Div, and what you do is, afterwards, put a space and type in the word 'class'. You can see, VS code really wants to help out. If you're typing it out make sure you put in the equals and the quotation marks. 

So we have a Div Class. And what we want to do is apply Box 1. So now that is attached. The differences are, just to make sure that, when you're styling it up here in your CSS, you have to use the full stop to say, "I'm a class." Down here you have to be a bit more long-winded. So you say, 'class =', and you don't put that dot in there, it won't work. So Class, long version, short version. Now hopefully if we save, and we go test in a browser, we reset, and the first box now knows it's yellow, and it knows that it's 600 x 400. This box down here has no idea what it needs to be, so let's tell it. It's the same as before, let's make a second Class, you ready?

So 'Dot Box 2'. Put in curly braces, and we'll tell it to steal this, because we're lazy. But we want this one to not be yellow, we want it to be that pink color. Oh, that's not the color. Has to be pink. Save it. It's the wrong size and weight, size and height. 400 x 250. I just made up these sizes, you can type anything you like. 400 x 250. Save it, and now, it's not going to work. Why is it not going to work? Let's check. 'Refresh' just to confirm it's not working. It's because we haven't applied it to it. 

So we've styled it, now we need to apply it down here. So after the word Div, type in 'Class'. You can see there, the way I work, I'm going to work a little bit more shorthand as we work through. You can start writing in all the syntax if you like, but you'll notice that I hit 'space', hit 'C'. That's all I've done, and I'm going to hit Return on my keyboard, or the Enter key. And it fills in all that lovely syntax. I type in 'Box 2', hit 'Save’, and now, hopefully, 'Refresh'. Hey there, we've got a first box, and a second box, and it vaguely resembles this. Cool, huh. 

So we learnt what a Type Selector was. You don't need to remember that name, but a Class Selector for CSS is something we're going to do a zillion of in this class. And it's a way of individually targeting this. So instead of Box 1, this might be Header, this might be Navigation, and this might be Main Content. And we get to style them, color them, and size them. Let's go a little bit further and add a little bit of styling to it, and look at a Class Selector, but in a different kind of context. 

So back in VS code here I've got two P-tags, and they look exactly the same in the browser. Let's say I want to make this one a different color, and a different size. So instead of styling the P-tag like we did earlier, remember we made all the H1s, but problem is that, every H1 on every page, whereas this one, I just want this little unique guy in the first box to do something. So up here, underneath Box 1, my Box 2, I'm going to put in another class. Remember, it has a full stop. And I'm going to call this one 'Highlight'. Highlight, Highlight Text. You have to put a space in, then you have to put in your curly braces. Curly braces, next to your P key. Then we're going to say, I'd like you to be a color. And the Background Color, for the background color. It does Regular Rule Color if you want to style text. And let's say I want to make this--

What are the crazy colors down here? I'm going to make this dimgray. They spell it both ways, look at that; cool. All right, let's put in our semicolon. Let's make the font size, so 'Font Size'. Just something really big so we can kind of just easily see it. So I've saved it, now we need to apply it, and it's the same thing. I can say, you, there's a P-tag, but also a class of, dot, not dot, with a text, ‘Highlight-text’. Let's save it, let's check it. Refresh. Hey, it is bigger, and it's the gray. 

So you style the Type Selectors to do kind of big general broad strokes. Then you do little specific things using Classes. You apply them to individual little bits and pieces. You can use it twice, there's no reason why we can't say, you my friend, also have a Class of Highlight Text. And it will apply to both of them, hopefully. It didn't, and you're like, can you see why? I have no idea why. Because, now I pretend like I put that on there on purpose but that is always my problem. You might not be as grammatically challenged as I am, but I find it very hard to type the stuff in. So, like when I'm not doing tutorials, and trying to impress you with my typing speed, I copy and paste everything; 'Copy', and 'Paste', it's painfully slow, but it gets around my problem of typing the wrong word in, and then trying to fix it, not working out what it was, it's just because of typos. 

Let's delete this, and I'll show you some other tricks for kind of just making sure-- yeah, you can keep up, or fix any errors. So the easiest way is to compare against the file that I'm making. So say, it looks like you've done the same thing, but it's not actually working for some reason. Is, in your Exercise Files that you've downloaded, you will find in that folder, there's something called the Completed Files. And in here, I've zipped up, that was the fifth video that I made, this is the sixth video, so if you're watching this video, it's probably, what am I up to? I think video 10. You will find I haven't finished this video yet, so you'll find a folder in here called 010. I know, there'd be no 010, maybe 10, and you can open that up. And open up--

Let's just do one. I double clicked it, opened it up, and there's the stuff we're working on. You can just open this in VS code. So go to 'File', 'Open', and compare yours versus mine. And I'll do that throughout the course. That's one of the ways you can check your code. The other things to note, or I guess, to check, and these are the things that I find my students run into, when I'm teaching live classes. Is people forget the full stop to identify a Class, or they start adding the class dot, 'class.' down here, which you're not meant to. One that always catches people out, is they'll accidentally delete one of these, with the curly braces. And because that one opens, and then doesn't close, kind of freaks out a bit. 

You can see it's changed the highlighting color a little bit, but it's just kind of missing, so, often you can go through, click on this, find your-- click on that first bracket, and you can see, it's highlighted the closing one. If I click on this one, it won't click on it because it doesn't know where the ending is. So it won't highlight its buddy; let's put his buddy back in. There he is. Now if you click on them, they kind of just connect to each other, there we go. 

The other things are, people forgetting to put colons in, and semicolons in. Just basic syntax problems. Basic spelling mistakes, like I do all the time. We'll do a bit more error checking later on. We'll install some plugins for VS code to help us with that syntax errors, but for the moment, those are the basic ones, and that will be it for this video. Let's get on to the next one.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024