October 31, 2022
Handy CSS
October 31, 2022
Here is the css file that I include in my theme ( one of many, actually. ) This file pre-defines a lot of CSS options as classes, which makes them much easier to use. Include this file in your theme header, and these classes will display properly in the Gutenberg WordPress editor. In fact, I am using them now.
/*
* additional quick classes that should be part of css
* many of these display correctly in Gutenberg
*/
/* text layout ================================= */
.cl-l, .clear-left { clear:left; }
.cl-b, .clear-both { clear:both; }
.cl-r, .clear-right { clear:right; }
.nw, .nowrap, .no-wrap { white-space: nowrap; }
.nnw, .no-nowrap, .no-no-wrap { white-space: normal; }
.bw, .breakword
{ display: block; overflow-wrap: break-word; word-break: break-all; }
.nbw, .nobreakword
{ display: block; overflow-wrap: normal; }
.center { margin-left: auto; margin-right: auto; };
.in-0, .indent-0 { text-indent: 0px; }
.in-10, .indent-10 { text-indent: 10px; }
.in-20, .indent-20 { text-indent: 20px; }
.in-30, .indent-30 { text-indent: 30px; }
.in-40, .indent-40 { text-indent: 40px; }
.in-50, .indent-50 { text-indent: 50px; }
.in-60, .indent-60 { text-indent: 60px; }
.quote { padding: 20px 0px 20px 40px; }
.author { text-align:right; padding-right:20px; }
.visible { visibility: visible; }
.hidden { visibility: hidden; }
.hide { display: none; }
/* alignments ================================= */
.has-text-align-left, .ta-l, .left
{ text-align: left; }
.has-text-align-center, .ta-c, .center
{ text-align: center; }
.has-text-align-right, .ta-r, .right
{ text-align: right; }
.has-text-align-justify, .ta-j, .justify
{ text-align: justify; }
.ta-c img
{ margin-left:auto; margin-right:auto; }
.va-b, .bottom { vertical-align: bottom; }
.va-m, .middle { vertical-align: middle; }
.va-t, .top { vertical-align: top; }
.fl-r, .float-right
{ float:right;margin: 0px 0px 20px 20px; }
.fl-l, .float-left
{ float:left;margin: 0px 20px 20px 0px; }
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.absolute { position: absolute; }
.relative { position: relative; }
.sticky { position: sticky; }
.static { position: static; }
.fixed { position: fixed; }
/* text formats ================================= */
.bold, .bold * { font-weight: bold; }
.italic, .italic * { font-style: italic; }
.normal, .normal * { font-weight:normal; font-style:normal; }
.u-line, .u-line * { text-decoration:underline; }
.x-out, .x-out * { text-decoration:line-through; }
.x-red, .x-red * { text-decoration:line-through; text-decoration-color: red; }
.biggest, .biggest * { font-size: 200%; }
.bigger, .bigger * { font-size: 150%; }
.big, .big * { font-size: 125%; }
.small, .small * { font-size: 85%; }
.smaller, .smaller * { font-size: 67%; }
.smallest, .smallest * { font-size: 50%; }
/* special fonts ================================= */
/* see also style_typography.css */
.sans, .sans * /* default */
{ font-family: "Segoe UI","Helvetica Neue",sans-serif; }
.serif, .serif *
{ font-family:"Times New Roman",Times,serif; }
.typewriter, .typewriter *, .monospace, .monospace *
{ font-family:"Courier New",courier,monospace; }
.hand, .hand *, .comic, .comic *
{ font-family:"Comic Sans MS","Comic Sans",cursive,sans-serif; }
/* background colors ============================== */
.bg-hide { display: none; }
.bg-white { background: white; }
.bg-mist { background: #E8E8E8; }
.bg-silver { background: silver; }
.bg-gray { background: gray;}
.bg-black { background: black; }
.bg-cream { background: #ffffcc; }
.bg-lemon { background: #FFF99C; }
.bg-yellow { background: yellow; }
.bg-orange { background: orange; }
.bg-pink { background: #FFB0B0; }
.bg-red { background: red; }
.bg-sky { background: #bbeeff; }
.bg-aqua { background: aqua;}
.bg-teal { background: #33cccc; }
.bg-blue { background: blue; }
.bg-navy { background: navy; }
.bg-lavender{ background: lavender; }
.bg-purple{ background: #9999ff; }
.bg-grape{ background: #6666cc; }
.bg-pea{ background: #ccff99; }
.bg-green { background: green; }
.bg-forest { background: #005000; }
.bg-silver-fade
{ background: linear-gradient(to right,#B4B4B4,white); }
.bg-white-fade
{ background: linear-gradient(to right,white,#B4B4B4 ); }
.bg-lighted
{ background: linear-gradient(to bottom right,#eeeeee,#aaaaaa ); }
/* foreground colors ================================= */
.fg-hide { display: none; }
.fg-white { color: white; }
.fg-mist { color: #E8E8E8; }
.fg-silver { color: silver; }
.fg-gray { color: gray; }
.fg-black { color: black; }
.fg-cream { color: #ffffcc; }
.fg-lemon { color: #FFF99C; }
.fg-yellow { color: yellow; }
.fg-orange { color: orange; }
.fg-pink { color: #FFB0B0; }
.fg-red { color: red; }
.fg-sky { color: #bbeeff; }
.fg-aqua { color: aqua; }
.fg-teal { color: #33cccc; }
.fg-blue { color: blue; }
.fg-navy { color: navy; }
.fg-lavender { color: lavender; }
.fg-purple { color: #9999ff; }
.fg-grape { color: #6666cc; }
.fg-pea { color: #ccff99; }
.fg-green { color: green; }
.fg-forest { color: #005000; }
/* automatic foregrounds ================================= */
.bg-white { color: black; }
.bg-white a:link { color:#0000bb; text-decoration:none; }
.bg-white a:visited { color:#0000bb; text-decoration:none; }
.bg-white a:hover { color:red; text-decoration:underline; }
.bg-white a:active { color:blue; text-decoration:underline; }
.bg-black, .bg-black *,
.bg-navy, .bg-navy *,
.bg-red, .bg-red *,
.bg-forest, .bg-forest *,
.bg-ocean .bg-ocean *
{ color: white !important; }
.bg-black a,
.bg-navy a,
.bg-red a,
.bg-forest a,
.bg-ocean a
{ color: silver !important; }
.bg-black a:hover,
.bg-navy a:hover,
.bg-red a:hover,
.bg-forest a:hover,
.bg-ocean a:hover
{ color: #FFB0B0 !important; } /* pink */
/* borders ================================= */
.bo-none { border-style: none !important; }
.bo-black { border: 1px solid black !important; }
.bo-black2 { border: 2px solid black !important; }
.bo-black5 { border: 5px solid black !important; }
.bo-black10 { border: 10px solid black !important; }
.bo-black20 { border: 20px solid black !important; }
.bo-red { border: 1px solid red !important; }
.bo-red2 { border: 2px solid red !important; }
.bo-red5 { border: 5px solid red !important; }
.bo-red10 { border: 10px solid red !important; }
.bo-red20 { border: 20px solid red !important; }
.bo-silver { border: 1px solid silver !important; }
.bo-silver2 { border: 2px solid silver !important; }
.bo-silver5 { border: 5px solid silver !important; }
.bo-silver10 { border: 10px solid silver !important; }
.bo-silver20 { border: 20px solid silver !important; }
.bo-gray { border: 1px solid gray !important; }
.bo-gray2 { border: 2px solid gray !important; }
.bo-gray5 { border: 5px solid gray !important; }
.bo-gray10 { border: 10px solid gray !important; }
.bo-gray20 { border: 20px solid gray !important; }
.bo-white { border: 1px solid white !important; }
.bo-white2 { border: 2px solid white !important; }
.bo-white5 { border: 5px solid white !important; }
.bo-white10 { border: 10px solid white !important; }
.bo-white20 { border: 20px solid white !important; }
.outline img, img.outline { border: 1px solid black; }
/* corners ================================= */
.cr-0 { border-radius: 0px !important; }
.cr-3 { border-radius: 3px !important; }
.cr-5 { border-radius: 5px !important; }
.cr-10 { border-radius: 10px !important; }
/* shadows ================================= */
.sh-0 { box-shadow:0px 0px 0px transparent !important; }
.sh-3 { box-shadow:3px 3px 5px gray; margin-bottom:3px !important; }
.sh-5 { box-shadow:5px 5px 10px gray; margin-bottom:5px !important; }
/* margins ================================= */
.mg-0 { margin: 0; }
.mg-5 { margin: 5px; }
.mg-10 { margin: 10px; }
.mg-15 { margin: 15px; }
.mg-20 { margin: 20px; }
.mg-25 { margin: 25px; }
.mg-30 { margin: 30px; }
.mg-35 { margin: 35px; }
.mg-50 { margin: 50px; }
.mgl-0 { margin-left: 0;}
.mgl-5 { margin-left: 5px; }
.mgl-10 { margin-left: 10px; }
.mgl-15 { margin-left: 15px; }
.mgl-20 { margin-left: 20px; }
.mgl-25 { margin-left: 25px; }
.mgl-30 { margin-left: 30px; }
.mgl-35 { margin-left: 35px; }
.mgl-50 { margin-left: 50px; }
.mgr-0 { margin-right: 0; }
.mgr-5 { margin-right: 5px; }
.mgr-10 { margin-right: 10px; }
.mgr-15 { margin-right: 15px; }
.mgr-20 { margin-right: 20px; }
.mgr-25 { margin-right: 25px; }
.mgr-30 { margin-right: 30px; }
.mgr-35 { margin-right: 35px; }
.mgr-50 { margin-right: 50px; }
.mgt-0 { margin-top: 0; }
.mgt-5 { margin-top: 5px; }
.mgt-10 { margin-top: 10px; }
.mgt-15 { margin-top: 15px; }
.mgt-20 { margin-top: 20px; }
.mgt-25 { margin-top: 25px; }
.mgt-30 { margin-top: 30px; }
.mgt-35 { margin-top: 35px; }
.mgt-50 { margin-top: 50px; }
.mgb-0 { margin-bottom: 0; }
.mgb-5 { margin-bottom: 5px; }
.mgb-10 { margin-bottom: 10px; }
.mgb-15 { margin-bottom: 15px; }
.mgb-20 { margin-bottom: 20px; }
.mgb-25 { margin-bottom: 25px; }
.mgb-30 { margin-bottom: 30px; }
.mgb-35 { margin-bottom: 35px; }
.mgb-50 { margin-bottom: 50px; }
/* paddings ================================= */
.pd-0 { padding: 0; }
.pd-5 { padding: 5px; }
.pd-10 { padding: 10px; }
.pd-15 { padding: 15px; }
.pd-20 { padding: 20px; }
.pd-25 { padding: 25px; }
.pd-30 { padding: 30px; }
.pd-35 { padding: 35px; }
.pd-50 { padding: 50px; }
.pdl-0 { padding-left: 0; }
.pdl-5 { padding-left: 5px; }
.pdl-10 { padding-left: 10px; }
.pdl-15 { padding-left: 15px; }
.pdl-20 { padding-left: 20px; }
.pdl-25 { padding-left: 25px; }
.pdl-30 { padding-left: 30px; }
.pdl-35 { padding-left: 35px; }
.pdl-50 { padding-left: 50px; }
.pdr-0 { padding-right: 0; }
.pdr-5 { padding-right: 5px; }
.pdr-10 { padding-right: 10px; }
.pdr-15 { padding-right: 15px; }
.pdr-20 { padding-right: 20px; }
.pdr-25 { padding-right: 25px; }
.pdr-30 { padding-right: 30px; }
.pdr-35 { padding-right: 35px; }
.pdr-50 { padding-right: 50px; }
.pdt-0 { padding-top: 0; }
.pdt-5 { padding-top: 5px; }
.pdt-10 { padding-top: 10px; }
.pdt-15 { padding-top: 15px; }
.pdt-20 { padding-top: 20px; }
.pdt-25 { padding-top: 25px; }
.pdt-30 { padding-top: 30px; }
.pdt-35 { padding-top: 35px; }
.pdt-50 { padding-top: 50px; }
.pdb-0 { padding-bottom: 0;}
.pdb-5 { padding-bottom: 5px; }
.pdb-10 { padding-bottom: 10px; }
.pdb-15 { padding-bottom: 15px; }
.pdb-20 { padding-bottom: 20px; }
.pdb-25 { padding-bottom: 25px; }
.pdb-30 { padding-bottom: 30px; }
.pdb-35 { padding-bottom: 35px; }
.pdb-50 { padding-bottom: 50px; }
/* soft widths ================================= */
.w-0 { max-width: 0px; margin-left:auto; margin-right:auto; }
.w-5 { max-width: 5px; margin-left:auto; margin-right:auto; }
.w-10 { max-width: 10px; margin-left:auto; margin-right:auto; }
.w-20 { max-width: 20px; margin-left:auto; margin-right:auto; }
.w-25 { max-width: 25px; margin-left:auto; margin-right:auto; }
.w-30 { max-width: 30px; margin-left:auto; margin-right:auto; }
.w-40 { max-width: 40px; margin-left:auto; margin-right:auto; }
.w-50 { max-width: 50px; margin-left:auto; margin-right:auto; }
.w-60 { max-width: 60px; margin-left:auto; margin-right:auto; }
.w-70 { max-width: 70px; margin-left:auto; margin-right:auto; }
.w-75 { max-width: 75px; margin-left:auto; margin-right:auto; }
.w-80 { max-width: 80px; margin-left:auto; margin-right:auto; }
.w-90 { max-width: 90px; margin-left:auto; margin-right:auto; }
.w-100 { max-width: 100px; margin-left:auto; margin-right:auto; }
.w-110 { max-width: 110px; margin-left:auto; margin-right:auto; }
.w-120 { max-width: 120px; margin-left:auto; margin-right:auto; }
.w-125 { max-width: 125px; margin-left:auto; margin-right:auto; }
.w-130 { max-width: 130px; margin-left:auto; margin-right:auto; }
.w-140 { max-width: 140px; margin-left:auto; margin-right:auto; }
.w-150 { max-width: 150px; margin-left:auto; margin-right:auto; }
.w-160 { max-width: 160px; margin-left:auto; margin-right:auto; }
.w-170 { max-width: 170px; margin-left:auto; margin-right:auto; }
.w-175 { max-width: 175px; margin-left:auto; margin-right:auto; }
.w-180 { max-width: 180px; margin-left:auto; margin-right:auto; }
.w-190 { max-width: 190px; margin-left:auto; margin-right:auto; }
.w-200 { max-width: 200px; margin-left:auto; margin-right:auto; }
.w-210 { max-width: 210px; margin-left:auto; margin-right:auto; }
.w-220 { max-width: 220px; margin-left:auto; margin-right:auto; }
.w-225 { max-width: 225px; margin-left:auto; margin-right:auto; }
.w-230 { max-width: 230px; margin-left:auto; margin-right:auto; }
.w-240 { max-width: 240px; margin-left:auto; margin-right:auto; }
.w-250 { max-width: 250px; margin-left:auto; margin-right:auto; }
.w-260 { max-width: 260px; margin-left:auto; margin-right:auto; }
.w-270 { max-width: 270px; margin-left:auto; margin-right:auto; }
.w-275 { max-width: 275px; margin-left:auto; margin-right:auto; }
.w-280 { max-width: 280px; margin-left:auto; margin-right:auto; }
.w-290 { max-width: 290px; margin-left:auto; margin-right:auto; }
.w-300 { max-width: 300px; margin-left:auto; margin-right:auto; }
.w-310 { max-width: 310px; margin-left:auto; margin-right:auto; }
.w-320 { max-width: 320px; margin-left:auto; margin-right:auto; }
.w-325 { max-width: 325px; margin-left:auto; margin-right:auto; }
.w-330 { max-width: 330px; margin-left:auto; margin-right:auto; }
.w-340 { max-width: 340px; margin-left:auto; margin-right:auto; }
.w-350 { max-width: 350px; margin-left:auto; margin-right:auto; }
.w-360 { max-width: 360px; margin-left:auto; margin-right:auto; }
.w-370 { max-width: 370px; margin-left:auto; margin-right:auto; }
.w-375 { max-width: 375px; margin-left:auto; margin-right:auto; }
.w-380 { max-width: 380px; margin-left:auto; margin-right:auto; }
.w-390 { max-width: 390px; margin-left:auto; margin-right:auto; }
.w-400 { max-width: 400px; margin-left:auto; margin-right:auto; }
.w-410 { max-width: 410px; margin-left:auto; margin-right:auto; }
.w-420 { max-width: 420px; margin-left:auto; margin-right:auto; }
.w-425 { max-width: 425px; margin-left:auto; margin-right:auto; }
.w-430 { max-width: 430px; margin-left:auto; margin-right:auto; }
.w-440 { max-width: 440px; margin-left:auto; margin-right:auto; }
.w-450 { max-width: 450px; margin-left:auto; margin-right:auto; }
.w-460 { max-width: 460px; margin-left:auto; margin-right:auto; }
.w-470 { max-width: 470px; margin-left:auto; margin-right:auto; }
.w-475 { max-width: 475px; margin-left:auto; margin-right:auto; }
.w-480 { max-width: 480px; margin-left:auto; margin-right:auto; }
.w-490 { max-width: 490px; margin-left:auto; margin-right:auto; }
.w-500 { max-width: 500px; margin-left:auto; margin-right:auto; }
.w-520 { max-width: 520px; margin-left:auto; margin-right:auto; }
.w-525 { max-width: 525px; margin-left:auto; margin-right:auto; }
.w-530 { max-width: 530px; margin-left:auto; margin-right:auto; }
.w-540 { max-width: 540px; margin-left:auto; margin-right:auto; }
.w-550 { max-width: 550px; margin-left:auto; margin-right:auto; }
.w-560 { max-width: 560px; margin-left:auto; margin-right:auto; }
.w-570 { max-width: 570px; margin-left:auto; margin-right:auto; }
.w-575 { max-width: 575px; margin-left:auto; margin-right:auto; }
.w-580 { max-width: 580px; margin-left:auto; margin-right:auto; }
.w-590 { max-width: 590px; margin-left:auto; margin-right:auto; }
.w-600 { max-width: 600px; margin-left:auto; margin-right:auto; }
.w-610 { max-width: 610px; margin-left:auto; margin-right:auto; }
.w-620 { max-width: 620px; margin-left:auto; margin-right:auto; }
.w-630 { max-width: 630px; margin-left:auto; margin-right:auto; }
.w-640 { max-width: 640px; margin-left:auto; margin-right:auto; }
.w-650 { max-width: 650px; margin-left:auto; margin-right:auto; }
.w-0p { max-width: 0%; margin-left:auto; margin-right:auto; }
.w-05p { max-width: 5%; margin-left:auto; margin-right:auto; }
.w-10p { max-width: 10%; margin-left:auto; margin-right:auto; }
.w-11p { max-width: 11%; margin-left:auto; margin-right:auto; }
.w-12p { max-width: 12%; margin-left:auto; margin-right:auto; }
.w-15p { max-width: 15%; margin-left:auto; margin-right:auto; }
.w-16p { max-width: 16%; margin-left:auto; margin-right:auto; }
.w-17p { max-width: 17%; margin-left:auto; margin-right:auto; }
.w-20p { max-width: 20%; margin-left:auto; margin-right:auto; }
.w-22p { max-width: 22%; margin-left:auto; margin-right:auto; }
.w-25p { max-width: 25%; margin-left:auto; margin-right:auto; }
.w-35p { max-width: 35%; margin-left:auto; margin-right:auto; }
.w-40p { max-width: 40%; margin-left:auto; margin-right:auto; }
.w-45p { max-width: 45%; margin-left:auto; margin-right:auto; }
.w-50p { max-width: 50%; margin-left:auto; margin-right:auto; }
.w-55p { max-width: 55%; margin-left:auto; margin-right:auto; }
.w-60p { max-width: 60%; margin-left:auto; margin-right:auto; }
.w-65p { max-width: 65%; margin-left:auto; margin-right:auto; }
.w-70p { max-width: 70%; margin-left:auto; margin-right:auto; }
.w-75p { max-width: 75%; margin-left:auto; margin-right:auto; }
.w-80p { max-width: 80%; margin-left:auto; margin-right:auto; }
.w-85p { max-width: 85%; margin-left:auto; margin-right:auto; }
.w-90p { max-width: 90%; margin-left:auto; margin-right:auto; }
.w-95p { max-width: 95%; margin-left:auto; margin-right:auto; }
.w-100p { max-width: 100%; margin-left:auto; margin-right:auto; }
.w-33p
{ max-width: 33.333%; margin-left:auto; margin-right:auto; }
.w-66p
{ max-width: 66.667%; margin-left:auto; margin-right:auto; }
/* hard widths ================================= */
.w-0f { width: 0px; margin-left:auto; margin-right:auto; }
.w-5f { width: 5px; margin-left:auto; margin-right:auto; }
.w-10f { width: 10px; margin-left:auto; margin-right:auto; }
.w-20f { width: 20px; margin-left:auto; margin-right:auto; }
.w-25f { width: 25px; margin-left:auto; margin-right:auto; }
.w-30f { width: 30px; margin-left:auto; margin-right:auto; }
.w-40f { width: 40px; margin-left:auto; margin-right:auto; }
.w-50f { width: 50px; margin-left:auto; margin-right:auto; }
.w-60f { width: 60px; margin-left:auto; margin-right:auto; }
.w-70f { width: 70px; margin-left:auto; margin-right:auto; }
.w-75f { width: 75px; margin-left:auto; margin-right:auto; }
.w-80f { width: 80px; margin-left:auto; margin-right:auto; }
.w-90f { width: 90px; margin-left:auto; margin-right:auto; }
.w-100f { width: 100px; margin-left:auto; margin-right:auto; }
.w-110f { width: 110px; margin-left:auto; margin-right:auto; }
.w-120f { width: 120px; margin-left:auto; margin-right:auto; }
.w-125f { width: 125px; margin-left:auto; margin-right:auto; }
.w-130f { width: 130px; margin-left:auto; margin-right:auto; }
.w-140f { width: 140px; margin-left:auto; margin-right:auto; }
.w-150f { width: 150px; margin-left:auto; margin-right:auto; }
.w-160f { width: 160px; margin-left:auto; margin-right:auto; }
.w-170f { width: 170px; margin-left:auto; margin-right:auto; }
.w-175f { width: 175px; margin-left:auto; margin-right:auto; }
.w-180f { width: 180px; margin-left:auto; margin-right:auto; }
.w-190f { width: 190px; margin-left:auto; margin-right:auto; }
.w-200f { width: 200px; margin-left:auto; margin-right:auto; }
.w-210f { width: 210px; margin-left:auto; margin-right:auto; }
.w-220f { width: 220px; margin-left:auto; margin-right:auto; }
.w-225f { width: 225px; margin-left:auto; margin-right:auto; }
.w-230f { width: 230px; margin-left:auto; margin-right:auto; }
.w-240f { width: 240px; margin-left:auto; margin-right:auto; }
.w-250f { width: 250px; margin-left:auto; margin-right:auto; }
.w-260f { width: 260px; margin-left:auto; margin-right:auto; }
.w-270f { width: 270px; margin-left:auto; margin-right:auto; }
.w-275f { width: 275px; margin-left:auto; margin-right:auto; }
.w-280f { width: 280px; margin-left:auto; margin-right:auto; }
.w-290f { width: 290px; margin-left:auto; margin-right:auto; }
.w-300f { width: 300px; margin-left:auto; margin-right:auto; }
.w-310f { width: 310px; margin-left:auto; margin-right:auto; }
.w-320f { width: 320px; margin-left:auto; margin-right:auto; }
.w-325f { width: 325px; margin-left:auto; margin-right:auto; }
.w-330f { width: 330px; margin-left:auto; margin-right:auto; }
.w-340f { width: 340px; margin-left:auto; margin-right:auto; }
.w-350f { width: 350px; margin-left:auto; margin-right:auto; }
.w-360f { width: 360px; margin-left:auto; margin-right:auto; }
.w-370f { width: 370px; margin-left:auto; margin-right:auto; }
.w-375f { width: 375px; margin-left:auto; margin-right:auto; }
.w-380f { width: 380px; margin-left:auto; margin-right:auto; }
.w-390f { width: 390px; margin-left:auto; margin-right:auto; }
.w-400f { width: 400px; margin-left:auto; margin-right:auto; }
.w-410f { width: 410px; margin-left:auto; margin-right:auto; }
.w-420f { width: 420px; margin-left:auto; margin-right:auto; }
.w-425f { width: 425px; margin-left:auto; margin-right:auto; }
.w-430f { width: 430px; margin-left:auto; margin-right:auto; }
.w-440f { width: 440px; margin-left:auto; margin-right:auto; }
.w-450f { width: 450px; margin-left:auto; margin-right:auto; }
.w-460f { width: 460px; margin-left:auto; margin-right:auto; }
.w-470f { width: 470px; margin-left:auto; margin-right:auto; }
.w-475f { width: 475px; margin-left:auto; margin-right:auto; }
.w-480f { width: 480px; margin-left:auto; margin-right:auto; }
.w-490f { width: 490px; margin-left:auto; margin-right:auto; }
.w-500f { width: 500px; margin-left:auto; margin-right:auto; }
.w-520f { width: 520px; margin-left:auto; margin-right:auto; }
.w-525f { width: 525px; margin-left:auto; margin-right:auto; }
.w-530f { width: 530px; margin-left:auto; margin-right:auto; }
.w-540f { width: 540px; margin-left:auto; margin-right:auto; }
.w-550f { width: 550px; margin-left:auto; margin-right:auto; }
.w-560f { width: 560px; margin-left:auto; margin-right:auto; }
.w-570f { width: 570px; margin-left:auto; margin-right:auto; }
.w-575f { width: 575px; margin-left:auto; margin-right:auto; }
.w-580f { width: 580px; margin-left:auto; margin-right:auto; }
.w-590f { width: 590px; margin-left:auto; margin-right:auto; }
.w-600f { width: 600px; margin-left:auto; margin-right:auto; }
.w-610f { width: 610px; margin-left:auto; margin-right:auto; }
.w-620f { width: 620px; margin-left:auto; margin-right:auto; }
.w-630f { width: 630px; margin-left:auto; margin-right:auto; }
.w-640f { width: 640px; margin-left:auto; margin-right:auto; }
.w-650f { width: 650px; margin-left:auto; margin-right:auto; }
.w-0pf { width: 0%; margin-left:auto; margin-right:auto; }
.w-05pf { width: 5%; margin-left:auto; margin-right:auto; }
.w-10pf { width: 10%; margin-left:auto; margin-right:auto; }
.w-11pf { width: 11%; margin-left:auto; margin-right:auto; }
.w-12pf { width: 12%; margin-left:auto; margin-right:auto; }
.w-15pf { width: 15%; margin-left:auto; margin-right:auto; }
.w-16pf { width: 16%; margin-left:auto; margin-right:auto; }
.w-17pf { width: 17%; margin-left:auto; margin-right:auto; }
.w-20pf { width: 20%; margin-left:auto; margin-right:auto; }
.w-22pf { width: 22%; margin-left:auto; margin-right:auto; }
.w-25pf { width: 25%; margin-left:auto; margin-right:auto; }
.w-35pf { width: 35%; margin-left:auto; margin-right:auto; }
.w-40pf { width: 40%; margin-left:auto; margin-right:auto; }
.w-45pf { width: 45%; margin-left:auto; margin-right:auto; }
.w-50pf { width: 50%; margin-left:auto; margin-right:auto; }
.w-55pf { width: 55%; margin-left:auto; margin-right:auto; }
.w-60pf { width: 60%; margin-left:auto; margin-right:auto; }
.w-65pf { width: 65%; margin-left:auto; margin-right:auto; }
.w-70pf { width: 70%; margin-left:auto; margin-right:auto; }
.w-75pf { width: 75%; margin-left:auto; margin-right:auto; }
.w-80pf { width: 80%; margin-left:auto; margin-right:auto; }
.w-85pf { width: 85%; margin-left:auto; margin-right:auto; }
.w-90pf { width: 90%; margin-left:auto; margin-right:auto; }
.w-95pf { width: 95%; margin-left:auto; margin-right:auto; }
.w-100pf { width: 100%; margin-left:auto; margin-right:auto; }
.w-33pf { width: 33.333%; margin-left:auto; margin-right:auto; }
.w-66pf { width: 66.667%; margin-left:auto; margin-right:auto; }
A lot of this is pretty repetitive, like all the width specifications. But it is handy to have many useful widths pre-defined. Pre-defining useful css classes and then using them is the opposite of the way most web designers work. Most web designers make up new classes as the need arises, willy-nilly, with the result that you end up with dozens of redundant classes that all do the same thing, * or more likely, almost but not-quite the same thing. The end result is hundreds of classes overall, if not thousands. The css gets huge, until eventually the poor program that has to parse the whole mess crashes. The worst case of this is epubs ( which are really self-contained websites ) generated by the Calibre program. Oh my god!
* Did you notice I'm being redundant?
A benefit of pre-defining CSS and then sticking to it is that you end up with much more consistent formatting. Have you ever wondered why much of the internet looks like it was done by a third-grader? In fact, this is the way CSS was intended to be used, and most web designers are actually using it wrong!