title: How to override css styles in wordpress
body: <p>I am working in a wordpress site. I have been using the "custom code plugin" in order to add css style to the site, until the moment it worked for everthing.</p>
  
  <p>But I found that some elements are no using the style I define for them. Those elements are using the predefined by wordpress.</p>
  
  <p>I have this element:</p>
  
  <p><a href="https://i.stack.imgur.com/UVu9C.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UVu9C.png" alt="enter image description here"></a></p>
  
  <p>This is the html code of the element </p>
  
  <p><a href="https://i.stack.imgur.com/XJjU5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XJjU5.png" alt="enter image description here"></a></p>
  
  <p>The css class <strong>generic-button</strong>  is created by wordpress and defined the element's style.  I tried to override with this  css class:</p>
  
  <pre><code>.action div.generic-button{
     animation : none;
      animation-delay : 0;
      animation-direction : normal;
      animation-duration : 0;
      animation-fill-mode : none;
      animation-iteration-count : 1;
      animation-name : none;
      animation-play-state : running;
      animation-timing-function : ease;
      backface-visibility : visible;
      background : 0;
      background-attachment : scroll;
      background-clip : border-box;
      background-color : transparent;
      background-image : none;
      background-origin : padding-box;
      background-position : 0 0;
      background-position-x : 0;
      background-position-y : 0;
      background-repeat : repeat;
      background-size : auto auto;
      border : 0;
      border-style : none;
      border-width : medium;
      border-color : inherit;
      border-bottom : 0;
      border-bottom-color : inherit;
      border-bottom-left-radius : 0;
      border-bottom-right-radius : 0;
      border-bottom-style : none;
      border-bottom-width : medium;
      border-collapse : separate;
      border-image : none;
      border-left : 0;
      border-left-color : inherit;
      border-left-style : none;
      border-left-width : medium;
      border-radius : 0;
      border-right : 0;
      border-right-color : inherit;
      border-right-style : none;
      border-right-width : medium;
      border-spacing : 0;
      border-top : 0;
      border-top-color : inherit;
      border-top-left-radius : 0;
      border-top-right-radius : 0;
      border-top-style : none;
      border-top-width : medium;
      bottom : auto;
      box-shadow : none;
      box-sizing : content-box;
      caption-side : top;
      clear : none;
      clip : auto;
      color : inherit;
      columns : auto;
      column-count : auto;
      column-fill : balance;
      column-gap : normal;
      column-rule : medium none currentColor;
      column-rule-color : currentColor;
      column-rule-style : none;
      column-rule-width : none;
      column-span : 1;
      column-width : auto;
      content : normal;
      counter-increment : none;
      counter-reset : none;
      cursor : auto;
      direction : ltr;
      display : inline;
      empty-cells : show;
      float : none;
      font : normal;
      font-family : inherit;
      font-size : medium;
      font-style : normal;
      font-variant : normal;
      font-weight : normal;
      height : auto;
      hyphens : none;
      left : auto;
      letter-spacing : normal;
      line-height : normal;
      list-style : none;
      list-style-image : none;
      list-style-position : outside;
      list-style-type : disc;
      margin : 0;
      margin-bottom : 0;
      margin-left : 0;
      margin-right : 0;
      margin-top : 0;
      max-height : none;
      max-width : none;
      min-height : 0;
      min-width : 0;
      opacity : 1;
      orphans : 0;
      outline : 0;
      outline-color : invert;
      outline-style : none;
      outline-width : medium;
      overflow : visible;
      overflow-x : visible;
      overflow-y : visible;
      padding : 0;
      padding-bottom : 0;
      padding-left : 0;
      padding-right : 0;
      padding-top : 0;
      page-break-after : auto;
      page-break-before : auto;
      page-break-inside : auto;
      perspective : none;
      perspective-origin : 50% 50%;
      position : static;
      /* May need to alter quotes for different locales (e.g fr) */
      quotes : '\201C' '\201D' '\2018' '\2019';
      right : auto;
      tab-size : 8;
      table-layout : auto;
      text-align : inherit;
      text-align-last : auto;
      text-decoration : none;
      text-decoration-color : inherit;
      text-decoration-line : none;
      text-decoration-style : solid;
      text-indent : 0;
      text-shadow : none;
      text-transform : none;
      top : auto;
      transform : none;
      transform-style : flat;
      transition : none;
      transition-delay : 0s;
      transition-duration : 0s;
      transition-property : none;
      transition-timing-function : ease;
      unicode-bidi : normal;
      vertical-align : baseline;
      visibility : visible;
      white-space : normal;
      widows : 0;
      width : auto;
      word-spacing : normal;
      z-index : auto;
    align-content: unset;
  align-items: unset;
  align-self: unset;
  animation: unset;
  appearance: unset;
  backface-visibility: unset;
  background-blend-mode: unset;
  background: unset;
  binding: unset;
  block-size: unset;
  border-block-end: unset;
  border-block-start: unset;
  border-collapse: unset;
  border-inline-end: unset;
  border-inline-start: unset;
  border-radius: unset;
  border-spacing: unset;
  border: unset;
  bottom: unset;
  box-align: unset;
  box-decoration-break: unset;
  box-direction: unset;
  box-flex: unset;
  box-ordinal-group: unset;
  box-orient: unset;
  box-pack: unset;
  box-shadow: unset;
  box-sizing: unset;
  caption-side: unset;
  clear: unset;
  clip-path: unset;
  clip-rule: unset;
  clip: unset;
  color-adjust: unset;
  color-interpolation-filters: unset;
  color-interpolation: unset;
  color: unset;
  column-fill: unset;
  column-gap: unset;
  column-rule: unset;
  columns: unset;
  content: unset;
  control-character-visibility: unset;
  counter-increment: unset;
  counter-reset: unset;
  cursor: unset;
  display: unset;
  dominant-baseline: unset;
  empty-cells: unset;
  fill-opacity: unset;
  fill-rule: unset;
  fill: unset;
  filter: unset;
  flex-flow: unset;
  flex: unset;
  float-edge: unset;
  float: unset;
  flood-color: unset;
  flood-opacity: unset;
  font-family: unset;
  font-feature-settings: unset;
  font-kerning: unset;
  font-language-override: unset;
  font-size-adjust: unset;
  font-size: unset;
  font-stretch: unset;
  font-style: oblique;
  font-synthesis: unset;
  font-variant: unset;
  font-weight: unset;
  font: ;
  force-broken-image-icon: unset;
  height: unset;
  hyphens: unset;
  image-orientation: unset;
  image-region: unset;
  image-rendering: unset;
  ime-mode: unset;
  inline-size: unset;
  isolation: unset;
  justify-content: unset;
  justify-items: unset;
  justify-self: unset;
  left: unset;
  letter-spacing: unset;
  lighting-color: unset;
  line-height: unset;
  list-style: unset;
  margin-block-end: unset;
  margin-block-start: unset;
  margin-inline-end: unset;
  margin-inline-start: unset;
  margin: unset;
  marker-offset: unset;
  marker: unset;
  mask-type: unset;
  mask: unset;
  max-block-size: unset;
  max-height: unset;
  max-inline-size: unset;
  max-width: unset;
  min-block-size: unset;
  min-height: unset;
  min-inline-size: unset;
  min-width: unset;
  mix-blend-mode: unset;
  object-fit: unset;
  object-position: unset;
  offset-block-end: unset;
  offset-block-start: unset;
  offset-inline-end: unset;
  offset-inline-start: unset;
  opacity: unset;
  order: unset;
  orient: unset;
  outline-offset: unset;
  outline-radius: unset;
  outline: unset;
  overflow: unset;
  padding-block-end: unset;
  padding-block-start: unset;
  padding-inline-end: unset;
  padding-inline-start: unset;
  padding: unset;
  page-break-after: unset;
  page-break-before: unset;
  page-break-inside: unset;
  paint-order: unset;
  perspective-origin: unset;
  perspective: unset;
  pointer-events: unset;
  position: unset;
  quotes: unset;
  resize: unset;
  right: unset;
  ruby-align: unset;
  ruby-position: unset;
  scroll-behavior: unset;
  scroll-snap-coordinate: unset;
  scroll-snap-destination: unset;
  scroll-snap-points-x: unset;
  scroll-snap-points-y: unset;
  scroll-snap-type: unset;
  shape-rendering: unset;
  stack-sizing: unset;
  stop-color: unset;
  stop-opacity: unset;
  stroke-dasharray: unset;
  stroke-dashoffset: unset;
  stroke-linecap: unset;
  stroke-linejoin: unset;
  stroke-miterlimit: unset;
  stroke-opacity: unset;
  stroke-width: unset;
  stroke: unset;
  tab-size: unset;
  table-layout: unset;
  text-align-last: unset;
  text-align: unset;
  text-anchor: unset;
  text-combine-upright: unset;
  text-decoration: unset;
  text-emphasis-position: unset;
  text-emphasis: unset;
  text-indent: unset;
  text-orientation: unset;
  text-overflow: unset;
  text-rendering: unset;
  text-shadow: unset;
  text-size-adjust: unset;
  text-transform: unset;
  top: unset;
  transform-origin: unset;
  transform-style: unset;
  transform: unset;
  transition: unset;
  user-focus: unset;
  user-input: unset;
  user-modify: unset;
  user-select: unset;
  vector-effect: unset;
  vertical-align: unset;
  visibility: unset;
  white-space: unset;
  width: unset;
  will-change: unset;
  window-dragging: unset;
  word-break: unset;
  word-spacing: unset;
  word-wrap: unset;
  writing-mode: unset;
  z-index: unset;
      /* basic modern patch */
      all: initial; !important;
      all: unset;
  
     color:#28B463 !important;
  
  font-weight:600 !important;
  font-size:large !important;
    margin-right:1em !important;
  
   }
  </code></pre>
  
  <p>But I cant remove the properties of the predefined class by wordpress.</p>
  
  <p>The "button" should look like this:</p>
  
  <p><a href="https://i.stack.imgur.com/LIE1D.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LIE1D.png" alt="enter image description here"></a></p>
  
  <p>what can i do to override css styles?</p>
  
  <p>Edit:  </p>
  
  <p>This is the styles I need to override</p>
  
  <p><a href="https://i.stack.imgur.com/D56AS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/D56AS.png" alt="enter image description here"></a></p>
  
  <p>The "div.generic-button a" elements is giving me issues </p>