Learn CSS in 20 Minutes

Key Takeaways

hello everybody in this video i'm going to teach you everything you need to know about css so you can turn your bland html into something beautiful if you do not already know html then check out my introduction to html series where i walk you through everything you need to know about html i will not be covering every property or option that css has to offer because there are hundreds but i will be covering all the concepts you need to know in order to get started with css let's first get started with what css is a common misconception is that css is a programming language but that is incorrect css is actually a styling language which is used for modifying the appearance of the content of web pages just as html is used for the content of web pages css is used for presentation of that content due to the fact that css is used for presentation and design there are many ways to do the same thing html on the other hand has set elements for most things which means that there is usually only one correct way to do things in html the ability to do things in many different ways is the reason most people either love or hate css i personally love it since it lets you express your creativity and gives you freedom to do things how you want now that we understand what css is let's dive into the details of how to use css first we need to discuss the syntax of css luckily the syntax is straightforward and easy to understand the first part of the syntax is the selector there are many different types and combinations of selectors which we'll talk about later but for now all you need to know is that a css style starts with a selector to apply the style to next comes an opening and closing curly bracket that are used to denote the start and end of the styles that apply to the selector everything in between these curly brackets will be styles that are applied to the html elements that match the selector lastly inside the curly brackets is one or more property value pairs each of these pairs defines a property such as color font size width etc and a value for that property a basic example of the css syntax will be setting the text color of all h1 elements to blue now that we have the syntax out of the way let's focus on the various selectors css contains many different types of selectors but the main selectors are element class and id selectors we've already seen the element selector in the previous example of turning all h1's blue any html element can be used as a selector and this style is defined for that selector will apply to all html elements of that type by far the most common and useful selector is the class selector the class selector lets you select html elements based on their class attribute if you remember from my html series all html elements can have attributes assigned to them such as the href for an anchor tag a class is just an attribute that all html elements can have and is used with css to distinguish elements for specific styling the class attribute can also have multiple different classes in the same attribute as long as they're separated by a space in order to select an element by class we need to use a period before the class name as the css selector this period tells css that whatever follows is a class name and not an html element name classes are the most common selector used because they are amazing for creating reusable components for example if you have a site with three different types of buttons that all share the same basic styling but have a different color you can use one base class of button to define all the styles shared between all buttons you can then have three other classes that define the specific color for the button then all you need to do is add both the base button class and your color specific class to your html button element and i'll have all the styles defined in the base button class and the color specific class the last comment selector is the id selector the id selector is very similar to the class selector in that it is an html attribute but an element can only have one id while it can have multiple classes an id also should be unique across the entire web page but html does not actually enforce this to use an id as a selector you simply need to use a pound sign followed by the id name much like how classes use a period followed by the class name our previous example is impossible to do with ids since ids are supposed to be unique across the webpage and each element can only have one id because of this i very rarely use ids in 99 of all my css i use class selectors and avoid using html and id selectors as much as possible on top of having many different selectors css has multiple different ways to combine selectors together to make your selectors more specific the first way to combine selectors is to specify multiple selectors that an element must have in order to be styled to do this you need to write the various different selectors together with no spacing between them for example if you wanted to select all h1 elements with the class large heading then you would write the following selector if you wanted to select an element with the id big blue and both the class large and blue then you would use this selector all html selectors can be combined in this way as many times as you want to create specific or general rules another way to combine selectors is to use multiple selectors to specify an ancestor of an element to do this you will put a space between the ancestor and child selector for example to select all p tags inside a div you simply need to use the following selector this will select all p tags that have a div as their ancestor even if the div tag is not the direct parent of the p tag this combination of selectors can be combined with the previous combination of selectors to make even more specific selectors for example to select all h1 tags with the class of brown to have a header with the class main header as their ancestor you would do this the last common combination of selectors is when you want to share a set of style properties and values between multiple selectors if you have a class big and another class large that both have the same style properties and values then you can combine these selectors into one selector by using a comma between the selectors this allows you to avoid duplication it is important to note that all the css combination selectors can be used together to create even more complex combinations if needed there is also one other form of selector the everything selector that is used to select every element on the entire web page this selector is defined as the asterisk symbol and is only really used to set some defaults for your entire webpage such as font family the last thing we need to discuss before writing some css is how to load the styles we write into our html page there are three main ways to do this the first and by far worst is to use inline styles an inline style is css that is written directly inside an html element and thus does not need a selector this is done through the use of the style attribute this is a terrible idea though since html is meant for the content only and mixing css styles into your html elements adds presentation to your html which is meant for css files it prevents us from reusing those styles anywhere else since they are written into the actual html element lastly depending on the styles you use inline your page may load slower the second option of using the style html element is slightly better but still a bad idea the style element is an html element defined in the head and formatted exactly like a css file the problem with using the style element though is that the presentation of the web page is defined in the html file and not a css file the styles you define in the style element are also only available on the page you define them and are thus not reusable across multiple pages the final and best way to define css styles is to use a separate css file and link to it from the html all the styles for the entire webpage can be defined in one or more css files and they can be added to any web page by using a simple link element inside the head the link element is a simple element that can be used to link files to the html and its main use is to link css files the link element is also an empty element that uses the rel attribute which stands for relationship to define the relationship between the linked file and the html document in the case of css the rel attribute will be stylesheet since css is a stylesheet for the html the only other attribute that we need to define is the href attribute the href attribute works exactly the same as the href attribute of an anchor tag and should point to either your css file or the url of another person's css file using external css files like this is the best way to use css since it separates the presentation and contents of websites and allows reusability of styles across the website now that we have an understanding of how to write css styles and select specific html elements let's jump into a live example of these concepts as you can see on the left i have a sample html page open up inside a visual studio code and on the right i have this page opened up in google chrome using live server to get started let's use an inline style on this h1 element to turn the text a different color so we'd use the style attribute here and we would set the color value since the color property is used to change text color and we'll set it to a color of red for example if we save that as you can see our text will change to red but as we know using these style attributes is a bad idea instead let's use the style tag inside of the head and use the h1 selector to select the h1 element and we'll all set the color to blue this time save that and we can see the color is blue but again we know that this is not the most optimal way to do it instead let's create a new file called styles.css inside the styles.css file let's put our h1 selector and set the color to green now in order to get this style to load in our page we need to use a link tag here which the rel is going to be stylesheet and the href is going to point to that styles.css file now if we say that you can see that our text changes to green if we were to move this link tag above our style tag for example though you see that our text is still blue this is because css takes whatever the last defined style is for an element so in this case the h1 setting the color to blue is below the import of this link so our text is blue if we remove this style though you'll see that when we save it our text turns back to green because it's loading this style in here we can show that example again by putting the h1 here with a color of red this time and now when we save that this text will change to red because this selector is after this selector now that we've finished importing all of our styles let's dive a little bit more into how the styles are actually applied to do this let's add a class to this h1 and we'll give it a class of blue and inside of our styles.css let's add that blue class selector in here and give it a property and value for color to be blue now when we save it we see that our color changes to blue but you would think that the color would be green since h1 selector comes after the blue class selector but css actually ports different values onto these different selectors element selectors are the lowest level selector which means that they're always overridden by other selectors such as the class selector the class selector is then the next in line and it is overridden only by the id selector so in order the id selector is the most important then the class selector and then the element selector so if we're to look at an example we have an id here class and another class this selector would have a higher specificity than this selector that had three classes that is because there's an id here so the id setting has a value of one and then we have two classes here so the class value would have two but this was three classes and no id so since there's one id on this one it would be a higher specificity so anything in here would override anything in here essentially the easiest way to look at this is to first count the number of ids in the selector if the number of ids is equal then go on to the number of classes in the selector if the number of classes is equal then finally go on to the number elements in the selector if that is also equal then whichever one is defined last is going to be the one that's applied in any case if the id number class number or element number is greater when you get to that step of adding that is the style that will be applied also if we have an inline style so for example in here if we put style and we set the color to be equal to black for example this will override everything anything defined in line like this overrides everything in your style sheet no matter what most html elements have a set of default css that is applied to them as you can see the h1 tag over here has margin on the top and bottom of it and this p tag has this black text that is because the text color is inherited from whatever the parent is this is apparent if we style the body tag in here and we set the color to be red this will change all the text in our entire application to be read that is underneath the body tag unless otherwise specified such as this blue selector here that is specifying the h1 should be blue this is because the default value for text color is inherit which means it inherits whatever its parent's value is since we've been talking about color so much let's dive into the different ways that you can define colors in html by default you can use these simple color selectors of red green blue pink and various other different colors but sometimes you want to get more specific in these very generic colors in order to do that we'll use hexadecimal colors in order to set these a hexadecimal number is similar to our decimal system that goes from 0 to 9 but hexadecimal goes from 0 to 15. in order to represent these numbers that are above 9 hexadecimal uses the letters a b c d e and f so if we wanted to write 15 in hexadecimal you would write the pound sign followed by an f which would be 15. so for using colors this hexadecimal is broken up into three distinct parts of two digits each so we have the first two digits the second two digits and the third two digits and each set of these digits represents a different color so the first two digits represent red the middle two right digits represent green and the last two digits represent blue and this is on a scale from zero to double f where double f is equal to 255 in decimal so the smaller the number the less of that we have so if this was 0 0 then that means there is no red at all if this one was ff as it is that means that we have all the most amount of blue possible so if we wanted to get just blue we would use zero zero for red zero zero for green and then f for blue and if we save that we get a blue color this is a little bit difficult to wrap your header around so there's other ways to define colors in css one of those ways is using rgb rgb is just like the hexadecimal version but it's broken out into three distinct sections so we have red which goes between 0 and 255 and this is in decimal so we can just write 255 if we want entirely red and the next value is going to be green again so we can just do 255 and then the last one is going to be blue and let's just say that's zero so if we save that we get yellow and then another way if you wanted to have a partially transparent color is you could use rgba where then we have one more value that goes between zero and one which is going to be the transparency so if it's one it means that it is fully opaque and if it is 0 then it is going to be entirely transparent and some combination in between there means that it is partially transparent this partial transparency can also be achieved by using the hexadecimal version of the color and we will just have an extra two digits at the end of the hexadecimal which represents the transparency so if we wanted to do black we would do zero zero zero zero zero zero since we have zero red zero green and zero blue and then the final value will be the alpha value which would be between zero and 255 again so if we wanted to be entirely opaque we would do ff save that and we get entirely opaque black and if we wanted it to be entirely transparent just zero zero and that'll make it entirely transparent the last way to define colors in html is using hsl which stands for huge saturation likeness the first value hue goes between 0 and 360 and determines which color you're going to be using we'll just use zero in this example saturation goes from zero to one hundred percent and determines how colorful this color is at one hundred percent saturation it's as bright as it can be and it's zero percent saturation there is no color in it is either going to be black white or somewhere in between there so let's just use 100 in this example and then lastly lightness is going to determine how bright that color is so at 100 percent lightness which is the max you're going to have an entirely white color and at zero percent lightness you're going to have an entirely black color and anywhere in between there is going to be a different shade of that color so let's just use 50 in this example if we say that we see that we get red from this also hsl has an hsl a version which lets you put the alpha value or the transparency the end where one is going to be entirely opaque and zero is going to be entirely transparent just like rgba at the top next we're going to talk about the box model in order to demonstrate this i'm going to create a new div element and i'm going to give it a class of box there we go and then in the style we'll style that box element and we'll give it a height and a width of 100 pixels a padding of 20 pixels a margin of 50 pixels and a border that is going to be 10 pixels and that will be black don't worry about the syntax here this is really just to demonstrate how the box model works if we save that oh first let's give it a background background color of red and now as you can see over here we have this red background we have our black border but where is this margin and padding coming from in order to see this let's inspect this element in google chrome pull this over so that we can actually see and down here we have the box model so we have our 100 width by 100 height which is the actual content of our thing and then around that we have a padding of 20. and on the left here over here you can see that it is highlighted so in blue we have the actual content 100 by 100 in orange we have the padding which is 20 pixels on each side next comes our black border which is 10 pixels around the padding and then lastly are 50 pixels of margin that go around the content the box model works where the inside of the box model the very center is your actual content this is going to be your text image whatever it is that takes up that space is going to be there and then the very next thing is padding padding is essentially just spacing between your content and your border so on a button for example this is what allows you to create space between your letters of your button and the actual border around your button with the background background also goes on the padding because the background is inside of the border then we have the border which is self-explanatory whatever size you make the borders how wide the border is going to be and then lastly we have our margin which is going to be the space on the outside of the border which helps you space elements out from each other margin is meant to space elements around other elements and padding is meant to space elements around their own border or to add spacing between the element and their actual background now that we understand the box model let's discuss the various different units that we can use on this box model let's close out of this inspector widen up our view here and let's talk about first of all pixels pixels are fairly self-explanatory they're the unit that you use most the time when defining content sizes and is going to be a set fixed width on every size screen the next unit we have is percentage percentage is also fairly self-explanatory and will take up whatever percentage of the given width that the object has inside of its parent so if we make this width ten percent this box will be ten percent of the width of the screen since the entire width here is how much space we have to work with the next type of unit that we have is going to be em em is mostly used for fonts and font related situations like padding around fonts and it is going to be it scales off of the actual font size so if your font size is 16 pixels then 1 em equals 16 pixels 2em would be 32 pixels and so on there's also another type of font or scale called rem which is very similar to em in that it scales off of your font size but rem scales off the font size of the root of your document so the very very base level of our browser where if we went into the settings and scaled our font size it would scale off of that while em scales off of the parent so this box has a parent of body so if we change the font size on this body to be 20 pixels you'll see that our actual box gets wider but if we used rem here the size of the box stays the same even if we bump this up to 200 pixels for example let's do 30 actually as you can see pumped up to 40 still doesn't change the size and that right there is pretty much everything you need to know in order to get started with css i know we've covered a lot in this video and we're still missing a lot of what there is to do in css but with these simple rules you can get started and create any basic website that you want and style it using these css rules in my next few videos i'm going to go and cover all the css styling needed to create a modern looking band website so if you're interested in learning more about css and the different properties that are available be sure to check out those videos when they come out also like this video if you enjoyed it and subscribe for more similar content and let me know down in the comments below why you decided you wanted to learn css and what you're going to create with it thanks for watching