CSS basics

class: center, middle

.title[
Front-end training
# CSS basics
]

---

#CSS definitions
Cascading Style Sheets (CSS) are a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects like SVG or XHTML).
CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.
CSS is the only document styling language that browsers understand.

CSS has a standardized W3C specification.
- CSS1 is now obsolete,
- CSS2.1 is a recommendation,
- CSS3 is split into smaller modules, progressing on the standardization track.

The types of styles:
- a browser’s style
- an author’s style
- a user’s styles

---

# The basic syntax of CSS

Syntax:
``` css
h1 {
  color: #a6780a;
  font-weight: normal;
}
```
.center[
      <img src="assets/css-syntax.png" width="100%" >
]
---
# The basic syntax of CSS

Priority matters:
``` css
p { COLOR: green; }
p { color: RED; }
```

Comments in CSS-file:
``` css
 /*
  Style is designed for introductory purposes
 */

div {
  width: 200px; /* a width of the block */
}
```

---

# How to add styles to the page. External style

.columns[.col-60[
example-1.html:
``` html
<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Styles</title>
  <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
   <h1>Heading</h1>
   <p>Content</p>
 </body>
</html>
```
].col-40[
style.css:
``` css
h1 {
  color: #000080;
  font-size: 200%;
  text-align: center;
}
p {
  padding: 20px;
  background: yellow;
}
```
]]

.demo[
<a href="assets/example-1.html">example-1.html</a>
]

---

# How to add styles to the page. Global page styles

