back to coding

see also:
html
javascript

examples:
/styles.css - main style used by the front page and others
story.css - a style which centers the text and a max width

Current is CSS 3 and modules, that is a living standard like html 5 so there are no more 'versions'

namedesc
positionabsolute; - takes it out of the flow and you can set top and left to position it
floatright; - puts the element on the right side, text and inline wrap around it.
left200px; - with absolute positioning it sets the element there
top100px; with absolute positioning it sets the element there
height10px; makes the element 10px high
width140px; makes the element 140px wide
max-width8in;
text-indent0.25in;
text-aligncenter; can center text
marginauto; applies to all four sides. MDN article for margin
margin-leftauto; auto means it expands as much as possible
margin-rightauto;
margin-topauto; auto doesn't mean anything for top and bottom
margin-bottomauto; can be set on paragraphs for spacing between paragraphs
line-height1.5; 150% sets space between lines
font-sizelarge; large font size apparently
backgroundblack; set the color of the background
background-imageurl("/img/starsglow.gif"); url to a background image
colorChartreuse; list of named colors are below. Can also uses #ff00ff hex
font-familyVerdana, sans-serif; set up a list of fonts to use in order if available. Use quotes if there is a space in the font name
font-size12pt;
padding-right1em;
border0; for a table border
border-collapsecollapse; for a table
displaynone; removes the element as if it was not there

sizes:
px - pixels
in - inches
pt - points for font sizes
em - em is a relative size of a capital M
100% - percent

no unit is necessary for a size of 0



example of margin, padding, and border

selectors
namedesc
bodybody tag
a:linkjust the links
a:visitedvisited links
tdtable elements
td, thtable element or a header
.classnameapplies to elements with the class of classname
#idnameapplies to the element with the id of idname
tbody tr:nth-child(odd)only odd rows of a table?
@media (prefers-color-scheme: dark)style to use if in dark mode, surrounds other style

set up a font
@font-face {
     font-family: "ComicNeue-Regular";
     src: url("/img/ComicNeue-Regular.ttf") format("truetype");
}

line spacing between paragraphs
p {
     line-height: 32px; /* within paragraph */
     margin-bottom: 30px; /* between paragraphs */
}



Named Numeric Color name Hex rgb Decimal
    #f0f8ff 240 248 255
    #faebd7 250 235 215
    #00ffff 0 255 255
    #7fffd4 127 255 212
    #f0ffff 240 255 255
    #f5f5dc 245 245 220
    #ffe4c4 255 228 196
    #000000 0 0 0
    #ffebcd 255 235 205
    #0000ff 0 0 255
    #8a2be2 138 43 226
    #a52a2a 165 42 42
    #deb887 222 184 135
    #5f9ea0 95 158 160
    #7fff00 127 255 0
    #d2691e 210 105 30
    #ff7f50 255 127 80
    #6495ed 100 149 237
    #fff8dc 255 248 220
    #dc143c 220 20 60
    #00ffff 0 255 255
    #00008b 0 0 139
    #008b8b 0 139 139
    #b8860b 184 134 11
    #a9a9a9 169 169 169
    #006400 0 100 0
    #a9a9a9 169 169 169
    #bdb76b 189 183 107
    #8b008b 139 0 139
    #556b2f 85 107 47
    #ff8c00 255 140 0
    #9932cc 153 50 204
    #8b0000 139 0 0
    #e9967a 233 150 122
    #8fbc8f 143 188 143
    #483d8b 72 61 139
    #2f4f4f 47 79 79
    #2f4f4f 47 79 79
    #00ced1 0 206 209
    #9400d3 148 0 211
    #ff1493 255 20 147
    #00bfff 0 191 255
    #696969 105 105 105
    #696969 105 105 105
    #1e90ff 30 144 255
    #b22222 178 34 34
    #fffaf0 255 250 240
    #228b22 34 139 34
    #ff00ff 255 0 255
    #dcdcdc 220 220 220
    #f8f8ff 248 248 255
    #ffd700 255 215 0
    #daa520 218 165 32
    #808080 128 128 128
    #008000 0 128 0
    #adff2f 173 255 47
    #808080 128 128 128
    #f0fff0 240 255 240
    #ff69b4 255 105 180
    #cd5c5c 205 92 92
    #4b0082 75 0 130
    #fffff0 255 255 240
    #f0e68c 240 230 140
    #e6e6fa 230 230 250
    #fff0f5 255 240 245
    #7cfc00 124 252 0
    #fffacd 255 250 205
    #add8e6 173 216 230
    #f08080 240 128 128
    #e0ffff 224 255 255
    #fafad2 250 250 210
    #d3d3d3 211 211 211
    #90ee90 144 238 144
    #d3d3d3 211 211 211
    #ffb6c1 255 182 193
    #ffa07a 255 160 122
    #20b2aa 32 178 170
    #87cefa 135 206 250
    #778899 119 136 153
    #778899 119 136 153
    #b0c4de 176 196 222
    #ffffe0 255 255 224
    #00ff00 0 255 0
    #32cd32 50 205 50
    #faf0e6 250 240 230
    #ff00ff 255 0 255
    #800000 128 0 0
    #66cdaa 102 205 170
    #0000cd 0 0 205
    #ba55d3 186 85 211
    #9370db 147 112 219
    #3cb371 60 179 113
    #7b68ee 123 104 238
    #00fa9a 0 250 154
    #48d1cc 72 209 204
    #c71585 199 21 133
    #191970 25 25 112
    #f5fffa 245 255 250
    #ffe4e1 255 228 225
    #ffe4b5 255 228 181
    #ffdead 255 222 173
    #000080 0 0 128
    #fdf5e6 253 245 230
    #808000 128 128 0
    #6b8e23 107 142 35
    #ffa500 255 165 0
    #ff4500 255 69 0
    #da70d6 218 112 214
    #eee8aa 238 232 170
    #98fb98 152 251 152
    #afeeee 175 238 238
    #db7093 219 112 147
    #ffefd5 255 239 213
    #ffdab9 255 218 185
    #cd853f 205 133 63
    #ffc0cb 255 192 203
    #dda0dd 221 160 221
    #b0e0e6 176 224 230
    #800080 128 0 128
    #663399 102 51 153
    #ff0000 255 0 0
    #bc8f8f 188 143 143
    #4169e1 65 105 225
    #8b4513 139 69 19
    #fa8072 250 128 114
    #f4a460 244 164 96
    #2e8b57 46 139 87
    #fff5ee 255 245 238
    #a0522d 160 82 45
    #c0c0c0 192 192 192
    #87ceeb 135 206 235
    #6a5acd 106 90 205
    #708090 112 128 144
    #708090 112 128 144
    #fffafa 255 250 250
    #00ff7f 0 255 127
    #4682b4 70 130 180
    #d2b48c 210 180 140
    #008080 0 128 128
    #d8bfd8 216 191 216
    #ff6347 255 99 71
    #40e0d0 64 224 208
    #ee82ee 238 130 238
    #f5deb3 245 222 179
    #ffffff 255 255 255
    #f5f5f5 245 245 245
    #ffff00 255 255 0
    #9acd32 154 205 50