Up next in 10
Learn CSS in 20 Minutes
2K views
Feb 7, 2024
"Learn CSS in 20 Minutes" is a tutorial video aimed at providing a quick and comprehensive overview of Cascading Style Sheets (CSS), a fundamental technology used in web development for styling HTML elements. In just 20 minutes, viewers are introduced to the basics of CSS, including selectors, properties, values, and how to apply styles to HTML elements. The video covers essential concepts such as color, typography, layout, and responsive design techniques. Through clear explanations and practical examples, viewers can quickly grasp the essentials of CSS and start applying styles to their own web projects efficiently. Whether you're a beginner looking to get started with CSS or a seasoned developer in need of a refresher, this video serves as a valuable resource for mastering the basics of CSS in a short amount of time.
View Video Transcript
0:00
Hello everybody, in this video I'm going to teach you everything you need to know about CSS so you
0:05
can turn your bland HTML into something beautiful. If you do not already know HTML then check out my
0:10
introduction to HTML series where I walk you through everything you need to know about HTML
0:15
I will not be covering every property or option that CSS has to offer because there are hundreds
0:20
but I will be covering all the concepts you need to know in order to get started with CSS. Let's
0:25
first get started with what CSS is. A common misconception is that CSS is a programming
0:31
language but that is incorrect. CSS is actually a styling language which is used for modifying the
0:37
appearance of the content of web pages. Just as HTML is used for the content of web pages
0:42
CSS is used for presentation of that content. Due to the fact that CSS is used for presentation and
0:48
design there are many ways to do the same thing. HTML on the other hand has set elements for most
0:54
things which means that there is usually only one correct way to do things in HTML. The ability to
0:59
do things in many different ways is the reason most people either love or hate CSS. I personally
1:05
love it since it lets you express your creativity and gives you freedom to do things how you want
1:09
Now that we understand what CSS is let's dive into the details of how to use CSS. First we need to
1:16
discuss the syntax of CSS. Luckily the syntax is straightforward and easy to understand. The first
1:21
part of the syntax is the selector. There are many different types and combinations of selectors
1:26
which we'll talk about later but for now all you need to know is that a CSS style starts with a
1:31
selector to apply the style to. Next comes an opening and closing curly bracket that are used
1:37
to denote the start and end of the styles that apply to the selector. Everything in between
1:42
these curly brackets will be styles that are applied to the HTML elements that match the
1:46
selector. Lastly inside the curly brackets is one or more property value pairs. Each of these pairs
1:53
defines a property such as color, font size, width, etc and a value for that property. A basic example
2:00
of the CSS syntax will be setting the text color of all h1 elements to blue. Now that we have the
2:06
syntax out of the way let's focus on the various selectors. CSS contains many different types of
2:11
selectors but the main selectors are element, class, and ID selectors. We've already seen the
2:17
element selector in the previous example of turning all h1's blue. Any HTML element can be
2:22
used as a selector and the style is defined for that selector will apply to all HTML elements of
2:27
that type. By far the most common and useful selector is the class selector. The class selector
2:33
lets you select HTML elements based on their class attribute. If you remember from my HTML series
2:38
all HTML elements can have attributes assigned to them such as the href for an anchor tag. A
2:43
class is just an attribute that all HTML elements can have and is used with CSS to distinguish
2:49
elements for specific styling. The class attribute can also have multiple different classes in the
2:54
same attribute as long as they're separated by a space. In order to select an element by class we
3:00
need to use a period before the class name as the CSS selector. This period tells CSS that whatever
3:06
follows is a class name and not an HTML element name. Classes are the most common selector used
3:13
because they are amazing for creating reusable components. For example if you have a site with
3:18
three different types of buttons that all share the same basic styling but have a different color
3:22
you can use one base class of button to define all the styles shared between all buttons. You
3:28
can then have three other classes that define the specific color for the button. Then all you need
3:33
to do is add both the base button class and your color specific class to your HTML button element
3:38
and I'll have all the styles defined in the base button class and the color specific class. The
3:44
last common selector is the ID selector. The ID selector is very similar to the class selector in
3:50
that it is an HTML attribute but an element can only have one ID while it can have multiple classes
3:57
An ID also should be unique across the entire web page but HTML does not actually enforce this
4:04
To use an ID as a selector you simply need to use a pound sign followed by the ID name much like how
4:09
classes use a period followed by the class name. Our previous example is impossible to do with IDs
4:16
since IDs are supposed to be unique across the web page and each element can only have one ID
4:22
Because of this I very rarely use IDs. In 99% of all my CSS I use class selectors and avoid using
4:29
HTML and ID selectors as much as possible. On top of having many different selectors CSS has
4:35
multiple different ways to combine selectors together to make your selectors more specific
4:40
The first way to combine selectors is to specify multiple selectors that an element must have in
4:44
order to be styled. To do this you need to write the various different selectors together with no
4:49
spacing between them. For example if you wanted to select all h1 elements with the class large
4:55
heading then you would write the following selector. If you wanted to select an element
4:59
with the ID big blue and both the class large and blue then you would use this selector
5:05
All HTML selectors can be combined in this way as many times as you want to create specific or
5:11
general rules. Another way to combine selectors is to use multiple selectors to specify an ancestor
5:17
of an element. To do this you will put a space between the ancestor and child selector. For
5:22
example to select all p tags inside a div you simply need to use the following selector. This
5:28
will select all p tags that have a div as their ancestor even if the div tag is not the direct
5:34
parent of the p tag. This combination of selectors can be combined with the previous combination of
5:39
selectors to make even more specific selectors. For example to select all h1 tags with the class
5:46
of brown that have a header with the class main header as their ancestor you would do this
5:51
The last common combination of selectors is when you want to share a set of style properties and
5:56
values between multiple selectors. If you have a class big and another class large that both have
6:02
the same style properties and values then you can combine these selectors into one selector by using
6:07
a comma between the selectors. This allows you to avoid duplication. It is important to note that
6:14
all the CSS combination selectors can be used together to create even more complex combinations
6:19
if needed. There is also one other form of selector the everything selector that is used to
6:24
select every element on the entire web page. This selector is defined as the asterisk symbol and is
6:29
only really used to set some defaults for your entire web page such as font family. The last
6:34
thing we need to discuss before writing some CSS is how to load the styles we write into our html
6:39
page. There are three main ways to do this. The first and by far worst is to use inline styles
6:46
An inline style is CSS that is written directly inside an html element and thus does not need a
6:51
selector. This is done through the use of the style attribute. This is a terrible idea though
6:56
since html is meant for the content only and mixing CSS styles into your html elements adds
7:03
presentation to your html which is meant for CSS files. It prevents us from reusing those styles
7:08
anywhere else since they are written into the actual html element. Lastly depending on the
7:13
styles you use in inline your page may load slower. The second option of using the style html
7:20
element is slightly better but still a bad idea. The style element is an html element defined in
7:26
the head and formatted exactly like a CSS file. The problem with using the style element though
7:32
is that the presentation of the web page is defined in the html file and not a CSS file
7:37
The styles you define in the style element are also only available on the page you define them
7:41
and are thus not reusable across multiple pages. The final and best way to define CSS styles is to
7:48
use a separate CSS file and link to it from the html. All the styles for the entire web page can
7:54
be defined in one or more CSS files and they can be added to any web page by using a simple link
7:59
element inside the head. The link element is a simple element that can be used to link files
8:04
to the html and its main use is to link CSS files. The link element is also an empty element that
8:10
uses the rel attribute which stands for relationship to define the relationship between the
8:15
linked file and the html document. In the case of CSS the rel attribute will be stylesheet since CSS
8:21
is a stylesheet for the html. The only other attribute that we need to define is the href
8:27
attribute. The href attribute works exactly the same as the href attribute of an anchor tag
8:32
and should point to either your CSS file or the url of another person's CSS file
8:38
Using external CSS files like this is the best way to use CSS since it separates the presentation
8:44
and contents of websites and allows reusability of styles across the website
8:49
Now that we have an understanding of how to write CSS styles and select specific html elements
8:54
let's jump into a live example of these concepts. As you can see on the left I have a sample html
9:01
page open up inside of Visual Studio Code and on the right I have this page opened up in Google
9:06
Chrome using live server. To get started let's use an inline style on this h1 element to turn
9:11
the text a different color. So we'd use a style attribute here and we would set the color value
9:17
since the color property is used to change text color and we'll set it to a color of red for
9:21
example. If we save that as you can see our text will change to red but as we know using these style
9:27
attributes is a bad idea. Instead let's use the style tag inside of the head and use the h1
9:35
selector to select the h1 element and we'll all set the color to blue this time. Save that and we
9:42
can see the color is blue but again we know that this is not the most optimal way to do it. Instead
9:47
let's create a new file called styles.css. Inside this styles.css file let's put our h1 selector
9:56
and set the color to green. Now in order to get this style to load in our page we need to use a
10:03
link tag here which the rel is going to be stylesheet and the href is going to point to that
10:13
styles.css file. Now if we save that you can see that our text changes to green. If we were to move
10:20
this link tag above our style tag for example though you see that our text is still blue
10:25
This is because css takes whatever the last defined style is for an element so in this case
10:31
the h1 setting the color to blue is below the import of this link so our text is blue. If we
10:37
remove this style though you'll see that when we save it our text turns back to green because it's
10:42
loading this style in here. We can show that example again by putting h1 here with a color
10:47
of red this time and now when we save that this text will change to red because this selector
10:53
is after this selector. Now that we've finished importing all of our styles let's dive a little
11:00
bit more into how the styles are actually applied. To do this let's add a class to this h1
11:06
and we'll give it a class of blue and instead of our styles.css let's add that blue class
11:12
selector in here and give it a property and value for color to be blue. Now when we save it we see
11:19
that our color changes to blue but you would think that the color would be green since this h1
11:24
selector comes after the blue class selector but css actually puts different values onto these
11:31
different selectors. Element selectors are the lowest level selector which means that they're
11:36
always overridden by other selectors such as the class selector. The class selector is then the
11:41
next in line and it is overridden only by the id selector so in order the id selector is the most
11:48
important then the class selector and then the element selector. So if we were to look at an
11:53
example we have an id here class and another class this selector would have a higher specificity
12:04
than this selector that had three classes that is because there is an id here so the id setting has
12:12
a value of one and then we have two classes here so the class value would have two but this was
12:17
three classes and no id so since there's one id on this one it would be a higher specificity so
12:22
anything in here would override anything in here. Essentially the easiest way to look at this is to
12:29
first count the number of ids in the selector if the number of ids is equal then go on to the number
12:36
of classes in the selector if the number of classes is equal then finally go on to the number of
12:40
elements in the selector if that is also equal then whichever one is defined last is going to
12:46
be the one that's applied. In any case if the id number class number or element number is greater
12:53
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
13:08
equal to black for example this will override everything anything defined in line like this
13:17
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
13:31
here has margin on the top and bottom of it and this p tag has this black text that is because the
13:37
text color is inherited from whatever the parent is. This is apparent if we style the body tag
13:43
in here and we set the color to be red this will change all the text in our entire application to
13:50
be red that is underneath the body tag unless otherwise specified such as this blue selector
13:55
here that is specifying the h1 should be blue this is because the default value for text color
14:01
is inherit which means it inherits whatever its parents value is. Since we've been talking about color so much let's dive into the different ways that you can define
14:11
colors in html. By default you can use these simple color selectors of red green blue pink
14:19
and various other different colors but sometimes you want to get more specific than these very
14:23
generic colors. In order to do that we'll use hexadecimal colors in order to set these. A
14:30
hexadecimal number is similar to our decimal system that goes from 0 to 9 but hexadecimal
14:36
goes from 0 to 15. In order to represent these numbers that are above 9 hexadecimal uses the
14:42
letters a b c d e and f so if we wanted to write 15 in hexadecimal you would write the pound sign
14:50
followed by an f which would be 15. So for using colors this hexadecimal is broken up into three
14:58
distinct parts of two digits each so we have the first two digits the second two digits and the
15:05
third two digits and each set of these digits represents a different color so the first two
15:10
digits represent red the middle two digits represent green and the last two digits represent
15:17
blue and this is on a scale from 0 to double f where double f is equal to 255 in decimal
15:24
So the smaller the number the less of that we have so if this was 00 then that means there is
15:31
no red at all if this one was ff as it is that means that we have all the most amount of blue
15:38
possible so if we wanted to get just blue we would use 00 for red 00 for green and then ff for blue
15:47
and if we save that we get a blue color. This is a little bit difficult to wrap your header around
15:52
so there's other ways to define colors in CSS. One of those ways is using RGB. RGB is just like
15:59
the hexadecimal version but it's broken out into three distinct sections so we have red which goes
16:04
between 0 and 255 and this is in decimal so we can just write 255 if we want entirely red and the next
16:11
value is going to be green again so we can just do 255 and then the last one is going to be blue
16:16
and let's just say that's 0 so if we save that we get yellow. Then another way if you wanted to have
16:23
a partially transparent color is you could use RGBA where then we have one more value that goes
16:29
between 0 and 1 which is going to be the transparency so if it's 1 it means that it is
16:35
fully opaque and if it is 0 then it is going to be entirely transparent and some combination in
16:41
between there means that it is partially transparent. This partial transparency can also be
16:46
achieved by using the hexadecimal version of the color and we will just have an extra two digits
16:53
at the end of the hexadecimal which represent the transparency so if we wanted to do black we would
16:57
do 0 0 0 0 0 0 since we have 0 red 0 green and 0 blue and then the final value will be the alpha
17:05
value which will be between 0 and 255 again so if we want it to be entirely opaque we would do ff
17:12
save that and we get entirely opaque black and if we wanted it to be entirely transparent just 0 0
17:19
and that'll make it entirely transparent. The last way to define colors in HTML is using HSL
17:25
which stands for hue saturation lightness. The first value hue goes between 0 and 360
17:31
and determines which color you're going to be using we'll just use 0 in this example
17:36
Saturation goes from 0 to 100 and determines how colorful this color is at 100 saturation it's as
17:43
bright as it can be and at 0 saturation there is no color in it is either going to be black
17:48
white or somewhere in between there so let's just use 100 in this example and then lastly lightness
17:54
is going to determine how bright that color is so at 100 lightness which is the max you're going
18:00
to have an entirely white color and at 0% lightness you're going to have an entirely black
18:04
color and anywhere in between there is going to be a different shade of that color so let's just
18:08
use 50% in this example and if we save that we see that we get red from this. Also HSL has an HSLA
18:17
version which lets you put the alpha value or the transparency the end where 1 is going to be
18:22
entirely opaque and 0 is going to be entirely transparent just like RGBA at the top. Next we're
18:29
going to talk about the box model. In order to demonstrate this I'm going to create a new div
18:33
element and I'm going to give it a class of box there we go and then in the style we'll style
18:42
that box element and we'll give it a height and a width of 100 pixels, a padding of 20 pixels
18:57
a margin of 50 pixels, and a border that is going to be 10 pixels and it'll be black. Don't worry
19:06
about the syntax here this is really just to demonstrate how the box model works. If we save
19:10
that oh first let's give it a background background color of red and now as you can see over here we
19:22
have this red background we have our black border but where is this margin and padding coming from
19:29
In order to see this let's inspect this element in Google Chrome, pull this over so that we can
19:34
actually see and down here we have the box model. So we have our 100 width by 100 height which is
19:42
the actual content of our thing and then around that we have a padding of 20 and on the left here
19:48
over here you can see that it is highlighting so in blue we have the actual content 100 by 100
19:54
in orange we have the padding which is 20 pixels on each side, next comes our black border which is
19:59
10 pixels around the padding, and then lastly our 50 pixels of margin that go around the content
20:06
The box model works where the inside of the box model the very center is your actual content
20:11
This is going to be your text image whatever it is that takes up that space is going to be there
20:16
and then the very next thing is padding. Padding is essentially just spacing between your content
20:22
and your border so on a button for example this is what allows you to create space between
20:27
your letters of your button and the actual border around your button with the background
20:32
Background also goes on the padding because the background is inside of the border
20:37
Then we have the border which is self-explanatory whatever size you make the border is how wide the
20:41
border is going to be and then lastly we have our margin which is going to be the space on the
20:46
outside of the border which helps you space elements out from each other. Margin is meant to
20:52
space elements around other elements and padding is meant to space elements around their own border
20:59
or to add spacing between the element and their actual background. Now that we understand the box
21:05
model let's discuss the various different units that we can use on this box model. Let's close
21:09
out of this inspector widen up our view here and let's talk about first of all pixels. Pixels are
21:17
fairly self-explanatory they're the unit that you use most of the time when defining content sizes
21:22
and is going to be a set fixed width on every size screen. The next unit we have is percentage
21:29
Percentage is also fairly self-explanatory and will take up whatever percentage of the given
21:34
width that the object has inside of its parent. So if we make this width 10 percent this box will
21:41
be 10 percent of the width of the screen since the entire width here is how much space we have to work
21:46
with. A next type of unit that we have is going to be em. Em is mostly used for fonts and font related
21:54
situations like padding around fonts and it is going to be it scales off of the actual font size
22:00
so if your font size is 16 pixels then 1 em equals 16 pixels. 2 em would be 32 pixels and so on
22:12
There's also another type of font or scale called rem which is very similar to em in that it scales
22:19
off of your font size but rem scales off the font size of the root of your document so the very very
22:26
base level of our browser where if we went into the settings and scaled our font size it would
22:31
scale off of that while em scales off of the parent. So this box has a parent of body so if we
22:38
change the font size on this body to be 20 pixels you'll see that our actual box gets wider but if
22:45
we used rem here the size of the box stays the same even if we bump this up to 200 pixels for example
22:52
Let's do 30 actually as you can see bumped up to 40 still doesn't change the size and that right there
23:00
is pretty much everything you need to know in order to get started with CSS. I know we've covered a
23:05
lot in this video and we're still missing a lot of what there is to do in CSS but with these simple
23:10
rules you can get started and create any basic website that you want and style it using these
23:16
CSS rules. In my next few videos I'm going to go and cover all the CSS styling needed to create a
23:22
modern looking band website so if you're interested in learning more about CSS and the different
23:27
properties that are available be sure to check out those videos when they come out. Also like this
23:33
video if you enjoyed it and subscribe for more similar content and let me know down in the
23:37
comments below why you decided you wanted to learn CSS and what you're going to create with it
23:42
Thanks for watching
#Development Tools
#Educational Software
#Programming
#Scripting Languages
#Skins
# Themes & Wallpapers
#Software