Web design fundamentals: Learn the basics of HTML and CSS | Tilly Wittrup | Skillshare

Web design fundamentals: Learn the basics of HTML and CSS

Tilly Wittrup, Junior Full Stack Web Developer

Web design fundamentals: Learn the basics of HTML and CSS

Tilly Wittrup, Junior Full Stack Web Developer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
18 Lessons (54m)
    • 1. Course Introduction

      3:14
    • 2. First line in HTML

      6:32
    • 3. Div element

      4:08
    • 4. Images in HTML

      2:29
    • 5. Comments html

      1:29
    • 6. Bold, italic and underline text in HTML

      1:25
    • 7. Links in HTML

      2:39
    • 8. Lists in HTML

      2:06
    • 9. Input fields + form element

      4:53
    • 10. Email + button

      3:32
    • 11. Labels in HTML

      1:50
    • 12. Textarea in HTML

      1:05
    • 13. CSS Introduction

      4:08
    • 14. Get started with css

      4:17
    • 15. Classes in css

      3:13
    • 16. ID's + Spacing in CSS

      4:48
    • 17. Pseudo in CSS

      2:33
    • 18. Comments css

      0:57
  • --
  • 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.

31

Students

--

Projects

About This Class

In this course, you will learn the basics of HTML 5 and CSS. This will allow you to understand how websites work and how to build simple websites and advance your skill set.

What you will learn:

  • HTML 5.
  • CSS 3.

Meet Your Teacher

Teacher Profile Image

Tilly Wittrup

Junior Full Stack Web Developer

Teacher

I'm passionate about building web applications through React.js, SCSS, CSS, Ruby On Rails and other tech stacks to build advanced websites. I have been programming since I was 13, and in the past 6 years, I've experimented with lots of different programming languages.

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.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

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.

phone

Transcripts

