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 can I change the css class rules using jQuery?

    How to change the color of header?

    How to set margin for elements in my case

    How to make bootstrap btn-group break into half naturally

    How do I create a side menu navigation bar that opens items to the right [closed]

    meteor: how to use multiple classes in css selector

    CSS: how do I add Twitter Bootstrap to an existing web page with it's own CSS?

    How do I tell a page to ignore internal CSS in favor of external CSS?

    How does Google Web Fonts decide which version of a font to provide to my browser?

    How to set original image for animate background image in css

    How do I get Slick carousel to work? [closed]

    How do I specify a css selector which matches exactly one of multiple values?

    How to set the background image width using CSS?

    How to add a css transition color change for a link/div background

    Sencha Touch 2 date picker component & css: how to display hidden column names?

    How to center something I appended with js and also replace it

    Skeleton CSS - how to span the width of the screen?

    how does CSS float property combine when dealing with nested divs?

    Is it possible to apply css transitions on svg nodes? If yes, how?

    How to find an element using Watir by inline css styles

    CSS: How to blur background image within the div?

    How to set a CSS settings only to the td of an external table but not to the internal table?

    How to Load Resources (Css, js files) in Laravel 4 (Optimization)

    How to inline elements with CSS

    How to bottom align a title of variable length

    How to make text wrap above and below a div?

    How to make this Header/Content/Footer layout using CSS?

    How to align elements properly using CSS

    How can I avoid a “Flash of Unstyled Content” using fixed-width cells in CSS Tables?

    CSS: How do I stretch a background with a different z-index to height of page contents