Some CSS theories and declarations I didn't know before

Hello folks! A very happy new year to all of you! 🎉🎉 I hope you’re all doing great! enjoy 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

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

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

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

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

HTML:

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

CSS:

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

p {
  font-size: 18px;
}

Output

when height and width are constants

CSS:

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

p {
  font-size: 18px;
}

yay

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

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, the scroll bars are also included here.

border box: Surrounding the padding box, border box includes the borders and properties like border radius.

Margin box: It surrounds the border box and includes the outlines and box-shadows.

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

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:

tag-name.class-name{
  /* Your code */
}

Let's look at an example:

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:

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

p.class1{
  display: block;
}

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

p.class2{
  background: #f00a;
}

Output

output

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

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:

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

:not(html, body, .class1) {
  background: steelblue;
  color: white;
  width: 200px;
  font: 20px "calibri";
  padding: 10px;
}

output

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:

:not(.class1) {
  background: steelblue;
  color: white;
  width: 200px;
  font: 20px "calibri";
  padding: 10px;
}

This is the result for the above code: output

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:

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

CSS:

div:empty {
  height: 10px;
  background: orangered;
  color: white;
}

Output:

outptu

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:

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

th,td,tr {
  border: 2px solid black;
  padding: 10px 15px;
}

table {
  empty-cells:hide;
}

outptu

Isn't this so cool!!

So, moving on, Have you ever seen something like this?

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.

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.

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:

<div>
  Hello world in div.
  <p><strong>Hello world in paragraph.</strong></p>
</div>

CSS:

div {
  font-weight: 100;
  font-family: calibri;
  font-size: 30px;
}

output

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:

div p strong {
  font-weight: inherit;
}

output

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:

<div>
  Hello world in div.
  <p>Hello world in paragraph.</p>
</div>

div {
  color: red;
  font-family: calibri;
  font-size: 30px;
}

div p {
  color: initial;
}

outptu

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?

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