(Part 2)Some Basics of CSS that you should have a look at.
Tags: css, webdev, beginners, programming
Published: 2022-02-11 14:11:54

_In this post, I will be summarising some basics of CSS, which, you need to know if you are diving into Front-end development._

This part will be covering:

- The CSS Box Model
- Media Queries
- CSS Animations and Keyframes

###The Box Model
For CSS, every HTML element is a box.CSS determines the size, position, and properties (color, background, border size, etc.) of these boxes.

It can be best understood with the following image.

![Box Model Description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a4ofbvbt749kt2cuwvku.png)
Every box is composed of four parts (or areas), defined by their respective edges: the content edge, padding edge, border edge, and margin edge.
 
- Padding - Clears an area around the content. The padding is transparent.
- Margin - Clears an area outside the border. The margin is also transparent.

####Positioning
- **Block Elements** - those which usually start from a new line. Example: headings, paragraphs, divs, etc.
- **Inline Elements** - are those which sits with the surrounding element. For example: images, spans etc.

**The default layout of elements as per their type as listed above is called the _Normal Flow of a document_**
We have `position` property of CSS to override the Normal flow.
This pairs with the CSS offset properties (left,right,top,bottom) to set how many pixels(or any other unit) away the element has to be positioned from where it is in the Normal Flow.
It accepts the following values.
- `position:relative`
- `position:absolute`
- `position:fixed`

[Read More about positioning.](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning)

####Border
The following properties is used for providing border to an element.
- `border-weight` - The thickness of border
- `border-style`  - solid, dotted, double, grove etc.
- `border-color`  - Provide the colour, or the default color black is applied.
And you can use `border` shorthand property to set all above values directly as shown below.

```css
.class{
    width:100px;
    height:100px;
    border:10px solid #FA1298;
}
```
####Tip
Set `box-sizing` to `border-box`, this makes styling easier.
>[Quoting from MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing)
`border-box` tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements. 

###Media Queries 
They help you make your site responsive to different screen size.
The @media can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.
>(Think it like an if-statement, where the conditions are based on viewport sizes.)

Example:
```css
@media screen and (min-width: 900px) {
  div {
    width:100px;
  }
}
```

[More Details Here.](https://developer.mozilla.org/en-US/docs/Web/CSS/@media)

###CSS Animations and Keyframes
In order to animate an element, you need to add the [Animation](https://developer.mozilla.org/en-US/docs/Web/CSS/animation) properties in its styling.
The actual appearance of the animation is defined by the @[keyframe](https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes) rule.

- `animation-name` gives the name of the keyframe rule.
`animation-iteraton-count` - use `infinite` for endless animation.
- `animation-timing-function` 
This can be `linear`, `ease`, `cubic-bezier()` etc.
[Read More about all possible values here.](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function)

Example:

{% codepen https://codepen.io/prakhar_t193/pen/JjOJRLw %}

###Want to connect?

[Connect with me here.](https://linktr.ee/prakhartandon)