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 ❯
normal |
yes |
no. Read about animatable |
CSS1 |
object.style.fontStyle="italic" Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
font-style | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
CSS Syntax
font-style: normal|italic|oblique|initial|inherit;
Property Values
normal | The browser displays a normal font style. This is default | Demo ❯ |
italic | The browser displays an italic font style | Demo ❯ |
oblique | The browser displays an oblique font style | Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
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 linka:visited
- a link the user has visiteda:hover
- a link when the user mouses over ita: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".
{ color: red; }This is a heading
This is a paragraph
This is a link
Start the Exercise