CSS Concepts – The one and only guide you need

“I’m just summarizing my CSS learning routine here, your follow will be my motivation to update. Hope it will help you to improve your understanding towards CSS as well.(updates regularly)”

Table Of Contents

1. CSS selector Priority
2….


This content originally appeared on DEV Community and was authored by WEI FENG

"I'm just summarizing my CSS learning routine here, your follow will be my motivation to update. Hope it will help you to improve your understanding towards CSS as well.(updates regularly)"




Table Of Contents

1. CSS selector Priority
2. Inheritable and non-inheritable properties in CSS

1. CSS selector Priority

The CSS selector priority is classified in to few different categories, each carries a different weightage. We can calculate the actual priority by summing up all the selectors' weightage.

Selector Syntax Weightage
Inline Style style="color 1000
Id selector #id 100
class selector .classname 10
attributes selector d[ref=“abc”] 10
pseudo class selector li:first-child 10
HTML tag selector div 1
pseudo element selector li:after 1
  • In fact, if you use the !important rule, it will override ALL previous styling rules for that specific property on that element! 
p {
  background-color: red !important;
}
  • If two styles applied have the same priority, the latter one will be selected.

2. Inheritable and non-inheritable properties in CSS

** 1. non-inheritable properties**

  • Display

  • Text attributes : vertical-align、text-decoration、 text-shadow、 white-space、 unicode-bidi

  • Box model attributes: width、height、margin、border、padding

  • Background attributes: background、background-color、background-image、background-repeat、background-position、background-attachment

  • Position attributes: float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

  • Generated content attributes: content、counter-reset、counter-increment

  • **Outline style attributes: **outline-style、outline-width、outline-color、outline

  • Page style attributes：size、page-break-before、page-break-after

  • Audio style attributes：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

** 2. inheritable properties**

  • font attributes: font-family、font-weight、font-size、font-style

  • text attributes: text-indent、text-align、line-height、
    word-spacing、letter-spacing、text-transform、color.

  • Visibility

  • List Layout attributes: list-style

  • cursor

3. Inheritable and non-inheritable properties in CSS


This content originally appeared on DEV Community and was authored by WEI FENG


Print Share Comment Cite Upload Translate Updates
APA

WEI FENG | Sciencx (2021-12-02T13:50:08+00:00) CSS Concepts – The one and only guide you need. Retrieved from https://www.scien.cx/2021/12/02/css-concepts-the-one-and-only-guide-you-need/

MLA
" » CSS Concepts – The one and only guide you need." WEI FENG | Sciencx - Thursday December 2, 2021, https://www.scien.cx/2021/12/02/css-concepts-the-one-and-only-guide-you-need/
HARVARD
WEI FENG | Sciencx Thursday December 2, 2021 » CSS Concepts – The one and only guide you need., viewed ,<https://www.scien.cx/2021/12/02/css-concepts-the-one-and-only-guide-you-need/>
VANCOUVER
WEI FENG | Sciencx - » CSS Concepts – The one and only guide you need. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/12/02/css-concepts-the-one-and-only-guide-you-need/
CHICAGO
" » CSS Concepts – The one and only guide you need." WEI FENG | Sciencx - Accessed . https://www.scien.cx/2021/12/02/css-concepts-the-one-and-only-guide-you-need/
IEEE
" » CSS Concepts – The one and only guide you need." WEI FENG | Sciencx [Online]. Available: https://www.scien.cx/2021/12/02/css-concepts-the-one-and-only-guide-you-need/. [Accessed: ]
rf:citation
» CSS Concepts – The one and only guide you need | WEI FENG | Sciencx | https://www.scien.cx/2021/12/02/css-concepts-the-one-and-only-guide-you-need/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts