0. CSS - Fundamentals
Tags: css, javascript
Published: 2022-05-24 04:37:39

In this series, I just noted these things about css which I have learnt CSS from scratch. I hope this series can help everyone remind knowledge about CSS.

## Media queries

I can be understand as a condition for doing something.

```javascript
if(condition) {
 // doing some thing here
}
```

```css
@media (condition) {
  // Doing something here
}
```

In the css we have two generalized condition into the media query. They are 'max-width' and 'min-width' conditions.

> max-width represent for these screens have width between 0 to max-width value

```css
@media (max-width: 300px) {
  // the css code here only for these devices 
  // has width between from 0 to 300px.
}
```

> min-width represent for these screens have width bigger than the value of min-width

```css
@media (min-width: 300px) {
  // the css code here only for these devices
  // has width bigger than 300px
}
```

## Selectors

It means specify what element will be applied the css styling.

```css
/* All a elements will be applied*/

a {
  color: pink;
  text-decoration: none;
}

/* All a elements into article element will be applied*/

article a {
  color: pink;
  text-decoration: none;
}

/* Only a elements has li parent will be applied */
li > a {
  color: pink;
  text-decoration: none;
}
```
### Pseudo-classes

Pseudo-classes used for external styles like history of the navigator `:visited`, status of its content `:checked`, or position of the mouse `:hover`

```css
button:hover {
  color: blue;
}
```

You can also learn more [here](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes)

### Pseudo-elements

Pseudo-elements are like pseudo-classes, but they don't target a specific state. Instead, they target "sub-elements" within an element.

We need to use `::` syntax instead `:` as in pseudo-classes

Some common Pseudo-elements


```css
// setting color for pseudo-elements placeholder
input::placeholder {
  color: red;
}

// Adding a pseudo-element before p tag and style it
p::before {
  content: '>>';
  color: blue;
}

// Adding a pseudo-element after p tag and style it
p::after {
  content: '<<';
  color: blue;
}
```

## Colors

CSS includes many different way to represent color.

- Using color name
```css
p {
  color: red;
}
```
- Using hex code
```css
strong {
  color: #ff0000
}
```
- Using hsl
```css
// this is opacity is 1
.box {
  background-color: hsl(0deg, 100%, 50%);
}

// Setting opacity is 0.75
// using the '/' as separation for the opacity style
.box {
  background-color: hsl(0deg, 100%, 50% / 0.75);
}
```

## Units

There are 3 units which used for changing size-related of these elements. They are `px`, `em`, `rem`

The `px` unit is a common unit. It use for set size directly on each element.

```css
// setting width and height are 30px. It is fixed unit on the .box elements.
.box {
  width: 30px;
  height: 30px;
}
```

The `em` unit is a relative unit, equal to the font size of the current element.

```css
// padding bottom is equal font-size*2, you can change font-size to view the changing of unit em.
p {
  font-size: 18px;
  border: 1px solid black;
  padding-bottom: 2em; // The real pixel is 2*18 = 36px;
}
```

The `rem` unit is quite a lot like the em unit, with one crucial difference: it's always relative to the root element, the <html> tag.

```css
html {
  font-size: 16px;
}

h1 {
  font-size: 2rem; // equal  2*16
  margin: 0;
}

h2 {
  font-size: 1.25rem; // equal 1.25 * 16
  margin-bottom: 1.5rem; // equal 1.5 * 16
  color: gray;
}

p {
  font-size: 1rem; // equal 1 * 16
}
```

## Typography

We use `font-family` to change the font.

Font families come in different styles. 

- The 3 most popular:
  - Serif
  - Sans-serif
  - Monospace

**Sans-serif vs Serif**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wrbs03ihz2030mdgntkw.jpg)

```css
// try to use sans-serif or monospace to see what will happen?

p {
  font-family: serif;
}
```

**Text Formating**

3 common formatting `bold`, `italic` and `underline`

Bold Text

```css
/* Light, thin text*/
font-weight: 300;

/* Normal text */
font-weight: 400;

/* Heavy, bold text */
font-weight: 700;
```

Italic Text

```css
font-style: italic;
```

Underline Text

```css
/* remove underlines from anchor tags: */
a {
  text-decoration: none;
}
```

**Alignment**

We can shift characters horizontally using the text-align property

```css
div.left {
  text-align: left;
}

div.right {
  text-align: right;
}

div.center {
  text-align: center;
}
```

**Text Transforms**

```css
/* RENDER WITH ALL CAPS */
text-transform: uppercase;

/* Capitalize The First Letter Of Every Word */
text-transform: capitalize;
```

**Text Spacing**

- Gap between characters using the `letter-spacing` property.
- Distance between lines using the `line-height` property.

```css
h2 {
  letter-spacing: 3px;
  line-height: 2;
}
```

Thank you for reading.
Happy coding!!!