Hướng dẫn css remove property override

I encourage you to read about CSS specificity here in the docs: CSS Specificity: Mozilla Developers and check my answer down below.

There are several ways to overwrite CSS properties from external libraries.

Case 1: if you're using Bootstrap or Zurb Foundation via npm package, you need to change a variable value that is responsible for given property and place it after importing all library files to ovewrite correctyly eg.

import 'files from library.sass';

// my settings
$default-width: 80%;

Case 2: if you're using CDN to deliver your library you can use a more specific CSS selector to overwrite given property eg:

to overwrite div selector

div {}   ----> div.my-class {}

The second technique, but for sure not recommended is to use !important declaration. But remember, using!important declaration often causes many problems during the development process. It is always better to find a more specific selector than use!important.

I'm assuming that this is happening because the style sheet will only override the attributes that exist in the parent theme and child theme; thus, leaving attributes that are NOT in the child theme, in the parent theme.

That's not how it works. There's nothing special about WordPress parent theme and child theme stylesheets. They're just standard CSS style sheets, and they follow the same rules as any two stylesheets loaded on any other web page.

If you want to "remove" a style from one stylesheet in subsequent stylesheet, you need to provide a new value for it. If you have a position: relative; property, and you want to reset it to its default value you need to use initial:

.mvp-blog-story-img img {
    margin: 0 auto;
    width: 100%;
    min-width: 0px;
    position: initial;
}

Note that initial doesn't work in Internet Explorer, so if IE support is required, you will need to find out what the default value is and set it to that. For position, that's static:

.mvp-blog-story-img img {
    margin: 0 auto;
    width: 100%;
    min-width: 0px;
    position: initial;
}

Note that if the element's position is static then left and right won't do anything, so you don't need to reset those.

To find the default values for properties, the MDN web docs CSS reference is a good resource.

Example

Set different font styles for three paragraphs:

p.a {
  font-style: normal;
}

p.b {
  font-style: italic;
}

p.c {
  font-style: oblique;
}

Try it Yourself »

Definition and Usage

The font-style property specifies the font style for a text.

Show demo ❯

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

CSS Syntax

font-style: normal|italic|oblique|initial|inherit;

Property Values

Related Pages

CSS tutorial: CSS Font

CSS reference: font property

HTML DOM reference: fontStyle property

With CSS, links can be styled in many different ways.

Text Link Text Link Link Button Link Button

Styling Links

Links can be styled with any CSS property (e.g. color, font-family, background, etc.).

In addition, links can be styled differently depending on what state they are in.

The four links states are:

• a:link - a normal, unvisited link
• a:visited - a link the user has visited
• a:hover - a link when the user mouses over it
• a:active - a link the moment it is clicked

Example

/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}

Try it Yourself »

When setting the style for several link states, there are some order rules:

• a:hover MUST come after a:link and a:visited
• a:active MUST come after a:hover

Text Decoration

The text-decoration property is mostly used to remove underlines from links:

Example

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}

Try it Yourself »

Background Color

The background-color property can be used to specify a background color for links:

Example

a:link {
  background-color: yellow;
}

a:visited {
  background-color: cyan;
}

a:hover {
  background-color: lightgreen;
}

a:active {
  background-color: hotpink;
}

Try it Yourself »

Link Buttons

This example demonstrates a more advanced example where we combine several CSS properties to display links as boxes/buttons:

Example

a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}

Try it Yourself »

More Examples

Example

This example demonstrates how to add other styles to hyperlinks:

a.one:link {color: #ff0000;}
a.one:visited {color: #0000ff;}
a.one:hover {color: #ffcc00;}

a.two:link {color: #ff0000;}
a.two:visited {color: #0000ff;}
a.two:hover {font-size: 150%;}

a.three:link {color: #ff0000;}
a.three:visited {color: #0000ff;}
a.three:hover {background: #66ff66;}

a.four:link {color: #ff0000;}
a.four:visited {color: #0000ff;}
a.four:hover {font-family: monospace;}

a.five:link {color: #ff0000; text-decoration: none;}
a.five:visited {color: #0000ff; text-decoration: none;}
a.five:hover {text-decoration: underline;}

Try it Yourself »

Example

Another example of how to create link boxes/buttons:

a:link, a:visited {
  background-color: white;
  color: black;
  border: 2px solid green;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: green;
  color: white;
}

Try it Yourself »

Example

This example demonstrates the different types of cursors (can be useful for links):

auto

crosshair

default

e-resize

help

move

n-resize

ne-resize

nw-resize

pointer

progress

s-resize

se-resize

sw-resize

text

w-resize

wait

Try it Yourself »

Test Yourself With Exercises

Exercise:

Set the color of links to "red".

  
This is a heading
  
This is a paragraph
  This is a link

Start the Exercise