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

Tags: css,angularjs,css3,angular-material

Problem :

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

Solution :

Load your CSS in the proper order.


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

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.

    CSS Howto..

    How to property adjust table?

    How do you toggle links to stay a certain color until clicked again

    how to set a path to the static files which is surver independnet

    How do i make this form same on all browsers?

    How to display a button over a picture only when hovering it?

    How to remove the gap between each list-item in an unordered list?

    CSS how to have two divs to the right of one div but not beside each other

    How to put bootstrap code inline

    How to set css to more selectors when one of it is $(this)?

    How to make css max width in IE6 and 7?

    How to get partial scroll bar in html page?

    How do I get MS Outlook to accept the CSS style display:block?

    How to style a button's font in CSS?

    How to get smooth Google fonts?

    JavaScript how to get this html to read this css and organise my script into the table

    How can I differentiate unordered lists in CSS?

    How to fix a 3x3 block of images with CSS

    How to prepend a div to another div using javascript

    How to apply advanced styling for all portlets of one kind

    How to add links to tabbing order when they're made visible with CSS?

    How can I position some divs inside an unordered list so they line up with the root element of the list?

    How can I change the css of this when I click on anything but this?

    How to left-align and right-align elements in one row using flexbox?

    How to apply css to html so that it shows as the style property

    How to position two divs one on each other at the bottom of parent?

    CSS causing red frame around lightbox image - how to remove?

    How to version files in the section?

    User agent, how to have diferent css files for diferent devices automaticly

    How to test for existence of CSS class in JavaScript without jQuery?

    How do I center text next to a floating image using css?