HTML & CSS for Absolute Beginners: CSS syntax / formatting CSS

Key Takeaways

all right so the syntax of CSS is actually very simple uh even if it looks a little bit weird especially compared to HTML and that is part of the fun of learning HTML CSS and JavaScript is all three languages are completely different from one another but there is a relationship between them and in this case the relationship is uh we're creating rules here to select things that are in our HTML and then style them so this rule that I have right here is selecting my body so this first thing I put there is called the selector that's my body and then this is the property that I'm choosing so I'm choosing my background color property and then I'm setting a value there so CSS is all about that selecting something and then property value Pairs and just for a very quick example of some of the other things we can do here I'm just going to shrink this down so we can see our page at the same time and I'm going to delete this and we're going to hit save on that so we go back to having a white background on our page and I'm going to select something else so if I come and take a look in my HTML over here let's say I want to select the title of my P page well if I look at the title there that's my H1 element so to select the H1 element we want to go back over to the stylesheet and then I would do the H1 now what's really important when you're selecting something in HTML is you're not going to be putting the triangle brackets we don't use those anywhere in CSS so when I look here I ignore the brackets that are on there and I'm just taking this thing that's right in the middle so if I want my H1 I take my H1 then after your selector you put your curly braces and vs codee's automatically going to put the the opening and the closing one for us so opening curly brace closing curly brace and then in here we write all the different things that we want to change and each one of those things is called a declaration as well uh I could start writing it right here but the best practice is always to go onto a new line so I'm going to push return it's using the indentation similar to how we saw it in our HTML and this time instead of a background color I can say color and this will change the color of the text so let's say I say color red and I save that and then I refresh over here and the color of it has changed or I could come in and say font size and I could say I don't know 50 pixels to make it really big and save that and hit refresh and it changes over here and I'll do one more before I talk a bit more about it uh let's do a text align and I'm going to write Center for this one and refresh and then that's going to Center that way so a few things you might have noticed here is when I'm writing these property value pairs I'm doing the property then after the name of the property then after the name of the property I'm putting a colon right there then I put the value I want and then after the value I'm putting a semicolon if I do not put semicolons this would be the same thing as in HTML as if I didn't put my closing uh tags for something so it just think that everything is part of my H1 and it could cause some problems so for example if I don't have those semicolons at the end and I refresh here you can see all the styles are gone because as far as the browser is concerned that's the same as writing this and and so it's saying color red font size 50 it just becomes a mess and it doesn't know what that is so just like in HTML we're creating new lines is just for us and we can add spaces and do different things that's only visual for us for the browser we need to have all of the correct things so color red so this is my property my value so I have a color declaration that's saying that my color will now be red and then I end that declaration here with the semicolon and then the semicolon here and a semicolon there and it does take a little bit of getting used to especially if you don't use a lot of semicolons but very quickly you're going to get used to writing the property values and always having your semicolons there and just it becomes very easy to also know sometimes if you forget one which can definitely happen that when you see that oh my text align Center and my font size aren't working the first thing to go look for is see if there's a typo because if you misspell a property uh VSS code's actually pretty good it will uh it will often highlight when there's a typo or something because it says it's an unknown property right there so that's one thing to look out for is just if you have typos but the other thing is if you do have missing semicolons or missing colons in the middle as well these different things are very important and you want to keep an eye out for them uh as you're working but as you can see VSS code helps us see these things by pointing out some of the mistakes that we might make along the way and another thing that's really important when we're writing our CSS just like with our HTML is this indentation that I talked about uh sometimes people get lazy and they write their CSS like this where they do it all together and at the beginning when you're just doing like one declaration it doesn't really seem like the end of the world because you have your H1 color red you have the red box that vs codes adding there to make life easier the problem with this is that it just becomes like you can see like the more you write the more Awkward this becomes and even if you have word wrap on like this is a big mess with word wrap on even and right now we only have three declarations on there you might end up with four 5 6 10 15 declarations uh on some things at times and so properly organizing them is really important it's going to make your life a lot easier in the long run and it's not hard to do it just means that every time we write something we do our selector so let's come in with a different selector this time I'm going to do p for my paragraphs I do my opening and closing curly braces and I hit return so I go on to a new line or enter now I rate the property I want so we're going to do color again after I do my color I do my colon let's say we do orange this time semicolon at the end and after my semicolon I always push enter or return to go onto a new line and now I hit save on there I can refresh over here and I see that all of my paragraphs have changed over to Orange uh which I definitely don't want to leave it that way it does not look very nice but at least I can see that it's actually working uh the another thing that I see sometimes people doing is they leave for some reason this ends up being over here it just again it just makes it a lot easier to see when you have your opening curly brace your closing curly brace and then all the different properties in one group and then you can come down put an extra space there and then maybe I choose my H2 and I say color is red we're creating a tabal color scheme right now but that's okay I get my H2S both switching over to the color red and then I can go and select the next thing and change other properties and values on the next thing