# CSS Tricks

As time goes by, CSS is becoming more and more powerful and nowadays it offers lots of possibilities to create visually stunning websites.

`This one’s for the absolute beginners. Once you’ve learned how the box model works, and how to float those boxes, it’s time to get serious about your CSS. To that end, we’ve compiled a massive list of tips, tricks, techniques, and the occasional dirty hack to help you build the design you want.`

CSS can get tricky, and you should too. So let's get started 


## Vertically Align With Flexbox

Centering a text or element vertically has always been quite a pain for many front-end developers. The `display: flex property/value` provides an easy way to vertically align any element.

Consider the following HTML:

```
<div class="align-vertically">
       vertically centered!
</div>

``` 
And the related CSS:
```
.align-vertically {
 
  display: flex;
  align-items: center;
  height: 100px;

}
```
`display: flex`  specifies a Flexbox layout for the element, and align-items: center takes care of the vertical centering.

## * + selector

The * enables you to select all elements of a particular selector. For example, if you used   *p and then added CSS styles to that, it would do it to all elements in your document with a `<p>` tag. This makes it easy to target parts of your website globally.

## CSS Variables

A strong point of CSS preprocessors is the possibility of using variables to create re-usable values and avoid code redundancy.

Consider the CSS below:

```
:root {
  --main-color: coral;
  --txt-color: #fff; 
  --main-padding: 15px; 
}

#div1 {
  background-color: var(--main-color);
  color: var(--txt-color);
  padding: var(--main-padding);
}
``` 
Variables are declared by giving them a name `preceded by two dashes`. In this example, the main color, main background color, and base padding are declared.

## Overriding all styles

This should be used sparingly, because if you do this for everything, you’re going to find yourself in trouble in the long run. However, if you want to override another CSS style for a specific element, use !important after the style in your css. For example, if I wanted the H2 headers in a specific section of my site to be red instead of blue, I would use the following CSS:

```
.section h2 { color:red !important; }

```
## box-sizing: border-box
This is a favorite among many web designers, because it solves the problem of padding and layout issues. Basically, when you set a box to a specific width, and add padding to it, the padding adds to the size of the box. However, with box-sizing:border-box;, this is negated, and boxes stay the size they are meant to be.

I have tried to cover all important tricks above.
Thanks. Happy Coding !!😄