Difference between revisions of "CSS Styles"
From TheBeard Science Project Wiki
(→Apply CSS Based on Attribute) |
(→Apply CSS Based on Attribute) |
||
| Line 25: | Line 25: | ||
RESULT: | RESULT: | ||
| − | <div class=" | + | <div class="box"> |
<span style="color:red;">This should be red.</span><br/> | <span style="color:red;">This should be red.</span><br/> | ||
<span style="color:blue;">This should be blue.</span> | <span style="color:blue;">This should be blue.</span> | ||
Revision as of 13:37, 3 October 2018
Apply CSS Based on Attribute
This just seems like less typing to me. Why type out class="something", especially in a wiki where you have to type it all the time.
CSS:
div[red] {
color: red;
}
div[blue] {
color: blue;
}
HTML:
<div red>
This should be red.
</div>
<div blue>
This should be blue.
</div>
RESULT:
This should be red.
This should be blue.
Absolute Center (via Flexbox)
.absolute-center {
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
Wrap Text in <pre> Tag
/* wrap text in pre tag, good for mobile because pre won't extend beyond screen width */
pre.wrap {
white-space: pre-wrap; /* Since CSS 2.1 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
