Now we need to set up a section in our stylesheet for design treatment rules.
images
inside the folder containing your other files. Upload your image files to it.style.css
, below the STANDARD STYLING
section, but above our media queries, add in our color scheme for background colors:/*------------------REUSABLE GRAPHIC TREATMENTS -------------------*/ /*main background colorscheme*/ .bg-main{ background-color: #222; } .bg-secondary{ background-color: #666; } .bg-tertiary{ background-color: #999; } .bg-light1{ background-color: #eee; } .bg-light2{ background-color: #ddd; } .bg-dark1{ background-color: #000; } .bg-dark2{ background-color: #444; }
.grd-vt-main{ background: linear-gradient(top, #333, #000); } .grd-vt-secondary{ background: linear-gradient(top, #555, #222); } .grd-vt-tertiary{ background: linear-gradient(top, #ddd, #999); }
/*borders*/ .bdr{ border: 1px solid; } /*apply thickness*/ .bdr-2px{ border: 2px solid; } /*pick a side*/ .bdr-top{ border-left:none; border-right: none; border-bottom: none; } .bdr-left{ border-top:none; border-right: none; border-bottom: none; } .bdr-right{ border-left:none; border-top: none; border-bottom: none; } .bdr-bottom{ border-left:none; border-right: none; border-top: none; } /*leverage selectors for border colors -be sure to apply your rules in this order*/ .bg-main.bdr{ border-color: #aaa; } .bg-secondary.bdr{ border-color: #999; } .bg-tertiary.bdr{ border-color: #eee; }
/*rounded corners*/ .rnd border-radius: 5px; } /*only two corners*/ .rnd-top{ border-radius: 5px 5px 0 0; } .rnd-left{ border-radius: 5px 0 0 5px; } .rnd-right{ border-radius: 0 5px 5px 0; } .rnd-bottom{ border-radius: 0 0 5px 5px; }
... /*box-shadows*/ .shdw-centered{ box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); } .shdw-offset{ box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); }
We added styling for borders, gradients, rounded corners, and box shadows.
Keeping in mind our "object-oriented" CSS strategy, these rules have been added, not because we'll definitely use them, but in case we need to use them. Just as the layout-core.css
sheet freed us to open up our index.html
file and simply apply class rules to our HTML elements to get our layout going, we can now go in and start applying our color scheme and graphic embellishments to our layout. And of course, if we want to change our mind about colors or gradients or borders, it's easy to update in one or two places in the stylesheet and our entire site will evenly update.
Keeping WordPress in mind
In the next chapter, we'll get into "WordPress-ifying" this layout. Keep in mind that WordPress can spit out quite a few classes of its own, and it likes to take advantage of applying multiple classes to HTML objects as well. The good news is, the majority of these classes are such that objects can be identified and offered special styling. We'll come back to this as we work through creating our theme in the next two chapters.