/* @import 'styles2.css'; */ body { /* font: 1em/150% Helvetica, Arial, sans-serif; */ /* font-family: Georgia, serif; */ /* font-family: sans-serif; */ /* font-family: cursive; */ /* font-family: system-ui; */ /* font: 14px 'Lucida Grande', Helvetica, Arial, sans-serif; */ /* padding: 50px; */ padding: 1em; margin: 0 auto; max-width: 50em; /* background-image: linear-gradient( rgba(0, 100, 100, 0.5), rgba(100, 100, 0, 0.5) ); */ /* url('../../media/examples/lizard.png'); */ /* font-family: Georgia, serif; */ /* font-size: 20px; */ /* letter-spacing: 0.1em; */ word-spacing: 0.1em; /* letter-spacing: 1.2px; */ /* word-spacing: 1.2px; */ /* color: #000000; */ /* font-weight: normal; */ /* text-decoration: none; */ /* font-style: normal; */ /* font-variant: normal; */ /* text-transform: none; */ font-family: 'Open Sans', sans-serif; } /* @media (max-width: 30em) { body { background-color: blue; } } */ @media (min-width: 70em) { /* Increase the global font size on larger screens or windows for better readability */ body { font-size: 110%; } } a { font-size: 90%; } /* TODO: h1 {font-size: 1.5em;} div p, #id:first-line { background-color: red; border-radius: 3px; } div p { margin: 0; padding: 1em; } div p + p { padding-top: 0; } */ /* shorthand properties font background border padding margin 4-value shorthands top, right, bottom, left (clockwise from the top) padding: 10px 15px 15px 5px; padding-top: 10px; padding-right: 15px; padding-bottom: 15px; padding-left: 5px; background: red url(bg-graphic.png) 10px 10px repeat-x fixed; background-color: red; background-image: url(bg-graphic.png); background-position: 10px 10px; background-repeat: repeat-x; background-attachment: fixed; NOTE: Omission in CSS shorthand can override previously set values to its initial value 2-value shorthands, which set padding/margin top/bottom, right/left margin: 0 auto; NOTE: Omission in CSS shorthand can override previously set values to its initial value */ /* h1 {} p, li {} */ /* h1 { } */ /* .in-progress { list-style-type: '\1F449'; } */ /* li { */ /* list-style-type: '\1F44D'; */ /* border-bottom: 1px solid lightgray; */ /* border-bottom: 1rem solid; */ /* border-bottom: 4mm ridge rgb(170, 50, 220, .6); */ /* } */ :root { --in-progress-1: purple; --in-progress-2: tomato; --in-progress-3: green; } div[class='in-progress-1'] h2 { text-decoration: var(--in-progress-1) wavy underline; } div[class='in-progress-2'] h2 { text-decoration: var(--in-progress-2) wavy underline; } h3, h4, h5, h6, h7 { text-decoration: var(--in-progress-3) wavy underline; } div[class='in-progress-1'] li::marker { color: var(--in-progress-1); font-size: 1.1em; } div[class='in-progress-2'] li::marker { color: var(--in-progress-2); font-size: 1.1em; } ul li::marker { color: green; } hr { border: 1px solid green; /* border-radius: 2px; */ } /* TODO: h1 a:link .many-things #one-thing * .box p .box p:first-child h1, h2, .intro */ /* .special {} p.special {} li.special, span.special {} */ /* descendant combinator */ /* p span {} */ /* selects any that is inside a

, which is inside an

*/ /* article p span {} */ /* adjacent sibling combinator */ /* h1+p {} */ /* selects any

that comes directly after a

/ / h1 + ul + p { } / / This will style any element with a class of special, which is inside a
, which comes just after an

, which is inside a . Phew! / / body h1 + p .special { } / / based on state/ / a {} a:link {} a:visited {} / a:hover, a:focus { text-decoration: none; font-weight: bold; color: rgb(0, 127, 0); } / CSS rule sets (rules) selectors CSS declaration block CSS declaration property: value / / background-color: purple; / / background-color: yellow; / / border: 1px solid black; / / color: red; / / color: black; / / color: green; / / color: orange; / / color: rebeccapurple; / / color: #00B7FF; / / color: yellow; / / color: blue; / / font-size: 200%; / / font-size: 200%; / / padding: 5px; / / .outer { / / border: 5px solid black; / / } / .box1 { background-color: rebeccapurple; color: white; padding: 10px; width: calc(10%); } .box2 { background-color: lightgreen; color: black; padding: 10px; width: calc(10% + 10px); } .box { margin: 30px; width: 100px; height: 100px; background-color: rgb(208, 172, 243); transform: rotate(0.2turn); } textarea { margin: 10px; width: 100%; height: 100%; min-height: 300px; display: block; overflow: scroll; white-space: pre; } .updated-on { float: right; color: rgba(0, 0, 0, .54); } / Handle basic element styling / / -------------------------------------------------------------------------------------------- / / Handle specific elements nested in the DOM / / -------------------------------------------------------------------------------------------- */