0:00cascading stylesheets or css is a
0:03stylesheet language famous for making
0:05websites look pretty by default a
0:07browser will render HTML as a boring
0:10black and white document CSS allows you
0:12to describe the presentation of this
0:14markup by modifying the size color
0:16positioning and layout of HTML elements
0:19it was first released in 1996 and
0:21evolved into CSS 3 by 1999 the language
0:25continues to evolve to this day with new
0:27features but there will never be a CSS 4
0:29just updates to the existing language
0:31the typical CSS rule starts with a
0:33selector that can be matched to an
0:35element in the HTML document you then
0:37use braces to create a declaration block
0:40that contain properties that change the
0:41appearance of that element this is known
0:43as a CSS rule but the tricky thing is
0:46that stylesheets Cascade a stylesheet
0:48might contain multiple rules that apply
0:50to the same element this creates a
0:52hierarchy and rules that are more
0:53specific will overwrite the rules of
0:55their parents in other words the order
0:57of your CSS rules matter in addition
1:00some elements will inherit the styles of
1:01their parent but others will not
1:03ultimately the browser uses the concepts
1:06of cascade specificity and inheritance
1:08to control which styles are applied to
1:10an element to get started open up a
1:12style tag in any HTML document a
1:15selector can Target all HTML elements of
1:17a certain type multiple related elements
1:19with a custom class or a single element
1:21with an ID now think of every HTML
1:24element like a box the content is in the
1:26middle followed by padding border and a
1:29margin the amount of real estate used by
1:31every area in the Box can be customized
1:33by defining properties like padding and
1:35margin they can take explicit pixel
1:37values or responsive values that are
1:39relative to the parent element or a
1:41percentage of the viewport itself now
1:43these boxes will bump into each other to
1:45make up a web page but you can use tools
1:47like Flex layout and grid layout to
1:49control how they float together in a
1:51sophisticated way it can also detect
1:53user interaction with pseudo selectors
1:55like hover CSS also makes it possible to
1:57add logic to your code with variables or
2:00custom properties and by making media
2:02queries that can apply Styles
2:03conditionally based on the size or type
2:06of device and it can even handle complex
2:08animations with Transitions and key
2:10frames this has been cascading
2:11stylesheets in 100 seconds hit the like
2:14button and subscribe if you want to see
2:15more short videos like this thanks for
2:17watching and I will see you in the next
2:19one