.columns[.col-70[
example-2.html:
``` html
<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Global styles</title>
  <style>
   h1 {
     font-size: 120%;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     color: #333366;
   }
  </style>
 </head>
 <body>
  <h1>Hello, world!</h1>
 </body>
</html>
````
].col-30[
 
.demo[
<a href="assets/example-2.html">example-2.html</a>
]
]]

---

# How to add styles to the page. Import of styles
.columns[.col-60[
example-3.html:
``` html
<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Styles</title>
  <style>
    @import "style-1.css";
    @import url("style-2.css");
  </style>
 </head>
 <body>
   <h1>Heading</h1>
   <p>Content</p>
 </body>
</html>
```
].col-40[
style-1.css:
``` css
h1 {
  color: #000080;
  font-size: 200%;
  text-align: center;
}
p {
  padding: 20px;
  background: yellow;
}
```
style-2.css:
``` css
body { background: #fc0; }
p { font-weight: bold; }
```
]]
<br>
.demo[
<a href="assets/example-3.html">example-3.html</a>
]

---

# How to add styles to the page. Tags inner styles

.columns[.col-70[
example-4.html:
``` html
<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Inner styles</title>
 </head>
 <body>
  <h1 style="font-size: 120%; color: #cd66cc">Hello, world!</h1>
</body>
</html>
````
].col-30[
 
.demo[
<a href="assets/example-4.html">example-4.html</a>
]
]]
---

# How to add styles to the page.

All described methods of using CSS can be used either alone or in combination with each other.

In the second case, is necessary to remember their hierarchy.
 - tag inner style - highest priority
 - global style, external style - lower priority

---

# Device types

| Value         | Description    | Status |
| ------------- |:-------------:|-------------:|
| all           | Used for all media type devices | Active |
| aural         | Used for speech and sound synthesizers        | **Deprecated** |
| braille       | Used for braille tactile feedback devices       | **Deprecated** |
| embossed      | Used for paged braille printers       | **Deprecated** |
| handheld      | Used for small or handheld devices      | **Deprecated** |
| print         | Used for printers       | Active |
| projection    | Used for projected presentations, like slides       | **Deprecated** |
| screen        | Used for computer screens, tablets, smart-phones etc.       | Active |
| speech        | Used for screenreaders that "read" the page out loud       | Active |
| tty           | Used for media using a fixed-pitch character grid, like teletypes and terminals       | **Deprecated** |
| tv            | Used for television-type devices       | **Deprecated** |

---

# Specify the type of media. @import

``` html
<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Style import</title>
  <style>
    @import "/style/main.css" screen; /* Style for output to monitor */
    @import "/style/print-and-speech.css" print, speech; /* Style Print and Screenreaders */
  </style>
 </head>
 <body>
  <p>...</p>
 </body>
</html>
```

---

# Specify the type of media. @media

``` html
<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Device types</title>
  <style>
   @media screen {
     /* Style for display in a browser */
     body {
       font-family: Arial, Verdana, sans-serif;
     }
   }

@media print {
     /* Style for printing */
     body {
       font-family: Times, 'Times New Roman', serif;
     }
   }
  </style>
 </head>
 <body>
  <p>...</p>
 </body>
</html>
```

---

# Specify the type of media. Attribute “media”
``` html
<html>
 <head>
  <meta charset="utf-8">
  <title>Devices</title>
  <link media="print, handheld" rel="stylesheet" href="print.css">
  <link media="screen" rel="stylesheet" href="main.css">
 </head>
 <body>
  <p>...</p>
 </body>
</html>
```

---

# Main types of style properties

.columns[.col-50[

Strings:
``` css
li:before {content: 'Hello'}
```

Numbers:
``` css
p {
  font-weight: 600; line-height: 1.2;
}
```

URLs:
``` css
a { background: url(warn.png) no-repeat }
```

Keywords
``` css
p { text-align: right; }
```

].col-50[

Color:
- By hexadecimal values: `#6609CF, #fc0`
- By name: `white, silver, gray, black, red, orange, ...`
- RGB:  `rgb(255, 0, 0)`
- RGBA: `rgba(0,255,0,0.3)`
- HSL:  `hsl(120,100%, 25%)`
- HSLA: `hsla(120,100%, 50%, 0.3)`

]]

---

# Dimensions.

## Relative units:
``` css
em /*Represents the calculated font-size of the element*/,
ex /*Represents the x-height of the element's font.*/,
rem /*Represents the font-size of the root element*/,
% /*Represents the calculated font-size of the element*/,
vw /*1% of the width of viewports initial containing block*/,
vh /*1% of the height of viewports initial containing block*/,
vmin /*Equal to the smaller of vw or vh*/,
vmax /*Equal to the larger of vw or vh*/
fr /*Fractional unit, used mostly with CSS Grid*/
```

## Absolute units:
``` css
px /*Relative to the viewing device, typically one device pixel (dot) of the display*/,
mm /*One millimeter*/,
q /*A quarter of a millimeter (1/40th of a centimeter)*/,
cm /*One centimeter (10 millimeters)*/,
in /*One inch (2.54 centimeters)*/,
pt /*One point (1/72nd of an inch)*/,
pc /*One pica (12 points)*/
```

[Read more](https://developer.mozilla.org/en-US/docs/Web/CSS/length)

---

# Selectors. Tags

``` css
<style>
p {
  text-align: right;
  color: green;
}
</style>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
```

.demo.demo-1[
<style>
.demo-1 p {
  text-align: right;
  color: green;
}
</style>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do </p>
]

---

# Selectors. Classes
``` html
<style>
   p {
     color: #009;
   }
   p.cite {
     margin-left: 20px;
     border-left: 1px solid red;
     padding-left: 15px;
   }
   .article {
     font-size: 11px;
   }
</style>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
<p class="cite">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
<p class="article">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
```
 
.demo.demo-2[
<style>
  .demo-2 p {
    font-size: 16px;
    color: #009;
    margin: 0 0 .7rem;
  }

.demo-2 p.cite {
    margin-left: 20px;
    border-left: 1px solid red;
    padding-left: 15px;
  }

.demo-2 .article {
    font-size: 11px;
  }
</style>

---

# Selectors. Identifiers

``` html
<style>
  #help {
    width: 520px;
    padding: 100px;
    background: #fc0;
  }
</style>

<div id="help">
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
```
 
.demo[
<style>
  #help {
    width: 520px;
    padding: 10px;
    background: #fc0;
  }
</style>

---

# Descendant Selectors

.columns[
.col-50[
``` css
  * { margin: 0; }

a {
    color: red;
  }
  div b {
    font-family: Times, serif;
  }

.main-nav {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .main-nav li {
    margin: 0 0 10px 0;
    padding: 3px;
    background: #fc0;
  }
  .main-nav a {
    color: #000;
  }
```

].col-50[

``` html
<p><b>Bold text</b>, normal text</p>

<div>Hello <b>another bold text</b></div>

<ul class="main-nav">
  <li><a href="#">Home page</a></li>
  <li><a href="#">About me</a></li>
  <li><a href="#">Contacts</a></li>
</ul>
```
 
.demo[
<a href="assets/example-5.html">example-5.html</a>
]]]

---

# Adjacent Sibling Selector (one next)

``` html
<style>
 b + i {
   color: red;
 }
</style>

<p>Lorem <b>ipsum </b> dolor sit amet, <i>"first i"</i> adipiscing <i>"second i"</i> elit.</p>
```
 
.demo.demo-3[
<style>
.demo.demo-3 b + i {
   color: red;
 }
</style>

<p>Lorem <b>ipsum </b> dolor sit amet, <i>"first i"</i> adipiscing <i>"second i"</i> elit.</p>
]

---
# General Sibling Selector (all next)

``` html
<style>
 b ~ i {
     color: red;
 }
</style>

<p>Lorem <b>ipsum </b> dolor sit amet, <i>"first i"</i> adipiscing <i>"second i"</i> elit.</p>
```
 
.demo.demo-4[
<style>
.demo.demo-4 b ~ i {
    color: red;
}
</style>

<p>Lorem <b>ipsum </b> dolor sit amet, <i>"first i"</i> adipiscing <i>"second i"</i> elit.</p>
]

---

# Child Selector

.columns[.col-60[
``` html
<style>
  h2 {
    color: green;
    margin-top: 0;
  }
  h1 + h2 {
    margin-top: 30px;
    color: blue;
  }
  p .name {
    outline: dotted #333 1px;
  }
  p > .name {
    color: red;
  }
</style>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h2>Heading 2</h2>
<h2>Heading 2</h2>
<p>
  Lorem <i class="name">ipsum</i> dolor <span>sit
 <i class="name">amet</i></span>
</p>
```
 
].col-40.demo.demo-4[
<style>
  .demo-4 h1 {
    font-family: Arial;
    color: #333;
  }
  .demo-4 h2 {
    margin-top: 0;
    font-family: Arial;
    color: green;
  }

.demo-4 h1 + h2 {
    margin-top: 30px;
    color: blue;
  }

.demo-4 p > .name {
    color: red;
  }

.demo-4 p .name {
    outline: dotted #333 1px;
  }
</style>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h2>Heading 2</h2>
<h2>Heading 2</h2>
<p>Lorem <i class="name">ipsum</i> dolor <span>sit <i class="name">amet</i></span></p>
]]

---

# Attributes selectors

``` html
<style>
[title] {
  color: maroon;
}
a[href] {
  background: green;
}
a[target="_blank"] {
  background: #ccc;
  padding-left: 15px;
}
</style>

<q title="Some title text">Lorem ipsum dolor sit amet, consectetur adipisicing elit</q>
<p><a href="#link">Посилання</a></p>
<p><a href="#link" target="_blank">Посилання відкриється в новому вікні</a></p>
```

.demo.demo-5[
<style>
.demo-5 [title] {
  color: maroon;
}
.demo-5 a[href] {
  background: darksalmon;
}
.demo-5 a[target="_blank"] {
  background: #ccc;
  padding-left: 15px;
}
</style>

---

# Advanced attributes selectors

.columns[.col-60[
``` css
/* Attribute value starts with some text */
a[href^="http://" ] {
  color: red;
}
/* If link ends with ".com" */
a[href$=".com"] {
  background: #fc0;
}
/* If link contains "google" */
[href*="google"] {
  background: yellow;
}
/* One of the several attribute values */
[title~="block"] {
  color: green;
}
```
].col-40.demo.demo-6[
      
<p><a style="color: red" href="http://gmail.com" target="_blank">External link to gmail.com</a></p>
<p><a style="background: #fc0;" href="http://www.yahoo.com">Yahoo.com</a></p>
<p><a style="background: yellow;" href="http://google.com.ua">Search the web</a></p>
<h3 title="block tag" style="color: green;">Heading</h3>
]]

``` html
<p><a href="http://gmail.com" target="_blank">External link to gmail.com</a></p>
<p><a href="http://www.yahoo.com">Yahoo.com</a></p>
<p><a href="http://google.com.ua">Search the web</a></p>
<h3 title="block tag">Heading</h3>
```

---

# Pseudoclasses

``` css
 a:link {
  color: #036; /* The color of not visited links */
 }
 a:hover {
  color: #f00; /* The color of links on mouse pointer hovering */
 }
 a:visited {
  color: #606; /* The color of visited links */
 }
 a:visited:hover {
  color: #303; /* The color of not visited links on hover */
 }
 a:active {
  color: #ff0; /* The color of active links */
 }
 b:first-child {
   color: red; /* The color of the first tag */
 }
 b:last-child {
   color: green; /* The color of the last tag */
 }
```

---

# Pseudoclasses. Demo
``` html
<p>
  <b>Lorem ipsum</b> dolor sit <a href="1.html">Link</a>
  amet, <b>consectetuer</b> adipiscing <b>elit</b>, sed diem nonummy
  nibh eut lacreet dolore magna <b>aliguam</b> erat volutpat.
</p>
```

.demo.demo-xx[
<style>
 .demo-xx a:link {
  color: #069;
 }
 .demo-xx a:hover {
  color: #f00;
 }
 .demo-xx a:visited {
  color: #606;
 }
 .demo-xx a:visited:hover {
  color: #303;
 }
 .demo-xx a:active {
  color: #ff0;
 }
 .demo-xx b:first-child  {
   color: red;
 }
 .demo-xx b:last-child {
   color: green;
 }
</style>

<p>
  <b>Lorem ipsum</b> dolor sit <a href="1.html">Link</a> amet, <b>consectetuer</b> adipiscing <b>elit</b>, sed diem nonummy nibh eut lacreet dolore magna <b>aliguam</b> erat volutpat.
</p>
]

[Read more](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes)

---

# Pseudoelements

.columns[.col-40[
``` css
<style>
 p:before {
   content: "";
   display: inline-block;
   width: 20px;
   height: 1em;
   margin-right: 10px;
   background: #f3c;
 }

p:after {
   content: " - a Rule";
   color: #666;
 }
</style>
```
].col-60[
``` html
<p>Search method of a lion by a simple sort.</p>
```
]]
<br><br>
.demo.demo-7[
<style>
 .demo-7 p:before {
   content: "";
   display: inline-block;
   width: 20px;
   height: 1em;
   margin-right: 10px;
   background: #f3c;
 }

.demo-7 p:after {
   content: " - a Rule";
   color: #666;
 }
</style>

<p>Search method of a lion by a simple sort.</p>
]

[Read more](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements)

---

# Grouping

``` css
h1, h2, h3 {
  font-family: Arial, Helvetica, sans-serif;
}
h1 {
  font-size: 160%;
  color: #003;
}
```

---

# Inheritance

.columns[.col-50[
``` css
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
  color: navy;
}

div {
  color: black;
}

div.red {
  color: red;
}
</style>
```
].col-50[
``` html
Hello
<div>Hello, i’m div!</div>
<div class="red">Hello, i’m red!</div>
```
]]
<br><br>
.demo.demo-8[
<style>
 .demo-8 {
   font-family: Arial, Helvetica, sans-serif;
   color: green;
 }

.demo-8 p {
   margin: 0;
 }

.demo-8 div {
   color: black;
 }

.demo-8 div.red {
   color: red;
 }
</style>

Hello<div>Hello, i’m div!</div>
<div class="red">Hello, i’m red!</div>
]

---

# CSS Variables

CSS Variables are entities defined by CSS authors which contain specific values to be reused throughout a document

They are set using custom property notation (e.g. --main-color: black;) and are accessed using the var() function (e.g. color: var(--main-color);)

``` css
:root {
  --spacing: 1.5em; // declaring a variable
  --base-colors: {  // declaring a mixin
    color: #fff;
    background-color: color(#fff shade(+80%)); // modifying a color
  }
}
 
.some-class {
  padding: var(--spacing);
  width: calc(100% - var(--spacing)); // dynamically calculating a value
  @apply --base-colors;
}

```
[Read more in spec](https://www.w3.org/TR/css-variables/)

[Read more in MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables)

---

# Cascading

Cascading refers simultaneous use of different style rules to document elements by connecting multiple style files, inheritance of properties and other methods.

The higher style rule is placed in this list, the lower its priority and vice versa:

1. Browser’s style
2. Author’s style
3. User’s style
4. The author's style adding `!Important`
5. The user’s style adding `!Important`

---

# Selector’s weight

For each identifier (hereinafter denote the number through a) there are 100 point, for each class and pseudoclass (b) there are 10 point for each tag selectors and pseudoselector (c) there is 1 point. Composing listed values in any particular order, we obtain the weight for the selector:
      <style>
        .selectors-w {
          max-width: 290px;
          margin: 0 auto;
        }
        .selectors-w UL {
        display: table;
        border-spacing: 10px;
        width: 80%;
        margin: 30px auto 0;
        padding: 0;
        border: 1px solid #DDD;
      }
        .selectors-w LI {
        display: table-cell;
        width: 25%;
        padding: 0 0 5px;
        /* border: 1px solid #DDD; */
        list-style: none;
        text-align: center;
      }
        .selectors-w SPAN {
        display: block;
        margin-bottom: 15px;
        box-shadow: inset 0 0 3px silver;
        font-size: 30px;
        line-height: 2;
        font-family: 'Offside', cursive;
        color: skyblue;
      }
</style>

<ul class="selectors-w">
    <li><span>0</span>style=""</li>
    <li><span>0</span>#id - a</li>
    <li><span>0</span>.class - b</li>
    <li><span>0</span>tag - c</li>
</ul>

.center[

| Selector         | Points    | Result |
| ------------- |:-------------:|-------------:|
| *             {} | a=0 b=0 c=0 |points = 0   |
|li             {} | a=0 b=0 c=1 |points = 1   |
|li:first-line  {} | a=0 b=0 c=2 |points = 2   |
|ul li          {} |  a=0 b=0 c=2 |points = 2   |
|ul ol+li       {} | a=0 b=0 c=3 |points = 3   |
|ul li.red      {} | a=0 b=1 c=2 |points = 12  |
|li.red.level   {} | a=0 b=2 c=1 |points = 21  |
|#t34           {} | a=1 b=0 c=0 |points = 100 |
|#content #wrap {} | a=2 b=0 c=0 |points = 200 |

]

---

# A list of some common CSS properties

.columns[.col-60[
``` css
background: #ccc;
border: #ccc solid 1px;
color: #ccc;
cursor: pointer;
display: block;
font: normal 14px/1.2 Arial, Helvetica, sans-serif;
font-family: Arial, Helvetica, sans-serif
font-size: 14px;
font-style: italic;
font-weight: bold;
line-height: 1.3;
text-align: left;
text-indent: -10px;
vertical-align: top;
```

].col-40[

``` css
visibility: hidden;
white-space: nowrap;
list-style: none;
outline: #fc0 dotted 1px;
margin: 10px 5px 20px 3px;
padding: 20px 10px;
width: 100%;
height: 400px;
max-height: 50px;
max-width: 100em;
min-height: 1em;
min-width: 50%;
opacity: 0.5;
overflow: hidden;

```
]]

[Full table(W3C)](https://www.w3.org/TR/CSS21/propidx.html)

[Full table with examples](https://pageresource.com/css-properties-list/)

---

# Useful links

- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS)
- [CSS Validation Service](http://jigsaw.w3.org/css-validator/)
- [CSS CURRENT STATUS by W3C](https://www.w3.org/standards/techs/css#)
- [Can I use - Browser's support checker](https://caniuse.com/)
- [CSS Weekly Newsletter](http://css-weekly.com/)
- [Specificity Calculator](https://specificity.keegan.st/)