CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of structured documents written in HTML or XML. CSS was introduced to separate document content from presentation, allowing the same content to be styled differently. CSS syntax uses selectors to target elements and declaration blocks with properties and values to style them. The "cascading" refers to how CSS prioritizes styles from different sources using a specificity scheme. Future developments include new selectors, blend modes, gradients, and using HTML elements as backgrounds.

1. CSS AND ITS FUTURE
Created by Alex Bondarev / @skip405

2. WHAT IS CSS?
CSS is is a style sheet language used for describing the look and
formatting of a document written in a markup language.

3. WHY WAS IT INTRODUCED?
CSS was invented to separate document content from
presentation. Such separation allowed to have one and the same
document styled differently.

4. CSS ZEN GARDEN

8. CSS SYNTAX
.my-block{
display: none;
margin: auto;
}
selector, declaration block, property, value

9. WHAT IS CSS AGAIN?
the reason it's called Cascading Style Sheets is that CSS
introduces a priority scheme. It is needed in situations when
styles for an element on the page come from different sources

10. SELECTOR SPECIFICITY
There's a scheme that allows to count selector specificity. It
consists of 4 numbers and looks like this:
0,0,1,0
In other words, the numbers represent the quantity of different
CSS selectors in one
style attribute (style="display: none;"), id
(#new), class (.element), element (p, span, div)
.my-block{
display: none;
margin: auto;
}
This selector contains only a single class-name, so it has
specificity of 0,0,1,0

11. PARTY TIME :)
A person who is the first to calculate the specificity of this
selector gets a Mishka na polyane
html body section.id#class
div.id + .id.id--header >
li.id a

12. AN !IMPORTANT NOTE
!important is the master rule that can be overwritten by a more
specific selector with !important

13. MINUSES THAT ARE BEING SEEN TO
No native variables.
No way to target the parent selector
No layout mechanism
No calculation. It's impossible to natively use something like
this: 100% - 2em + 30px
No native variables. Firefox is the first (and the only so far) to
have them
No way to target the parent selector
No layout mechanism (flexbox to the rescue but support is
catching up)
No calculation. It's impossible to natively use something like
this: 100% - 2em + 30px - calc function is supported from
IE9 and newer, and Android 4.4 and newer
Some things can be solved by preprocessors

14. CSS SHAPES
is one of the most significant CSS features that are going to be
implemented.

15. Soon it will be possible to do something like this in all browsers:

18. IT DOESN'T END HERE OF COURSE :)
There are lots of things to come in the future. Here's a list of the
most interesting CSS possibilities that are planned.
New selector possibilities: @namespace, :matches, :local-link(
3) etc.
Wider support of Blend modes
Conic gradients
Using an html element on the page as a background-image
with background: element(#src);

19. CSS IS COOL! THANKS FOR LISTENING