This isn’t the first time I’ve tinkered with a website or tweaked a WordPress theme, but as usual it feels like it. While I do remember a few things from previous style-sheet adventures, as with all things tech the horizon is constantly receding, and what once seemed like bedrock knowledge has become obscured by an ever-evolving feature set.
In the face of such inevitable changes the only options are to stay constantly up-to-date or effectively start from scratch each time. Because nobody in their right mind would stay up-to-date on CSS if it wasn’t paying the bills, it’s probably safe to assume that any CSS hacking you intend to do is driven more by your desire to have things just so than it is by a love of code. You want things to look the way you want them to look, but because money is an object you either have to suffer the indignity of off-the-rack blogging or make those changes yourself.
I feel your pain. In order to prevent you from feeling some of the pangs and jolts I’ve experienced, however, I thought I would pass along one tip I’ve never forgotten, which has saved me more time and trouble than the sum of all the CSS knowledge I’ve gleaned from websites, books and kind strangers who took pity on me. For all I know this is a common practice even among CSS professionals, but if that’s the case it’s considered so obvious that nobody mentions it when offering tips to absolute beginners. I stumbled upon it myself by accident and only belatedly recognized it as a means of preventing the kind of frustration and disorientation that can, in more advanced cases, lead to a seventy-two hour psych hold. Sure, you laugh — or at least I hope you do — but don’t laugh too hard because CSS can perplex almost anyone.
THE MOST IMPORTANT CSS TIP FOR BEGINNERS EVER
The biggest problem with CSS, as with any language, is that it’s abstract. The good news is that unlike the modern tech trend of turning helpful words into obscure icons known only to a few acolytes, the abstraction inherent in CSS is a function of its utility, not some hostile elitist design agenda. So remember that when you’re ready to pull your hair out or bang your head on your desk. What you’re struggling with is simple in theory but often becomes insanely complex in practice.
In order to reveal exactly what’s going on when you fiddle with CSS it helps to be able to see what you’re doing. And I mean that literally. In CSS it’s far too easy to make a tiny change in one place that has unintended consequences in other locations. Being able to see exactly where changes are taking place can be critical, particularly if you have no idea what you’re doing in the first place.
To begin, open this link in a new browser tab or window and take a moment to familiarize yourself with its contents. The page you’re looking at is on the W3Schools‘ web site, which you will become intimately familiar with and thankful for if you do any CSS tweaking. This particular page shows how to combine multiple changes to the border property of an element using shorthand so you don’t have to write out each individual declaration on a separate line.
Can you find the line of text that accomplishes that feat in the panel on the left? Take a look — and don’t you dare let your eyes drift down to the answer immediately below in bold.
Yes: you found it! It’s the line that reads border:5px solid red;
Take a good look at that line and note the following. After the word ‘border’ there is a colon. After the word ‘red’ there is a semi-colon that ends the line. Between the colon and the semi-colon are three properties that define the border of the element (in this case a line of text) that is displayed in the right-hand panel. That’s CSS in a nutshell. Unlike most CSS commands, however, borders have the unique and awesome ability to not only change what you see, but to define the area you’re acting on.
To see why this is important I want you to change 5px to 1px in the left-hand panel on the W3Schools page, then click the button at the top of the screen that reads Submit Code. Doing so will output the change you made to the panel on the right, where you will see the border change from a width of 5 pixels (px) to 1 pixel. When your amazement wanes go ahead and change the number of pixels to other values such as 3 or 10 or even 100. No matter what number you choose a border of that thickness will be drawn around the element it’s assigned to. (I tried 10000 and it still worked, albeit in an absurdly impractical way.)
When you’re done changing the size of the border reset the value to 1 and take another look at that line. In fact, take a look at it here until it is burned into your consciousness:
border:1px solid red;
If you learn nothing else about CSS the one thing you must remember is how to write that line. Because once you know how to do that you can use that single line of CSS to reveal more useful information about what’s happening on the web pages you’re working on than you can in any other way. In fact, you should go back to the W3Schools page right now and type that single line ten times under the one that’s already there. Better yet, do it fifty times so it’s committed to muscle memory, too.
HOW THE CSS BORDER PROPERTY WILL SAVE YOU
So far all we’ve done is change the size of a border around a single line of text. But that’s not what the full CSS rule on the left says. What it actually says is that for any paragraph (p) that same border should be added. We’re only seeing one border because there’s only one paragraph defined below (see if you can find it), but the simple ability to draw a border is not what makes CSS so powerful. What makes it powerful is that you can make one change to CSS that affects all paragraphs on your website.
To see what I mean, go back to the W3Schools page. If you’re one of the very few truly dedicated readers who wrote border:1px solid red multiple times, delete all of the lines you added leaving only the original line. Next, look down through the text in the left panel until you find this line:
<p>This is some text in a paragraph.</p>
Copy that entire line, including the tags at each end, then paste the copy under the original line two or three times. When you’re done gleefully pressing Ctrl-V, click the Submit Code button again and behold. Not only will each line/paragraph you added on the left show up in the right panel, but each one will have a 1-pixel red border courtesy of a single CSS rule.
That’s why CSS is so powerful. Unfortunately, there’s a dark side to that power and sooner or later when you tinker with CSS you’re going to experience moments of jet-black horror. Because not only can you change all paragraphs with a single well-intentioned CSS rule, you can also change all kinds of things you didn’t intend to change, many of which may not even be apparent. Between the obscurity of some properties, the way properties interact, the hierarchy that properties follow and the precedence of CSS rules it’s entirely possible that one innocent change in one place may wreak havoc somewhere else. And by entirely possible I mean this will absolutely happen to you over and over again with certainty no matter how you try to prevent it.
Take a look again at the W3Schools panel on the left, where the border property is specified. Just above and below that line you’ll see curly brackets, and above the top curly bracket you’ll see the letter p, like this:
p
{
border:1px solid red;
}
That’s an entire CSS rule (or rule set), and no matter how complex such statements become that’s the basic structure they all have. The letter p in this case stands for paragraph, and it acts as a selector — which is why it’s called a selector. (If you want to learn more about CSS syntax click here.) In this case the selector tells your CSS style sheet to do whatever is in the braces (the declaration block) to every paragraph in your document that is not otherwise being told what to do by another CSS rule. How do you know which paragraphs will and won’t be affected by changes you make? Well, in this example it’s pretty obvious because it’s the only defined rule.
In the real world, however, unless you’re intimately familiar with both CSS and your specific style sheet, you have exactly zero chance of predicting what will and won’t happen when you make a change. The best you can hope for is to be able to see where changes take place so you can visually determine if those changes cause problems — which you now know how to do by adding a border to any rule you’re modifying. To see what I mean, copy the following lines of CSS and paste them into the W3Schools page in place of the four-line CSS rule we just talked about:
p.mystery {
margin: 30px 0px 5px;
margin: 3rem 0rem 0.5rem;
width: 60px;
float: right;
}
p.anomaly {
margin: 30px 0px 40px;
margin: 3rem 0rem 4rem;
padding: 20px 10px 0px 0px;
padding: 2rem 1rem 0rem 0rem;
display: inline;
}
p.oddity {
padding: 60px 20px 0px 0px;
padding: 6rem 2rem 0rem 0rem;
float: left;
}
When you’re done all those lines of CSS should be between the <style> and </style> tags at the top of the left panel. Next, copy the following three lines of text and paste them into the left panel in place of whatever text you currently have between the <body> and </body> tags:
<p class="oddity">This is some text in a paragraph.</p>
<p class="anomaly">This is some text in a paragraph.</p>
<p class="mystery">This is some text in a paragraph.</p>
Now, before you click the button you’re itching to click, take a moment and look at the CSS and the lines of text you just added and try to imagine what the output is going to look like. It will probably seem confusing even if you have some CSS experience but you may be able to make an educated guess. When you’re ready, press Submit Code and see how close you were.
CSS MYSTERIES REVEALED
Because of the width of your display and other factors there may be some variance between what you see and what I see, but odds are that you’ve now got three identical lines of text being displayed in three different ways on your screen. Unfortunately, not only can’t you tell which line is being affected by which CSS rule, until you dig into and understand the CSS driving the behavior of those sentences you’re not going to know why they look the way they do. You can see them, but you have no ability to understand them.
Or at least you didn’t until you realized that the CSS border property can also be used as a diagnostic tool. So grab the trusty border declaration you memorized earlier and add it to the end of one of the CSS rules in the panel on the left. It doesn’t matter which one — just pick one and type border:1px solid red; on the next line, being sure not to remove or overwrite the final curly bracket. (Don’t worry about any formatting differences: just make sure the line you type ends with a semi-colon.) When you’re done, click Submit Code again and behold: you can now see exactly which sentence is being affected by that rule, and how that rule is making the sentence behave.
Amazing, no? We could do the same thing with the other lines/paragraphs, but that would present us with another problem because then we’d have three red borders and once again it wouldn’t be clear which border belonged to which CSS rule. Fortunately we can simply replace ‘red’ with ‘blue’ or ‘green’ or ‘black’ for the other paragraphs/rules and that will differentiate them. So go ahead: try adding different colored borders to the other two lines/paragraphs. (If you have a hard time discerning colors you can increase the number of pixels to make the border wider. If you’re too free-spirited to be constrained by such banal choices, knock yourself out.)
You can do a lot more with borders, including add them for simple decoration, but you can’t do anything more important. I slap a border on just about anything I’m tinkering with because it helps me understand what I’m seeing on the affected pages, and more often than not reveals things I never would have suspected. The more sophisticated your theme the more likely it is that the designer used some nifty tricks, which may or may not also be classified as hacks, meaning you stand literally no chance of understanding why your pages are behaving the way they are unless you can see what’s happening. Adding a border can give you a fighting chance, and help you learn about CSS that much faster.
While you can usually add a 1px border without any problem, from time to time a slim border may itself affect how your pages display. For that reason, once you’ve identified the elements you’re tinkering with it’s a good idea to turn the border off again to see if anything moves, shifts, or bursts into flame. It probably won’t, but it’s worth double-checking to be sure. As to how you can turn a border declaration on and off with ease, we’ll get to that and a few more CSS tips in the next post.
— Mark Barrett
Very article.Thanks
You’re welcome. 🙂