CSS

name: portada
layout: true
class: portada-slide, middle, right
---
# CSS
## Markup languages

.footnote[Joan Puigcerver Ibáñez ([j.puigcerveribanez@edu.gva.es](mailto:j.puigcerveribanez@edu.gva.es))]

---
layout: true
class: regular-slide
.right[.logo[![logoMislata](/itb/images/logo_mislata.png)]]

---
# CSS
__Cascade Style Sheets (CSS)__  is a language that specifies the HTML style.

- Browsers provide a default stylesheet for each HTML element.
  - Example: `<em>` is _italic_ by defalt

- .red[__IMPORTANT:__] When a style is set in a element, all its children 
  will inherit the style.

---
# Resources
- https://developer.mozilla.org/en-US/docs/Web/CSS
- https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
- https://www.w3schools.com/css/

---
# HTML Example: Film
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Life of Brian</title>
</head>
<body>
  <h1>Monty Python's Life of Brian</h1>
  <img src="https://upload.wikimedia.org/wikipedia/en/1/18/Lifeofbrianfilmposter.jpg" alt="Life of brian poster">
  <h2>Release date:</h2>
  <p>17 Agoust 1979</p>
  <h2>Argument</h2>
  <p>Born on the original Christmas in the stable next door to Jesus Christ, 
  Brian of Nazareth spends his life being mistaken for a messiah.</p>
  <h2>Actors</h2>
  <ul>
    <li>Graham Chapman</li>
    <li>John Cleese</li>
    <li>Terry Gilliam</li>
    <li>Eric Idle</li>
  </ul>
  <h2>Urls</h2>
  <a href="https://www.imdb.com/title/tt0079470/">IMDB</a>
</body>
</html>
```

---
# CSS Example
We want the main heading to be centered and 2nd headings to be blue.
- File: __/stylesheets/site.css__

```
h1 {
  text-align: center;
}

h2 {
  color: blue;
}
```
We need to include the stylesheet in the `<head>` in the HTML document

```html
<head>
  ...
  <link rel="stylesheet" href="css/site.css">
</head>
```

---
# CSS Structure
- __Selector:__ Selects the elements that the rule will be applied.
- __Property:__ CSS property to be set (color, position, size, ...)
- __Value:__ Value of the property.

```
selector {
  property: value;
  property: value;
  ...
}

selector {
  property: value;
}

...
```

---
# Comments
Comments can be written using `/* */` syntax.

```css
/* This is a comment */
```

---
# Selectors: Elements
.center[[W3Schools CSS Basic Selectors](https://www.w3schools.com/css/css_selectors.asp)]
.center[[W3Schools CSS Selectors Reference](https://www.w3schools.com/cssref/css_selectors.asp)]

All elements with a specific tag can be selected using the tag name:

- __Example:__ Select all the `<li>` elements:

```
li {
  color: green;
}
```

---
# Selectors: ID

A element with a specific __id__ can be selected with `#id`.

```html
<p id="release_date">17 Agoust 1979</p>
```

```css
#release_date {
  color: red;
}
```

---
# Selectors: Class

Elements with a specific class can be selected with `.classname`.

An element can have multiple classes and a class can be set on multiple elements.

```html
<ul>
    <li class="main_character">Eric Idle</li>
    <li class="main_character">Graham Chapman</li>
    <li>John Cleese</li>
    <li>Terry Gilliam</li>
</ul>
```

```css
.main_character {
  color: blue;
}
```

---
# Composed selectors: OR

Multiple selector can be specified in a single rule using a `,` between them.

```
selector, selector {
  property: value;
}

/* Selects all H1 and H2 */
h1, h2 {
  color: blue;
}

/* Selects all elements with "release_date" or "published_date" */
.release_date, .published_date {
  color: red;
}
```

---
# Composed selectors: AND

Elements that match selectors can be specified in a single rule using a `.` between them.

```
selector.selector {
  property: value;
}

/* Selects all div elements with "exercises" class */
div.exercises {
  color: green;
}

/* Selects all elements with "main_character" and "child" classes */
.main_character.child {
  text-weight: bold;
}
```

