• CSS – Introduction
• CSS – Basics
• CSS – Include CSS File to HTML
• CSS – ID and Class
• CSS – Cascading Order
• CSS – Selector
• CSS – Pseudo Classes
• CSS – Colors
• CSS – Gradients
• CSS – Units
• CSS – Background
• CSS – Border
• CSS – Margin and Padding
• CSS – Height and Width
• CSS – Outline
• CSS – Display and Visibility
• CSS – Position
• CSS – Overlapping Elements
• CSS – Overflow
• CSS – Float
• CSS – Clear and Clearfix
• CSS – Left and Right
• CSS – Transform
• CSS – Opacity / Transparency
• CSS – text-shadow
• CSS – box-shadow
• CSS – object-fit
• CSS – Counters
• CSS – Variables
• CSS – Fonts
• CSS – Text Formatting
• CSS – Graphics
• CSS – Links
• CSS – Lists
• CSS – Tables
• CSS – Horizontal & Vertical Align
• CSS – Image Sprite
• CSS – Transitions
• CSS – 2D Transforms
• CSS – 3D Transforms
• CSS – Animations
• CSS – Media Queries
• CSS – Flexbox

Cascading Order

Stylesheets cascade at a very simple level, this means that the order of CSS rules matters; when two rules apply that have equal specificity the one that comes last in the CSS is the one that will be used.

h1 {
    color: red;
}
h1 {
    color: blue;
}
<h1>Heading text.</h1>

Heading text.

The priority of codes can be a little bit confusing. External file has less priority and inline style has the highest priority.

It means, if you add style by inline method, the inline style will be added and browsers will ignore the other styles.

!important

If you have a style with !important, the style will be added no matter the other styles have high priority or not.

p {
    background: #cccccc !important;
}

If two styles have !important, the style with highest priority will be added.