# CSS3 Workshop

---

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

---

# what is the css ?

---

# 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

---
# 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

---

## 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

## Tablet

## Mobile

Good Luck