---
# Composed selectors: Descendant

The descendant selector matches all elements that are descendants of a specified element.
They are separated with an space.

```
selector selector {
  property: value;
}

/* Selects all <p> elements inside <div> elements */
div p {
  color: yellow;
}

/* Selects all <p> elements inside elements with "description" class */
.description p {
  color: purple;
}
```

---
# Composed selectors: Child

The descendant selector matches all elements that are children of a specified element.
This is specified with a `>`.

```html
<div id="parent">
  <p>This is a child of "#parent" element</p>
  <ul>
    <li><p>This is NOT a child of "#parent" element</p></li>
  </ul>
</div>
```

```
selector > selector {
  property: value;
}

/* Selects all <p> elements that are children of <div> elements */
div > p {
  color: yellow;
}

/* Selects all <p> elements that are children of elements with "description" class */
.description > p {
  color: purple;
}
```

---
# Some Text Properties
.center[[W3Schools CSS Fonts](https://www.w3schools.com/css/css_font.asp)]
.center[[W3Schools CSS Text](https://www.w3schools.com/css/css_text.asp)]
- font-family: Font of the text
  - font-family: Helvetica
- font-size: Size of the font
  - 12px: Pixels
  - 2em: Relative to current size (double size)
- font-style
  - normal | italic | oblique
- font-weight
  - normal | bold | lighter | bolder | 1...1000
- text-align
  - left | right | center | justify

---
# Colors
`color`: Sets the color of the text
- Possible values:
    - Color name: [List of colors](https://www.w3schools.com/cssref/css_colors.asp)
    - [Hexadecimal or RGB value](https://www.w3schools.com/colors/colors_picker.asp)
        - \#d6db7f
        - rgb(214, 219, 127)
    - RGBA Value (with alpha, transparency)
        - rgba(214, 219, 127, 0.5)

---
# List style
- list-style-type
  - circle | square | upper-roman | lower-alpha | none

Example:
<ul>
  <li class="remove-before" style="list-style-type: circle">circle</li>
  <li class="remove-before" style="list-style-type: square">square</li>
  <li class="remove-before" style="list-style-type: upper-roman">upper-roman</li>
  <li class="remove-before" style="list-style-type: lower-alpha">lower-alpha</li>
  <li class="remove-before" style="list-style-type: none">none</li>
</ul>

---
class: background-dark
# Film Exercise
Update the Film exercise. Include a CSS so it looks like this. You can modify the original html and include ids and classes.

- [Film Exercise](exercicis/02_css_exercises.html#film)

---
# Box properties
![box properties](img/box_model.png)

---
# Box properties
```html
<p id="box-sample">
box
</p>
```

```
#box-sample{
  margin: 20px;
  padding: 50px;
  border: solid black 20px;
  height: 50px;
  width: 300px;
  background-color: cyan;
}
```

---
# Box properties: height/width
Defines the height and width of the element.

Values:
- __Pixels__
    - 40px
- __Percentage %__ (of the parent element)
    - 50%
- __em__ (font size)
    - 40em

The attributes __min-width, max-width, min-height, max-height__ define the min/max
element size.

---
# Box properties: padding
Distance from the element content to the border.

```
/* Every direction */
padding: 1em;
```

```
/* top | right | bottom | left */
padding: 5px 1em 0 1em;
```

```
padding-top: 5px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 5em;
```

---
# Box properties: border
Size and properties of the border.

.center[[W3Schools border properties and styles](https://www.w3schools.com/css/css_border.asp)]

```
/* width | style | color */
border: 2px solid green;
```

```
/* top | right | bottom | left */
border-width: 1px 2em 0 4rem;

/* top | right | bottom | left */
border-style: none solid dotted dashed;

/* top | right | bottom | left */
border-color: red yellow green blue;
```

---
# Box properties: border radius
Radius of the border's corner.

```
border-radius: 20px;
```

```
/* top left, top right, bottom right, bottom left */
border-radius: 20px 10px 50px 0;
```

---
# Box properties: Margin
Distance from the element's border to anything else.

```
margin: 1em;
```

```
/* top | right | bottom | left */
margin: 5px 1em 0 1em;
```

```
margin-top: 5px;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 5em;
```

### Center element horitzontally

```
margin-left: auto;
margin-right: auto;
```

---
class: background-dark
# Box Properties Exercise
Add CSS to the following CSS so it looks like the schreenshot:

- [Box Properties Exercise](exercicis/02_css_exercises.html#boxproperties)

---
# Background

```
background-color : gold;
background-size: 140px;
background-position: center;
background-image: url('https://www.mozilla.org/media/protocol/img/logos/firefox/browser/logo.eb1324e44442.svg');
background-repeat: no-repeat;
```

---
# Document flow: Normal Flow
It is the default behaviour on how the browser places de HTML elements.

This default behaviour can be changed with the following CSS properties:
  - display
  - position
  - float

.center[[Mozilla Normal Flow](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow)]

---
# Display
The display property specifies the display behavior (the type of rendering box) of an element.

.center[[W3Schools display](https://www.w3schools.com/cssref/pr_class_display.asp)]

| Value | Description |
| :- | :- |
| inline | Displays an elements as an inline element (like `<span>`). It starts next to the previous element and occupies any width needed. Any height and width properties will have no effect |
| block | Displays an elements as a block element (like `<p>`). It starts on a new line, and takes up the whole width |
| inline-block | Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values |
| flex | Displays an element as a block-level flex container |
| grid | Displays an element as a block-level grid container |

---
# Display Example

```html
<p>This is a block element</p>
<p>This other block element renders below </p>
<p>Inline elements, like <span>this one</span> render in the same line </p>
```

---
# Float
- Allows elements to float (right or left) in the document flow, instead tha ton top of each other.

---
# Float Example

```html
<p style="background-color: red">Box1</p>
<p style="background-color: green">Box2</p>
<p style="background-color: gold; float: left">Box3</p>
<p style="background-color: blue">Box4</p>
```
```css
p {
  float: right; 
  width: 100px;
  height: 100px;
}
```

.example2[
<p style="background-color: red">Box1</p>
<p style="background-color: green">Box2</p>
<p style="background-color: gold; float: left">Box3</p>
<p style="background-color: blue">Box4</p>
]

---
class: background-dark
# Float Exercise

- [Float Exercise](exercicis/02_css_exercises.html)

---
# Flexbox
- Flexible Box is a display type that allows positioning elements in a more flexible way.
- Read:
    - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
    - https://www.w3schools.com/css/css3_flexbox.asp

---
# Flexbox Example

.columns[
```html
<div>
  <p style="background-color: red">Box1</p>
  <p style="background-color: green">Box2</p>
  <p style="background-color: gold;">Box3</p>
  <p style="background-color: blue">Box4</p>
</div>
```
```css
div {
  display: flex;
  justify-content: space-between;
}
p {
  float: right;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
```
]
<div class="example3">
  <p style="background-color: red">Box1</p>
  <p style="background-color: green">Box2</p>
  <p style="background-color: gold;">Box3</p>
  <p style="background-color: blue">Box4</p>
</div>

---
class: background-dark
# Flexbox Exercise

- [Flexbox Exercise](exercicis/02_css_exercises.html)

---
# CSS Media Queries
- Media Queries allow specifing different rules for different types of devices, so the website is __responsive__.

.center[[W3Schools Media Queries](https://www.w3schools.com/css/css_rwd_mediaqueries.asp)]

We must specify that our page is responsive in the `<head>` of the HTML
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
.center[[W3Schools Viewport](https://www.w3schools.com/css/css_rwd_viewport.asp)]

---
# Typical Device Breakpoints
```
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}
```

---
class: background-dark
# MediaQueries Exercise

- [MediaQueries Exercise](exercicis/02_css_exercises.html)