View dabblet.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Essential CSS Training - Cascading & Specificity | |
*/ | |
html { | |
font-family: sans-serif; | |
font-size: 200%; | |
} | |
.blue { | |
color: blue; |
View dabblet.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Float Demo | |
*/ | |
html { | |
font-family: sans-serif; | |
font-size: 150%; | |
color: #666; | |
} | |
.container { |
View dabblet.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Clear Fix Demo | |
*/ | |
html { | |
font-family: sans-serif; | |
font-size: 150%; | |
} | |
.container { | |
background: #aaddaa; |
View dabblet.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Box Model Demo 2 | |
*/ | |
/* | |
* { | |
box-sizing: border-box; | |
}*/ | |
/*html, body { | |
height: 100%; | |
}*/ |
View dabblet.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Box Model Demo 1 | |
*/ | |
/* | |
What properties will affect a block element's outer size? | |
*/ | |
.box1 { | |
float: left; | |
color: red; |
View dabblet.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Color inheritance experiment | |
*/ | |
html { | |
color: magenta; | |
font-size: 120%; | |
} | |
input, button, p, select { | |
font-size: inherit; |
View dabblet.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* Demo - CSS Text and Typography | |
*/ | |
body { | |
font-family: Helvetica, Arial, Open Sans, sans-serif; | |
font-size: 16px; | |
font-weight: normal; | |
font-style: normal; | |
} |
View dabblet.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Stacking Context Demo | |
*/ | |
* { box-sizing: border-box; } | |
body { font-size: 20px; font-family: sans-serif; } | |
div { | |
border: 1px dashed black; | |
min-width: 10em; | |
min-height: 5em; | |
padding: 0.5em 1em; |
View dabblet.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Position Property & Positioning Context Demo | |
*/ | |
div { | |
padding: 10px; | |
} | |
.main { | |
width: auto; | |
border: 5px solid lightgreen; | |
background-color: AliceBlue; |
View dabblet.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Position Property & Positioning Context Demo | |
*/ | |
div { | |
padding: 10px; | |
/*NOTE: box-sizing is natural (content-box)*/ | |
} | |
.main { | |
width: auto; | |
border: 5px solid lightgreen; |
OlderNewer