Transparency using RGBA
💎If you do not want to apply opacity to child elements, Use RGBA
📎Example:
/* Green background with 30% opacity */
------------------------------
div {
background: rgba(76, 175, 80, 0.3) ;
}
--------------------------------
@html_css_tut
"w3schools .com"
💎If you do not want to apply opacity to child elements, Use RGBA
📎Example:
/* Green background with 30% opacity */
------------------------------
div {
background: rgba(76, 175, 80, 0.3) ;
}
--------------------------------
@html_css_tut
"w3schools .com"
CSS The !important Rule
💎The !important rule in CSS is used to add more importance to a property/value than normal.
💎In fact, if you use the !important rule, it will override ALL previous styling rules for that specific property on that element!
💎It is good to know about the !important rule, you might see it in some CSS source code. However, do not use it unless you absolutely have to.
💎One way to use !important is if you have to override a style that cannot be overridden in any other way. This could be if you are working on a Content Management System (CMS) and cannot edit the CSS code. Then you can set some custom styles to override some of the CMS styles.
@html_css_tut
"w3schools .com"
💎The !important rule in CSS is used to add more importance to a property/value than normal.
💎In fact, if you use the !important rule, it will override ALL previous styling rules for that specific property on that element!
💎It is good to know about the !important rule, you might see it in some CSS source code. However, do not use it unless you absolutely have to.
💎One way to use !important is if you have to override a style that cannot be overridden in any other way. This could be if you are working on a Content Management System (CMS) and cannot edit the CSS code. Then you can set some custom styles to override some of the CMS styles.
@html_css_tut
"w3schools .com"
CSS Box Sizing
📌The CSS box-sizing property allows us to include the padding and border in an element's total width and height.
💎Without the CSS box-sizing Property
✅ By default, the width and height of an element is calculated like this:
💎width + padding + border = actual width of an element
💎 height + padding + border = actual height of an element
🔑The box-sizing property allows us to include the padding and border in an element's total width and height.
🔑If you set
box-sizing: border-box;
on an element, padding and border are included in the width and height:
@html_css_tut
"w3schools .com"
📌The CSS box-sizing property allows us to include the padding and border in an element's total width and height.
💎Without the CSS box-sizing Property
✅ By default, the width and height of an element is calculated like this:
💎width + padding + border = actual width of an element
💎 height + padding + border = actual height of an element
🔑The box-sizing property allows us to include the padding and border in an element's total width and height.
🔑If you set
box-sizing: border-box;
on an element, padding and border are included in the width and height:
@html_css_tut
"w3schools .com"
📌box-sizing: border-box
📎The code below ensures that all elements are sized in this more intuitive way. Many browsers already use box-sizing: border-box; for many form elements (but not all - which is why inputs and text areas look different at width: 100%;).
🔑Applying this to all elements is safe and wise:
________________
* {
box-sizing: border-box;
}
_________________
@html_css_tut
"w3schools .com"
📎The code below ensures that all elements are sized in this more intuitive way. Many browsers already use box-sizing: border-box; for many form elements (but not all - which is why inputs and text areas look different at width: 100%;).
🔑Applying this to all elements is safe and wise:
________________
* {
box-sizing: border-box;
}
_________________
@html_css_tut
"w3schools .com"