Prashanth Sams Prashanth Sams - 3 months ago 16
CSS Question

How to prioritize custom css over the default Angular-material css

By default, the search label is padded to left.. i.e.,

padding-left: 3px
is assigned by
Angular-material.min.css


enter image description here

When I pad it to right by customizing the same in my
custom.less
file, it's not taken high priority over the default css from
Angular-material.min.css


enter image description here

Answer

Load your CSS in the proper order.

HTML

<head>
  <link rel="stylesheet" type="text/css" href="Angular-material.min.css">
  <link rel="stylesheet" type="text/css" href="custom.css">
</head>

This is because the C in CSS stands for Cascading. This means that rules that are seen later on overwrite rules that were seen previously.