Difference between revisions of "CSS Styles"
From TheBeard Science Project Wiki
(→Apply CSS Based on Attribute) |
(→Apply CSS Based on Attribute) |
||
| Line 2: | Line 2: | ||
== Apply CSS Based on Attribute == | == Apply CSS Based on Attribute == | ||
| − | This just seems like less typing to me. Why type out <b>class="something"</b>, especially in a wiki where you have to type it all the time. | + | This just seems like less typing to me. Why type out <b>class="something"</b>, especially in a wiki where you have to type it all the time if you use custom CSS classes. |
CSS: | CSS: | ||
Revision as of 13:38, 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 if you use custom CSS classes.
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+ */
}
