Difference between revisions of "CSS Styles"
From TheBeard Science Project Wiki
| Line 1: | Line 1: | ||
| + | |||
| + | == Apply CSS Based on Attribute == | ||
| + | |||
| + | This just seems like less typing to me. | ||
| + | |||
| + | CSS: | ||
| + | <source lang="css"> | ||
| + | div[red] { | ||
| + | color: red; | ||
| + | } | ||
| + | div[blue] { | ||
| + | color: blue; | ||
| + | } | ||
| + | </source> | ||
| + | |||
| + | HTML: | ||
| + | <source lang="html"> | ||
| + | <div red> | ||
| + | This should be red. | ||
| + | </div> | ||
| + | <div blue> | ||
| + | This should be blue. | ||
| + | </div> | ||
| + | </source> | ||
| + | |||
| + | RESULT: | ||
| + | <div class="out"> | ||
| + | <span style="color:red;">This should be red.</span><br/> | ||
| + | <span style="color:blue;">This should be blue.</span> | ||
| + | </div> | ||
| + | |||
== Absolute Center (via Flexbox) == | == Absolute Center (via Flexbox) == | ||
Revision as of 13:30, 3 October 2018
Apply CSS Based on Attribute
This just seems like less typing to me.
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+ */
}