1. Course Introduction: hand will come to this course in this course, we're gonna learn about Haiti more five and C asses and you will be able to build your own website from this. So the color off this course is not to be able to build Facebook of traders of like that. That's way more advanced. What we're gonna be to do is we're gonna be able to sign a website and understand the concepts off whip development. So that's what we're gonna learn this course, and I'm really science teacher about it. So first of all, hey, HMO and CSS is the to think you're gonna end in the first video, we're gonna own introduce you, change mall and then later on in the course, I'm gonna introduce you to CSS. So we're gonna start with H M O. And then afterwards go to see uses. So my name is Matilda. I have been programming for a long time, both of my hobby, and professionally I am. And I have actually started programming since I was 13 and am I just loved the feeling of building something and being creative in whipped development. So that's my background. Start briefly and then we're gonna move onto. What is Satyam? 05 Fatal five is standing for hyper text markup language, which means that is the skeleton of the pages, basically, or if the content like image Texan off it. But it's not like the styling. It's not like when you go on YouTube and you can see that blue button or the wet button. That's the text in There is Hey, Timo and but in the Sate Immel. But this wet color and a white tastes under button is ceases, so cirrhosis is the alignment colors, styling and offered website. Where's hate? More fivers? Basically off text links the image there or the Fed. We need to use hate mail to actually create a website it is vital in, and you can't do build a website without learning. Html five. It's like the first thing you need to learn to build a website. The last thing we're gonna look at before we're gonna get into it is in Haiti more. Five. We have something called a parent and a child elements of basically a child, tremendous and intermittent inside the parent element, which I'll show you in the next video. So basically What that means is, I am, and a parent element is apparent to the child element. And you can keep continuing building like that, like as a tree. And but you're gonna get a deeper introduction to net in the next video. 2. First line in HTML: So in this video we can install a co editor, and I'm going to explain the difference between a parent and a child element in Hatim. Are we also going to create our first hello world protect, which is a tradition and Web development? That area every time you learn a new language like PHP, Ruby years and blood at you always start with Hello, world I m. So I'm downloading this from Mac, but you can download it for Windows. Lee knows X well, and so I'm just going to click the stable download. You shouldn't be wearing much about dead. So why are we waiting for district download? It's gonna get in here now. You just opened this folder and because I want to have met computer, I'm only gonna show you how to his daughter than make. But it's paraded state straightforward on a windows as well. It just moved this inside the application file here. And then don't worry about the workplace thing, because there's just me that already had it installed it and then you just opened application. So this is a coded it. So basically, in web development, we have code editor and we have a take certain Texas has not reused. But you taken coming Do with development in it. But it's not really practical in any way. And this looks very confusing. T noon When you look at this, I suppose so. What we can do is we can physical, go in and se knew foul. Now we're creating a foul, just like if you're going into a text editor. Life resemble on windows is called something else. But on maggots cold. Tasted it. Like if you create a new word document, you're creating a false Well, so we're having a failure. Okay, good. So fish a fall reaps safest s a foul. And while this is loading, we saved This is indexed of hate mail. It needs to in unhittable TB a foul. I did. Didn't we go into what we're gonna created? We're gonna quote is well in this folder and then we're gonna call this index today. Rachel, the reason why I recorded Endesa's because every time bicultural you all and its index, you can see like every simple index it a two mil. You don't have to time it in. But if you have about the teachable you have to type it in. So here you can just remove it. If it's called Index, that Hatim, all you don't have to say anything else like that is the main foul. Don't be loaded into the name. So what we need to do now is we need to create a document here. So we need to physical specified that its hate more. Five. We do it like this. Dark Taipei tomorrow I didn't receive journal and re specified language, which is in this case is English M. And then we're gonna inside here, have a hitter. So this is apparent element. What s this is a child element to hate mail. And then in here we have everything that's not visible. We have tied off a symbol. Well, this is not gonna be visible. There's gonna be the title you will see up here for symbol, and then we have a body, while everything will be visible. Stasis attack. And this is attack. So this is a closing tax because it has this here West. This is an opening take and desist this. Well, just give some Timpson. So we are creating an open tech here inside here. What things will be visible. We're gonna create a paragraph tech, which is just a normal text tech him like this where we wouldn't have been Hello, world like this. So we're creating a tag in here, and this is also take I am or element you can call it and we just credit in here, but this will be visible West. Other one won't be. So now we're just gonna find this into finder here. Open would say, if I go crew £5 whatever browser you're using. So I'm just opening address. If I just to show you that you can open May What's if I, uh one? Don't worry. This is not public. This is only you that considers no one else has access to it. So we have created now a foul does justice to world Hello, world. And if you're going to create new one here concedes there's little world here inside all If we for someone to go in a changes to my first page and we fresh the page inside safari you will see assist my first page. We can also go in and say we want This is a small thank So we creating again apparent element. Would a child in mint where the world is gonna be? Small tastes? So that's all for this video. I hope this makes sense. If not, it will be into me since later on. Not everyone gets us at first, but after a while you will begin to see the logic and a system minute. Thank you very much watching. 3. Div element: All right, So you're already goes some idea of how Hey, tomorrow works. And now, hopefully otherwise I have bean drinks, everyone, otherwise you can get some feedback. I would love to hear your feedback. I am. So I'm just gonna go through some stuff here. So what we have here is paragraph tick. We have a small tank, and then we can go in and it even more Turton here we can even add a tech in here and see para breath. Hello. You can do that if you want to. And there's no wuss out. It is how you organize the code is making easier for Google to find out what your paint it's about. You will rank high on Google, but this and that it's a big is called search engine optimization. And we're not gonna go into this year because this gonna be way too long course than we are only gonna focus on hitching Monsen says you're gonna force a little bit about the rules and that, and but we also gonna just learn and have fun. And Bettany just learns a venue. So what we can do is we can also go in and create diff, which is basically a small element. Well, you didn't. Later on we will be able to style it. Give it a background color. I am with CSS and then weaken. It may be also make it large something like that, and put some continent it. We can already now give it a background colors. We can say style, background and then color. So this is a black color. This is the white collar. As you can see, I am. You can also and just going and choose another color. You can fight a color pig and it will find it for you, just to those a few half work with graphic sign. This probably makes a lot of sense for you. The text color is gonna be white, but Baker uncle is gonna be black. We can go in here and move dissed inside here, so this is kind of like a bus. You can determine how big house more her large is gonna be using CSS, which we're gonna go into later in this course. So if we now go into safari, you can see is change. We have some style in here, and this is 80 really good because then we have the possibility to style aware side. So it's not gonna be bowing and just takes like that. Imagine if every website looked like and old Microsoft works cited. Like I'm sure you it looked like this Hips So imagine if you had to create a website looking like this. Um, it just doesn't look good. And we're gonna be able to build way more beautiful websites. Maybe not the next Facebook into the same wise at first, But we're gonna I'm gonna try to teach you how to do it. But where the Sinus also just about being creative, Which means you allowed to think outside of the bus. And that's what ISS really good about whip design and with development. So and we now actually have a website ear saying in the world and with a white color and the black, black, black from color. So in the next video, I'm gonna show you how to include an image 4. Images in HTML: So in this video, we're gonna include an image. So here we have a beautiful image of a cat is not my cat. Unfortunately, I don't have any cat at the moment, but we're gonna include that picture on a website, so I just put it in here, gonna rename it so it's a bit easier to remember. I'm going to call it kid. So what we can do now is wouldn't go in here. See, I am G, which stands for image source, and then it always pops up here, then fact disability usage. And for the possibility that the image doesn't load, we're going to include some hidden tests for use on list. Image doesn't know, but a person used vice over for some are blind person using voice over which then we'll wait up. What assists here? So we described the picture so we can say cure care, looking in sort of a camera. So if we now go in and refresh, we have this beautiful large picture of a cat and what we can do now is we're going to different with off 400 a haIf of 400 pieces. This is a mission manned in whip development and Web design. Graphic to Sinus. Well, by default, you don't have to put paces in here. You can just say within haIf and then it will be way smaller. You see, this is maybe not the best align for two. We can make a delivery, Broder. And but now we actually connect this up to, like, 600. Maybe, but then it will refresh it. It looks even better. And you're gonna have this many pictures if you want. We can even have more than one of the same head. I mean, didn't just have desist defaults, I for simple. So if we didn't go in here two pinches of a beautiful kid, How amazing. Right? So this is how you can add in Pitchess. And then we can be styling it laid on. This is how you have pictures 5. Comments html: So in Haiti more fried. If you are able to do something called current and coming, so it's a nice way to structure your code. It is invisible for the, um, not user, the person that access to a website. Do you not able to see the current unless Dean going and see the code so that right well important and to browse, actually, just ignore. Sit So it doesn't make your website loads slower the way you can do commonest even going right. This at a magazine and based in large from space. And I wouldn't go in like this and put in a couple of Flynt's here justice here. You can do more than one look for some of say to deal it more cheese and what we can do knowledge and going in research. And, as you can see, nothing of seven because the comet is invisible. It is in the file, but it's not gonna be Cheryl, which is really important to keep a good structure of your coat. So that's all for this video. Thank you very much for I think See you in the next one 6. Bold, italic and underline text in HTML: So in this video, we're gonna learn about am how to make ID salad bowl and underlying in your taste, it's a fistful. We don't really need the kept pages anymore because you're feeling a lot of the space. You can remove it if you want to. You don't have to. So to make an tele ticks you just go with an attack here and then you can see and Terry text. Then we can go in and create built expressing bold no se be abilities Didn't being going to the sea you for underlined underlying text. So we have a telling taste. We have both face and underlying teas again. You can put this inside of paragraph. You don't have to you, but this is how you do these tax. And again there's hundreds of text you can use and Hatim Ill and we're not going to cover. All of them were gonna cover the most basics and the most important ones, and we're gonna cover the things you would always need to create a website. And so that's what we're gonna cover in discourse 7. Links in HTML : so in this really, we're gonna make a link so trailing we can going and create an ink itek which is a link. So we have to hate shot if which is where we're linking to, Do we have to taste in here? So basically we type in link here free symbol to the home page being called his home page. This is internal linking. That means we're linking in our website. We're nothing to another website, so that's internal link. So if you're going frankly, nothing captain's because we load the same page. But if we wanted to explore to an external page a 21 off another page we're going to create you could create a new page like this. Call it about that. Hey, Timo, and say about tomorrow Oh, you could go in and say Hey, tps I don't need that We just my own tutorial website I am Are you going to say google dot com And then we can just say cool And now we on Google so it doesnt chariot drawn to open with in the new paint. You can say target blank se target. I don't know why this is not working so if we just go in him again Oh, commence. If I you open a new window. So so about that mistake. It's because we had it before. And that's how you can make it open any window. You can just moved us if you don't want to. So that's all for this video seen, Denise. 8. Lists in HTML: Okay, so this really we can make lists and owner on ordered lists and ordered list. So basically, I'm going to share it here. So we have your for are not, at least and then we have a lie in as the list. So this is our one ordered list tag, and then we're inside here, put in a list where it would the content. You could, for example, say I Hello, Republican tea kink shoving list. You'll be safe from the dead. Then you can say cake and delicacy. And I I've under land you don't. And I'm sorry. I tell it takes, you don't have to do it, but you can't do it. Then we can say pieces. So that's what I know shoving this. This is I know that because we don't have any numbers in it. So if you wanted to create an ordered list so very simple it we can see bucket list for traveling. So why you want to travel to in an ordered way we can say something like, Well, under legacy. Well, don't here the new Kasey and I So it's only up here, we're changing. We'll still have a list item which is this one, And then we can say And you're saying and no way for a simple you can create us many issue want to you, like, create the same again if you want to, Just a matter what takes you making and your dinner for them. 700. I am So yeah, that's pretty much up to you. So that's how you create lists and hating you'll see in the next video. 9. Input fields + form element: So in this video, we're gonna create input fields. So we have em hate em all the possibility to create a field where you can type in some text and you can create different kind of feels. This is a bit ah, more complicated. And they won't fit in one video. So we're gonna make more than one video about this so we can play some ball going here and say in foot tied, then just inches between I am button submit, which is both buttons. And then you have prosperity to choose. Cover daytime E mail, fine. A password and so on. You all and so on. The most common ones is email takes and probably and number. So we're gonna stop creating a text, which is the time in this case, let's see what happens. So let's go in. Here I am so we can go inside our cross foul here and open meeting couple crucify or whatever you want to use. All right, So you connected side things in here. It won't be stored anywhere in the days of basis. Something like that. This all we're doing here has nothing to do with databases. That means the days would disappear if you we load the page. So this is again something you can learn later on. But it's always important to just learned basics off 18 months, he says. Before you learn how to do the database stuff and all that, at least that's what it's recommended. And so what you can do is go in and give it attributes. So we have an attribute here. For example, we just hate your yet target and which sprang and stylists and attribute. So you're gonna add in an Etch Butte? It is this another I attribute here, cold place older. Then we can say remain. Then it will basically go here. But if you type, it will disappear so the text isn't. Actually, there's just to give you an indication of why this If we don't change this to value, what will happen then is we have, like, this is actually a tick smoke. What you can also do is you can go in and you can say this field needs to be. We cry it. Now, if you're trying to submit this with a button which taken just show you now, I'm gonna explain about this injustice This is a form element. The formula meant it's not really visible. But the point if it is Teoh until the brows is dead, you want Teoh and I would use it to mitt the continent here to a server and then the several retrieved that dates and store and database send an email or whatever it is this country. So you will basically send this to a shaver west. This is and the method which is posed, which means that we are posting it to sever. Whereas if you use get, you would physically uses first search to get the data so we can see a phone if it post and then we can say action, which is where we are submitting it, which what you all justice ever have. So this case, we're just gonna say index rotation will, which is the same paint you We're not gonna excellent with tree founded eight anything that we're just going to submit it to you and then it will be starting to survive. If you write, it didn't like that, and then we can go down and creative. But, um so what happens now is we have Do you see you see, this was perfectly fine, except that it just submits to slash ate him out. Because we have this one here. So if you remove dead backslash deadwood, just refresh the same pain. Do you like this? However, it will say this field is required because we ask it to not be empty. And in the next video, we're gonna go through how she used to email feel Thank you very much watching See you in the next video. 10. Email + button: So in this video we're gonna focus on how to make Imo fall. So the way we're going to do that is where you gonna go in here and we gonna copy and paste is. Then we're gonna say email. Then we can see changes. Tsum, true placeholder. And why didn't something like Sophia at assembled come? And then we have two sets were crying, and then you would notice that if we we fresh paint job, move in a new window You noticed that we need to enter something in this field and weaken our just into like this. It needs to have an added and you end on something. Okay, so that's also a good old age. Um, So what else we can do is we converse immigrant Insee in boot time number, And then we've been saying very you can say, Actually, we mumblings is fine and maximum length is tin. Then we need to a minimum into if you're just in time. Actually, minute. We need to actually in tow. Minimum five. We just need to remove links. It just means I'm sorry about that. A key style we're going on. Refresh is it doesn't well date on there anyways. Apprenticeships. You can put in the mean familiar. It's because says Mueller. Melody Okay. Okay, Now, nice need to be this. But if you put it up to this is possible, you can put a time Dunton. Then you can submit it. Okay? Greek. So now that we have got an idea of how form elements works, we also want to look into you. We also have the possibility Just create a bottom element. It's not really I'm a difference. Yeah, um, so we can go in hand. It would just look the scene so you can go in and do that. That's what I'm feeling too. And And you couldn't go in and I had other types of elements. It's completely up to you, whatever you feel like gonna add. But this is hard for him. Could be with a contact form. Our luck inform again you wouldn't communicate with the dead space, But it's giving you an idea of how to put visuals together. So thank you very much of watching this video. Syrian next one 11. Labels in HTML: and Haiti Millikan, NASA creates have been colder label. So Les boys, basically the thing where you can see what it is Cem ticks field with basically says, What you gonna enter? So you can see, for example, see label for And then we can give it an I. D. And these two have to be the same thing. So what I do now is I sed click on out lt and then just click. And I have both of these fields. And I could have been at the same time this possible If use visual studio coat if used another it until you might not be able to. And then you would have to happen more than one time sweating cold is is we can call it name to exit this possibility. Weaken going. Click here. Now you're only type one food time. Then we could see full name and we couldn't even put a star here Issue see? Yeah. Okay, great. So now if you click here, it will select the film. But in the case that we actually remove full element, Nothing can't miss because it doesn't know which element icily. So we simply need to tell it that we want to select This one would an I. D name, which is unique ideas. Unique is only one time use. And then we select this one suggested for this video. See you in the next one. 12. Textarea in HTML : hello were considered tedious. And this year we're gonna Folsom Texeira so tastes very well. Could have simply made like this. If you're not going and look, you will have a textile area. This allows you to have more than one line and then you can go in and add a placeholder like normal. Say, answer your feedback here, for example, and you can go in. And so it's a vessel and you put the value in hinted. So if you're not gonna look, this is here. So that's how the takes are. Works is pretty simple. You don't have to give it time, and you can make it a crime. You can also get fit like 10 rows, which means we won't have wait longer. But you can also just give it to Rose. Thank you very much. Working just radio Syrian. Denise 13. CSS Introduction: so ceases is Willie Day. Most important thing about with the same? Uh, it's not the most important thing, but it's really important because it makes you and be able to Stein the things I continue to look nice. What are Seuss's? Everything would just look like it. Microsoft upside over sets off and and what we can use this this For wise, it's important. It's simply because we can use it to style things, make it look nice and just give it to use it. Customize experience, which then allow you to get more. Uses two rooms. Your website, because people actually liked it a sign and they don't think it's I impossible to navigate on your website. Therefore, using ceases to style website is extremely important, basically just analogy to build it. A sign on your website. So hate general is the Skelton. See, Assis is the burried, the external things you see on a human being. That's how you can put it like hey, technology as a skilled time. But I see assistance to finger see so what it's seizes, seizes stance for cascading size feed. It allows you to change the color of a text. Putin was spacing, doing animation, any kind of thing you could minute him and that you see in a normal website, I'd love these things made from CSS, some of them and made from a script. And But you said it always involves and cannot see says when you see like an animation in some sort of design, some often might be SPG 1000. That and I sphinx and ice limits to cirrhosis. But it does have a lot of opportunities, and it is continuously growing, and it's getting updated now and then. And then when it gets up there the next time for incident, it will be not a good up. Playfully we weren't and I was always come or functions from browsers and Dennison process will support us, so we're gonna get into browsers support later on. So we have in lifestyles will so on in line stylists uses. We always Sada. That's when you have to hit, you know, dark friend, and you didn't go into the state for several the development and put into style and an eagles to background blue, which then makes it a blue background color. And that's one way to do it. This is gonna be William Messy. If you're gonna be coding in us and you have so many in 9000 will be impossible to understand what's going on here. You moments moved, opportunity ceases, gets you. Yes, there is some opportunities. You can't just do it right that you could always do. And I stand in another way where you won't miss opportunities and put it into a hit. My document. But I can I wouldn't recommend that. And so we have external ships. Is which is the big solution for this X Celsius is is his own foul just like a drop ball? Just instead of ending that picked Imo it in some that's uses and then you compensable going into sexy 70 India, all after functionalities. And that's how we're gonna use icis to our advantage. So this gets started recesses in the next video 14. Get started with css: so in this really, we're gonna actually begin to learn how to ceases. So in CSS you can go in and a first of all we need to link our page to ceases. So we tell the browser that we have the sea is this file which is inside a full accord. She says cold diss uses, and we're gonna called, is and we need to have a wheel. We're just dying sheet turning to process that it's a stein shed, which cirrhosis is. And then we give it a type of checks. Slash uses. Okay, good. So what you can do now is wouldn't go in here and you can go here, click new file, asked him he knew and then save this file. Yes, in the folder cirrhosis. And then going here in court is the ceases searching to see we have after seizes, which is destroyed. So so check out this working. We have the possibility to select some things. The first we need to select lying for simple heading i m. So we can see a every hitting one. Each one like this would could it braces here won't be having a color off blue. So That means that every time the browser finds H one element into your page where this is this forest linked, it will make this blue. So now we have two sous blue color, and we can even go in and give it a fun size of, for example, 100 places just to see how big get get even bigger. But of course, they said guideline toe help baked. You should put it depending on how much chases and depending on queen size is that you show excited. Always move by users. You could say if we make this to move, I'll science. This would be pretty big for more by phone to get. And this is not even an iPhone. Sciences is bigger than life. One size, it just can't give smaller. So again, take that into account. When you use fantasizes, we can even go in also and say Background queen. Now this six would be pretty and nine Swede at a look at what amount would look pretty partly. But you can, of course, sided in a different way, and you can experiment with data bed. So that's how we connected slice of in and you conceal it any kind of element it and hates him well. And so you can go in and even see paragraph should have a fun size off 20 paces instead of the default one. So just get a little bit bigger note now so you can keep going like that. And then you can check the styles and so on and you confined styles at them and something to see saying inside FW, we're free school. Sorry. He in here, you can find all kind of things about HTML. CSS is like an entire documentation about things. So you can go in here and find all kind of things. Okay, Enough function. She congeals all kind of selectors and so on to see in the next video. 15. Classes in css: so it ceases. You can also select different kind of classes. So a class in CS is It's basically we could, for example, at this bow in here deceased's and instead of saying every day, every only want to attach and we did with the class off be inbox every day for the class of books would have this exact style. So what we can do now is we can actually just go here and cup in pieces this easier, and then you can just make it look like this if you are, so you're gonna spacey. But just look better without the space. Then you can go in and see that box, which means class just like to secure. And you think, Elin and at these two here doesn't magnificent the same blind orifice on a new line. Ideally, the code that other people might want to see should be each other's online. And there's different kind of stock. I love how you should form it. These kind of fouls. Some people were, for example, preferred like this. Whereas I prefer like this, this is again a taste of style is less Willie that that might be different rules for different kind of companies when you do development there. So we're just selecting a class here, which is this one. And then we are seeing this have to sell its stake. Sexing thing is only differences. We can remove this now and then It would look normal. So if you're going here now, evident number. But we can also do even more things we can good and put in a left dose. We use it and then just go in here. Sorry about this. They go. So if we now go in and copy and paste is a couple of times you received a sexing Russell. And this is classes. So classicists reusable, you can use it on. And the element you can even go in and use it here. Didn't removed the day via this will look a little bit different if you were. Someone has some spacing into that. We're gonna learn about that later. Thank you very much. Force in this video seen the next one 16. ID's + Spacing in CSS: so we can also have something cold and I d So when I deace something that can only be used one time and his only mentally use one time, it's like class. Just accept It's only one time and then we can say its core. I am Peregrine's, so we have to idea of paragraph. So you condemn Green is a paragraph with a Hess take and then you can go in and to like this same heading bridge ists. And so we're gonna go to explain in just a second and then we can just go on inside here and Ed Hello. So you can see this is a little bit most basing in here. So no, I'm introducing you to an attitude we have here, Inspector, to which is in Google Chrome. This means you don't go in and change the cells in real time, but it won't be saved very important. If you we first this page now and make this bigger like this, it will go back to 10 paces. It's not 11 pixels anymore, but I'm gonna show you something here because this makes it easier just to show mystery. So we have having here petting is to space. Right here is inside the bus. Then we have border, which weak for some of them Say border one peso. Where then will come with, like a border, all set of it. Consider you in just a second. Then we have Margon, which is the space outside the books. And you have one on the top. One of bottom one left and one on the wind. And the same with all of these that he set forward and high for just this one. All of the other ones have a bottom live right. So what? You can go in now and save us amiss. Botha. One peso, sir. Did. And she was a color. You can see. See? See. See, It's us. You know any kind of color you're gonna think of using green wit. Okay, so now you see here the boat appears here because we just added at the border, not in the final, of course. So if you request again, it will be deleted. And we can also say I'm going to see him back in, uh, my pace. Als. Do you see? It actually changes the spacing here between things. So you can see him back. Enough 10 pieces. Okay, so now you can see here we have a purse. You have poor spacing. And so you can actually make it look nice. And like now you know how to put spacing in. You know how to do fun size. You just say from size and the pixel 20 peso, for example. Uh 40. Peaceful. And then you also know how studio Khanna and you know how to do a background. Carla, did you see it? A background, a background color. You can do both. And because a c c. C So now we already know how to do some basic styling in Haiti. Monstrous is which then allows you to craze some minor websites. And now that you understand some of the most basics of cirrhosis and hate him, well, you can now hopefully understand when you we'd documentation f double retrieves Coombs, as you might remember, and I'm going dende and actually just there we did documentation. See if you can understand there because if I had to teach you every single property it would take Yes. And no one remembers every single property on this You every photograph pigment more yourself like that is not that important. This more important that you understand. And I'm gonna be able to read the documentation to improve your knowledge and you improve your skill set. Thank you very much. 14th this video, see in the next one. 17. Pseudo in CSS: So it's yes, if you can also use in pursuit class, which then we'll allow you to when you're forgets Embassy. That works. That a paragraph. I has tacked paragraph, whatever you want to do and see Coolum. And then you could see harbor, for example, And then you can say color back queen agree. What do you want to And you can do like this. You can even say front size should be 12 pixels so you can go in and experiment with that. And you can even going to end you something like that. Active, uh, going in c could empty the playing, um visited so we can actually grainy and said that reason it and we can go in in delink here and see a fine Caltech visited Queen. So how does this queen? Because we have visit this page before. Not like you have to click on the link it to actually make a chunk We green. You can't just visit Google outside like this. You need to actually click on the link. We can also go in and see instead if it's active. It's a blue. A black and blue is already play by default So So now when you click on it, but don't but keeping on it just clean it would actually turn blue, and we can say the focus. We can say all different kind of paints, which continues to even more styling since uses. 18. Comments css: So in CSS you can also do Kermit's. We have two ways to do. It is we have and much in common with just this one. It will also be hidden in this uses code browse sub. Simply just ignore it and does 18. What we have to work within sees this. You have one that can be Muslim line are just single line. And that's how you can make a common interests. Uses again. They see no changes were so immature document. Which means that the committee is working perfectly. Thank. So thank you very much for it in this video. See in the next one.