Some CSS theories and declarations I didn't knew before
Published: 2022-01-05 11:35:22

Hello folks! 
A very happy new year to all of you! 🎉🎉 
I hope you’re all doing great!
![enjoy](https://media.giphy.com/media/IwAZ6dvvvaTtdI8SD5/giphy.gif)
I am Saksham and today I am writing a blog about some CSS declarations, theories and keywords that I was unaware of.
(These are some minor concepts which are independent of each other)

I hope you might learn something new after reading this blog too.

### Lets begin with our part ONE

![start](https://media.giphy.com/media/gGldiUgAUOJ04g1Ves/giphy.gif)

Most of us have faced a common problem of our content getting overflowed inside a box and we start to adjust the width/height of that content to adjust it and if the webapp is responsive, sometimes we tend to adjust the height and width of the box at every point which seems a bit weird.... and actually it is.

Now here CSS comes with a concept of **intrinsic** and **extrinsic sizing**.

When we **define height and width of a container**, it is called **extrinsic sizing** and this is the one that makes the content go out of the box
![go out](https://media.giphy.com/media/AFX2Z6A6rSRG14gXWm/giphy.gif)

But **intrinsic sizing allows you to wrap the box around the text.**

#### This can be done in two ways:

- Unsetting the height and width of the container

- Using **min-content** and **max-content** as values of height and width

### Hmmm… What are those??

![think](https://media.giphy.com/media/PoImGf3Takz1BtpNSG/giphy-downsized.gif)

When value of width is set to <u>min-content</u>, the content and box is set to the <u>minimum width</u> it can acquire which is the <u>width of the largest word in the content.</u>

And for **max-content**, the width is set to the **max width it can go or till the sentence ends.**

### HTML:
```html
<div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna luctus,euismod diam eu, pulvinar neque.
  </p>
</div>
```

### CSS:
```CSS
div {
  padding: 15px;
  width: max-content;
  height: max-content;
  border: 2px solid black;
  text-align: justify;
}

p {
  font-size: 18px;
}
```
![Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x84yhakts8zqxtblq8xu.png)
 

### when height and width are constants

### CSS:
```CSS
div {
  padding: 15px;
  width: 100px;
  height: 100px;
  border: 2px solid black;
}

p {
  font-size: 18px;
}
```
![yay](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lyo2o65iynbmug2zveqr.png)
 
Okay! I hope this was something new for you.

So, I guess we all are familiar with the CSS box model, But do you know what each of them actually includes inside them?

![choose](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n49jlnunk12d62sorfhg.png) 

Lets see!

**Content box:** it includes the main visible content.

**Padding box:** It surrounds the content box and includes the padding of the box, when overflow is set to scroll, <u>the scroll bars are also included here.</u> 

**border box:** Surrounding the padding box, border box includes the borders and <u>properties like border radius.</u>

**Margin box:** It surrounds the border box and <u>includes the outlines and box-shadows.</u>

The default behaviour of a box is content box, that can be changed using `box-sizing` property.

Including here means that these properties wont take extra space instead the will take the space from their respective boxes
![image](https://media.giphy.com/media/kaCGwUDpLm03HoinDv/giphy.gif)

When it comes to CSS, without selectors we cannot do anything. Yes, we all use classes, ids, complex selectors like combinators, pseudo-classes, pseudo-elements.

But have you ever tried going a bit specific in selecting a tag? 

Let's try that.
if you want to select an element that contains a specific class and that class is acquired by some other elements too, we can select that element by doing this:
### CSS:
```CSS
tag-name.class-name{
  /* Your code */
}
```

Let's look at an example:

### HTML:
```HTML
<div class="class1">this is div1</div>
<div class="class2">this is div2</div>
<div class="class1">this is div3</div>
<p class="class2">This is a paragraph1</p>
<p class="class1">This is paragraph2</p>
```

### CSS:
```CSS
.class2 {
  display: inline-block;
  padding: 10px;
}

p.class1{
  display: block;
}

div.class2 {
  height:50px;
  background: #f0f8;
}

p.class2{
  background: #f00a;
}
```
**Output**

![output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rc6tsyuk2kcw2xwt844f.png) 

 
Here as we can see that `class2` was taken by two of our elements  and `class1` by three and to style a specific element we used the above selector type.

Let's be a little **specific.** Because you know, balancing is an art. More the selector is specific, more the job is hard. Less the score, more vulnerable it becomes. How?
![sppecific](https://media.giphy.com/media/1YGXw8iYAqwZLi3Amn/giphy.gif)

Well let's say I want to select `<span>` which is right after `<p>` with class para1 under `<div>` of class div1 so I will write it like this:
`div.div1 p.para1+span`
This will be so specific that if you want any other **span** to have the same property, it wont work.

Similar is the case for being less specific, if we do this, then all the elements that we don't want to get targeted will get updated. 

Now, we all use pseudo-classes and elements, (yes, both are different)

A pseudo-class is represented by `:` single colon and a pseudo-element is represented by `::` double colon.

And I found two of the pseudo-classes really interesting that were new to me.
`:not` and `:empty`

We all know the `!` NOT operator in JavaScript right?
this `:not` works the same in CSS. This pseudo-class selects all the other tag which doesn't include the mentioned selector.

Let's take a look at the example code:
### HTML:
```HTML
<div class="class1">this is div1</div>
<div class="class2">this is div2</div>
<div class="class1">this is div3</div>
<p class="class2">This is a paragraph1</p>
<p class="class1">This is paragraph2</a>
```
### CSS:
```CSS
:not(html, body, .class1) {
  background: steelblue;
  color: white;
  width: 200px;
  font: 20px "calibri";
  padding: 10px;
}
```
![output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yuh58mfcw6gin5xx2xel.png)

You must be wondering why I added html and body tag in `:not()`, as I explained that `:not` selects everything other than the mentioned, so if I had just added `class1` then everything would have become red and it would be difficult to understand its working.
Let's take another example:

### CSS:
```CSS
:not(.class1) {
  background: steelblue;
  color: white;
  width: 200px;
  font: 20px "calibri";
  padding: 10px;
}
```
This is the result for the above code:
![output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tipxt91o1l9gkz26mxe9.png)
 

Now let's talk about `:empty`. 
`:empty` is the pseudo-class used for elements with empty children. These children can be elements or text nodes. 

### HTML:
```HTML
<div>
  <p>This is a paragraph inside div1</p>
</div>
<div>
  Div with some text.
</div>
<div></div>
```

### CSS:
```CSS
div:empty {
  height: 10px;
  background: orangered;
  color: white;
}
```
Output:

![outptu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qco0ksz74tga4a053hpl.png)

As we can see that the div with nothing inside was triggered.

Similar to that there is a property for tables which hides the table cells which are empty.
`empty-cells`

### HTML:
```HTML
<table>
  <tr>
    <th>Head1</th>
    <th>Head2</th>
    <th>Head3</th>
    <tr>
      <td>desc1</td>
      <td></td>
      <td>desc3</td>
     </tr>
     <tr>
        <td>desc4</td>
        <td>desc5</td>
        <td></td>
      </tr>
        <tr>
          <td></td>
          <td>desc8</td>
          <td>desc9</td>
    </tr>
  </tr>
</table>
```
### CSS:
```CSS
th,td,tr {
  border: 2px solid black;
  padding: 10px 15px;
}

table {
  empty-cells:hide;
}
```
![outptu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1uentl4r1ohcv2d8wxug.png)
 
Isn't this so cool!!
![image](https://media.giphy.com/media/xT0xeJpnrWC4XWblEk/giphy-downsized-large.gif)


So, moving on, Have you ever seen something like this?
### CSS:
```CSS
div{
background: steelblue;
background: lightblue;
}
```
We all know the result will be the later one, CSS respects the order of declarations.
But do you know there is a reason for doing this too.

Sometimes different browsers are unable to process a particular property and CSS is a language that never breaks if something is not acceptable, instead, it ignores that to keep things working.

So, when a browser doesn't understand one value it will switch to the other property value. 
![image](https://media.giphy.com/media/BSUmKgZar1biBjTzvo/giphy.gif)

Now, we all know the order of declarations but do we know about the importance of origins in CSS?

It really matters if there exists any other style sheet other than our own.

Following are the styles in the order of least important to the most important.

- **User agent base styles:** This is what browser applies by default
- **Local user styles:** An operating system level style such as base font or preferred custom CSS by extensions.
- **Authored CSS:** The CSS that we create.
- **Authored !important:** Same as authored CSS but with `!important` keyword
- **Local user styles !important:** Same as local user styles but with `!important` keyword
- **User agent !important:** Same as user agent but with `!important` keyword

Also this order applies on the properties:
This is the order from least important to the most important:
- Basic rule types: font size background color
- Animation
- `!important`
- Transition

Animation and transitions may have low importance but when the go active they run the highest importance.

#### Okay guys so the final topic of this blog (Thankyou so much for your time, if you made it this far)

Finally comes the concept of **inheritance** , which I always thought is not needed much but actually is really important to know.

Inheritance, as the word defines itself, is a concept were the child elements inherits the properties of their parent element.

[List of elements which allows inheritance.](https://web.dev/learn/css/inheritance/#which-properties-are-inheritable
)

Not all elements allows inheritance by default. Some of them needs to be done explicitly which is also known as explicit inheritance.

The keyword used for inheriting explicitly is **inherit** which is best for some exceptions like `<strong>`

### HTML:
```HTML
<div>
  Hello world in div.
  <p><strong>Hello world in paragraph.</strong></p>
</div>
```

### CSS:
```CSS
div {
  font-weight: 100;
  font-family: calibri;
  font-size: 30px;
}
```
![output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ate40td5uyq1m63k9pj.png) 

As we can see that the `font-family` and `font-size` is inherited by default but the `font-weight` was not applied here. So here we will use `inherit` as value to the `font-weight` in `strong`.

### CSS:
```CSS
div p strong {
  font-weight: inherit;
}
```
![output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jzcpyq9zuj6apzbr23n4.png)

This was all about `inherit`, but what if we want an inheritable property not to inherit the parent's value? 

Such as color, if we set color of parent box to red then all of it's children will have color red.
But what if we don't want that?

In that case we call `initial` to help us.
initial is used to set the value to the default one.

So, if we look at this example code:
```HTML
<div>
  Hello world in div.
  <p>Hello world in paragraph.</p>
</div>
```
```CSS
div {
  color: red;
  font-family: calibri;
  font-size: 30px;
}

div p {
  color: initial;
}
```
![outptu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/weq7kz3oda198zne6rsy.png)

The color was supposed to be red but as we set that to initial value which is black, we were able to set the color of text to its initial value.

But what if we don't know if in a browser a particular property is inheritable or not? 

![image](https://media.giphy.com/media/lKXEBR8m1jWso/giphy.gif)

Well, no worries, we have a solution or that too.

We can use `unset` keyword in that case. If the property is inheritable `unset` keyword is set to `inherit` and if its not, then `unset` is set to `initial`.

Isn't this amazinggg!!!
![image](https://media.giphy.com/media/rVVFWyTINqG7C/giphy.gif)