To override the CSS properties of a class using another class, we can use the !important directive. In CSS, !important means “this is important”, and the property:value pair that has this directive is always applied even if the other element has higher specificity. Show Several Bootstrap components utilize These higher values start at an arbitrary number, high and specific enough to ideally avoid conflicts. We need a standard set of these across our layered components—tooltips, popovers, navbars, dropdowns, modals—so we can be reasonably consistent in the behaviors. There’s no reason we couldn’t have used We don’t encourage customization of these individual values; should you change one, you likely need to change them all.
To handle overlapping borders within components (e.g., buttons and inputs in input groups), we use low single digit From the previous page we have learned that global variables can be accessed/used through the entire document, while local variables can be used only inside the selector where it is declared. Look at the example from the previous page: Example:root { body { h2 { .container { button { Sometimes we want the variables to change only in a specific section of the page. Assume we want a different color of blue for button elements. Then, we can re-declare the --blue variable inside the button selector. When we use var(--blue) inside this selector, it will use the local --blue variable value declared here. We see that the local --blue variable will override the global --blue variable for the button elements: Example:root { body { h2 { .container { button { Add a New Local VariableIf a variable is to be used at only one single place, we could also have declared a new local variable, like this: Example:root { body { h2 { .container { button { Browser SupportThe numbers in the table specify the first browser version that fully supports the The 0 rule allows custom fonts to be loaded on a webpage. Once added to a stylesheet, the rule instructs the browser to download the font from where it is hosted, then display it as specified in the CSS.Without the rule, our designs are limited to the fonts that are already loaded on a user’s computer, which vary depending on the system being used. Here’s a nice breakdown of existing system fonts. Table of contentsGeneral browser supportThis browser support data is from , which has more detail. A number indicates that browser supports the feature at that version and up. DesktopChromeFirefoxIEEdgeSafari43.59123.2Mobile / TabletAndroid ChromeAndroid FirefoxAndroidiOS Safari10910744.2-4.3Practical level of browser supportThings are and , so we can probably get away with:
You could probably even get away with just WOFF2 these days.
This browser support data is from , which has more detail. A number indicates that browser supports the feature at that version and up. DesktopChromeFirefoxIEEdgeSafari3639No1412Mobile / TabletAndroid ChromeAndroid FirefoxAndroidiOS Safari10910710910.0-10.2The only practical thing also using WOFF buys you is Internet Explorer 11 support. Deepest possible browser supportThis is the method with the deepest support possible right now. The 0 rule should be added to the stylesheet before any styles.
Then use it to style elements like this:
Slightly deeper browser upportIf you need a sort of a happy medium between full support and practical support, adding a 2 will cover a few more bases: ChromeSafariFirefoxOperaIEAndroidiOS3.5+3+3.5+10.1+9+2.2+4.3+Alternative techniques
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2');
} |