Learn CSS in 20 Minutes
Web Dev Simplified
CSs is a styling language which is used for modifying the appearance of the content of web pages..
The syntax of CSs is straightforward and easy to understand.. The main selectors are element class
and id selectors. the most common and useful selector is the class selector.. ids are supposed to be
unique across the webpage and each element can only have one id.. Each element can 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.. The most
common combination of selectors is when you want to share. A set of style properties and values
between multiple selectors. 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 web page.
using external CSs files like this is the best way to use CSs since it separates the presentation and
contents of websites. 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. the rel attribute stands for relationship to define relationship between the linked file and the
Html document. In the case of CSs, the rel attribute is stylesheet. in order the id selector is the most
important then the class selector and then the element selector. anything in here would override
anything in here 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 in your style sheet. the default value for text color is inherit, which means it inherits
whatever its parent 's value is.. If we style a 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 blue, for example,..
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.. 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. at 100 percent lightness
which is the max you 're going to have an entirely white color. 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. the very
next thing is padding. Padding padding is essentially just spacing between your content and your
padding. the next unit we have is percentage percentage which will take up whatever percentage of
the given width. that the object has inside of its parent. a type of font or scale called em 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 scale called rem, which scales off the font size of the
root of your document. rem scales off. of the parent of a document, so if we used rem here the size
of a 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 does n't change the size..
Web Dev Simplified
CSs is a styling language which is used for modifying the appearance of the content of web pages..
The syntax of CSs is straightforward and easy to understand.. The main selectors are element class
and id selectors. the most common and useful selector is the class selector.. ids are supposed to be
unique across the webpage and each element can only have one id.. Each element can 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.. The most
common combination of selectors is when you want to share. A set of style properties and values
between multiple selectors. 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 web page.
using external CSs files like this is the best way to use CSs since it separates the presentation and
contents of websites. 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. the rel attribute stands for relationship to define relationship between the linked file and the
Html document. In the case of CSs, the rel attribute is stylesheet. in order the id selector is the most
important then the class selector and then the element selector. anything in here would override
anything in here 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 in your style sheet. the default value for text color is inherit, which means it inherits
whatever its parent 's value is.. If we style a 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 blue, for example,..
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.. 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. at 100 percent lightness
which is the max you 're going to have an entirely white color. 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. the very
next thing is padding. Padding padding is essentially just spacing between your content and your
padding. the next unit we have is percentage percentage which will take up whatever percentage of
the given width. that the object has inside of its parent. a type of font or scale called em 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 scale called rem, which scales off the font size of the
root of your document. rem scales off. of the parent of a document, so if we used rem here the size
of a 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 does n't change the size..
