What does !default in a css property value mean?
Set the style of an outline Set the color of an outline Set the width of an outline Use the shorthand outline property Add space between an outline and the edge/border of an element CSS outline properties explained CSS Text Set the text color of different elements Align the text Remove the line under links Decorate the text Control the letters in a text Indent text Specify the space between characters Specify the space between lines Set the text direction of an element Increase the white space between words Specify a text shadow for an element Disable text wrapping inside an element Vertical alignment of an image inside text CSS text properties explained CSS Fonts Set the font of a text Set the size of the font Set the size of the font in px Set the size of the font in em Set the size of the font in percent and em Set the style of the font Set the variant of the font Set the boldness of the font All the font properties in one declaration Font properties explained CSS Icons Font Awesome icons Bootstrap icons Google icons CSS icons explained CSS Links Add different colors to visited/unvisited links Use of text-decoration on links Specify a background color for links Add other styles to hyperlinks Different types of cursors Advanced — Create link boxes Advanced — Create link boxes with borders CSS link properties explained CSS Lists All the different list item markers in lists Set an image as the list-item marker Position the list-item marker Remove default list settings All list properties in one declaration Style lists with colors Full-width bordered list CSS list properties explained CSS Tables Specify a black border for table, th, and td elements Use of border-collapse Single border around the table Specify the width and height of a table Set the horizontal alignment of content (text-align) Set the vertical alignment of content (vertical-align) All the background properties in one declaration Advanced background example CSS background properties explained CSS Borders Set the width of the four borders Set the width of the top border Set the width of the bottom border Set the width of the left border Set the width of the right border Set the style of the four borders Set the style of the top border Set the style of the bottom border Set the style of the left border Set the style of the right border Set the color of the four borders Set the color of the top border Set the color of the bottom border Set the color of the left border Set the color of the right border All the border properties in one declaration Add rounded borders to an element Set different borders on each side All the top border properties in one declaration All the bottom border properties in one declaration All the left border properties in one declaration All the right border properties in one declaration CSS border properties explained CSS Margins Specify different margins for each side of an element Use shorthand margin property with four values Use shorthand margin property with three values Use shorthand margin property with two values Use shorthand margin property with one value Set margin to auto to center the element within its container Let the left margin be inherited from the parent element Margin collapse Margin properties explained CSS Padding Specify different padding for each side of an element Use shorthand padding property with four values Use shorthand padding property with three values Use shorthand padding property with two values Use shorthand padding property with one value Padding and element width (without box-sizing) Padding and element width (with box-sizing)
What does !default in a css property value mean?
The twitter bootstrap code has a lot of CSS properties with a !default at the end.
My bad for not being clear. I am using the SASS part of Bootstrap.
!default is used often in Bootstrap Sass. It is similar to a reverse !important. All of Bootstraps Variables are set using !default to allow the developer to further customize bootstrap. With !default sass will only define a variable if it has not already been set.
This allows for more flexibility.
//Example1 Dress color = red $auroras-dress-color: blue; $auroras-dress-color: red; //Example2 Dress color = red $auroras-dress-color: blue !default; $auroras-dress-color: red; //Example3 Dress color = blue $auroras-dress-color: blue; $auroras-dress-color: red !default; So Why is this important? Bootstrap is a package. Most people don’t edit the Bootstrap source. NEVER UPDATE THE BOOTSTRAP SOURCE. To customize bootstrap you will add your own variable file and compile it with the bootstrap code but never touch the native bootstrap package. Bootstrap sass’s page has the full skinny on how to customize and compile it in the documentations.
I don’t know why less does not do this. I have not worked much with less and do not know if it has it’s own built in variable management.
Example fiddle https://jsfiddle.net/siggysid/344dnnwz/
Twitter Bootstrap uses LESS as far as I’ve seen. On the other hand, !default is actually part of Sass, and is used for giving Sass variables ( $var ) default values, which would make it invalid in your given context, even in Sass .
Besides, I’ve not been able to find any references to !default in the LESS documentation, and to my knowledge it is exclusive to Sass. Are you sure you found this in Bootstrap’s source and not elsewhere? Because I honestly don’t remember seeing Sass/SCSS code in Bootstrap’s stylesheets.
For what it’s worth, the only valid token that starts with ! in CSS is !important , which you may already be aware of.
You can find the following exact definition and a decent explanation in sass-lang website in its doc section (variable) — default value:
Normally when you assign a value to a variable, if that variable already had a value, its old value is overwritten. But if you’re writing a Sass library, you might want to allow your users to configure your library’s variables before you use them to generate CSS. To make this possible, Sass provides the !default flag. This assigns a value to a variable only if that variable isn’t defined or its value is null . Otherwise, the existing value will be used .
if that variable isn’t defined or its value is null. Otherwise, the existing value will be used.
Example
case 1: null
// test.sass $MySize: null $MySize: 5rem!default // since MySize is "null" so use default h1 font-size: $MySize case 2: undefined
// test.sass $MySize: 5rem!default // since MySize is "undefined" so use default h1 font-size: $MySize case 3: defined already
// test.sass $MySize: 30rem $MySize: 5rem!default // since MySize has been defined. So ignore this setting. h1 font-size: $MySize What does !default in a css property value mean?, The twitter bootstrap code has a lot of CSS properties with a !default at the end. E.g. p < color: white !default; >What does !default do? UPDATE. My bad for not being clear. I am using the SASS part of Bootstrap. Code sample$auroras-dress-color: blue;$auroras-dress-color: red;$auroras-dress-color: blue !default;$auroras-dress-color: red;$auroras-dress-color: blue;Feedback
CSS Tutorial
CSS is the language we use to style an HTML document.
This tutorial will teach you CSS from basic to advanced.
Examples in Each Chapter
This CSS tutorial contains hundreds of CSS examples.
With our online editor, you can edit the CSS, and click on a button to view the result.
CSS Example
h1 <
color: white;
text-align: center;
>
p <
font-family: verdana;
font-size: 20px;
>
Click on the «Try it Yourself» button to see how it works.
CSS Examples
Learn from over 300 examples! With our editor, you can edit the CSS, and click on a button to view the result.
Use the Menu
We recommend reading this tutorial, in the sequence listed in the menu.
If you have a large screen, the menu will always be present on the left.
If you have a small screen, open the menu by clicking the top menu sign ☰ .
CSS Templates
We have created some responsive W3.CSS Templates for you to use.
You are free to modify, save, share, and use them in all your projects.
CSS Exercises
CSS Quiz
Test your CSS skills with a quiz.
CSS References
At W3Schools you will find complete CSS references of all properties and selectors with syntax, examples, browser support, and more.