---
# System prepended metadata

title: CSS3 Workshop

---

# CSS3 Workshop 
![](https://i.imgur.com/lKlC9vo.png)

--- 

slide: https://hackmd.io/p/tRxsvSNzRLaH6mPq4G4lrQ?both

---

# what is the css ?

---
![](https://i.imgur.com/enHVgH4.jpg)

# Link CSS 
1- Write css in HTML file.
2- Write css in html tag 'inline style'.
3- Link css file in html header
> <link href="/style.css" rel="stylesheet">
> 
---

# CSS style for tag
```
p {
  color: red;
}
```
or 
```
p, li, h1 {
  color: red;
}
```
---
## We also use:

- width (of an element).
- background-color, the color behind an element's content and padding.
- color, the color of an element's content (usually text).
- text-shadow sets a drop shadow on the text inside an element.
- display sets the display mode of an element. (keep reading to learn more)

---

# Padding and Margin
![](https://i.imgur.com/G7AencD.png)

---
# Display 
```
div {
    display: block;
    display: inline-block;
    display: inline;
    display: none;
    display:flex;
    display:grid;
}
```
---
## CSS Units
- px - Pixels.
- em - A unit of measurement, where 1 em = current font size.
- rem - Root em. Same measurement as em, but makes life much easier without the inheritance problem
- % - Percentages.
- auto - highly useful unit, will explain below.

[Resource](https://docs.elementor.com/article/595-difference-between-px-em-rem-percentage-vw-vh)

---
## Best used Proparity
 ```
    max-width: 100%;
    margin: 0 auto;
    border: 1px solid black;
    floot:left;
    clear:left;
    Color:red;
     background-color: lightblue;
    background-image:url('');
    background-repeat: repeat-x;
    background:transparent image-url('image.png') left top no-repeat;
    font: italic small-caps bold 20px/1.5 "Proxima Nova", helvetica, arial, sans-serif;
    
```
[resorce](https://zellwk.com/blog/9-important-css-properties-you-must-know/)

---

# CSS ID  '#'
```
<div class="intro">
  <p id="firstname">My name is Donald.</p>
  <p id="hometown">I live in Duckburg.</p>
</div>
```
**CSS Code**
```
#firstname {
  background-color: yellow;
}
```
---

# CSS Class '.'

```
<div class="intro">
  <p>My name is Donald.</p>
  <p>I live in Duckburg.</p>
</div>
```

**Css Code**

```
.intro {
  background-color: yellow;
}
```

---
## Assignment and Homework

Create Google Search page
![](https://i.imgur.com/Lk0KPOB.png)




---

## Project 1
this week you have to create landing page as it bellow for disktop screens only.

### Considerations : 
- navbar should use ul tag for every elemnt
- you should use flexbox in project
- you can use lorem epsom to genarate any text

1- resorces :+1: 
- [lorem website](https://www.lipsum.com/)
- [flexbox tutorial](https://www.w3schools.com/css/css3_flexbox.asp)

## Disktop
![](https://i.imgur.com/DqWh6dv.png)


## Tablet
![](https://i.imgur.com/AeUASVE.png)


## Mobile
![](https://i.imgur.com/ckeFRWI.png)

Good Luck

