Once upon a time, when the web was young and HTML was new, each web page was its own self-contained piece of content. All of the content and formatting that was required for that page was contained on the page itself in the HTML code, and interactive ideas such as JavaScript were mere ideas and not practice. This worked well at first, but then the day came when someone needed to redesign the look of their website. Perhaps colors needed to be changed or a new logo used. Regardless, the whole site had to change, and that meant changing every single page on the site. And no one—literally no one—wants to do that twice.
So the brains involved in creating web standards created a separation of sorts. HTML would govern the actual organization and markup of the content, while a new standard, CSS (Cascading Style Sheets), would provide all of the styling, formatting, layout, and visual information needed to display the content properly. Now the HTML could stay the same, and designers could deploy a new CSS to completely redesign a site by only changing a single file.
If you’re not involved in day-to-day web design, though, does CSS matter? Absolutely. Many sites and software packages, including Church360° Unite, provide the opportunity for users to use custom CSS rules to brand their site more effectively. While there are limits to any system, a working knowledge of CSS can help you make more efficient use of the tools you already have, even if you’re not quite ready to move your office to Starbucks and talk about full-stack web development.
CSS Selectors
The first thing you need to know about any CSS statement is that it consists of two primary parts: a selector, which tells the browser what elements to style; and one or more declarations, which determine what styling gets applied. Each selector is followed by a pair of curly braces “{” and “}”, which indicate the declarations that belong to that selector. (More on declarations in a moment . . .)
Selectors are easy, at least on the surface. If you would like to format <p> tags, your selector is simply “p” (without the quotes). Formatting <h2> tags? Selector is “h2”. Want to set the background for the entire <body> tag? “body” is your friend.
But what if you don’t want to change every <p> tag at once? What if you only want those <p class="funQuote"> to be formatted differently? Then we use the CSS dot notation to indicate “everything with this class name.” For example, the class “funQuote” above would be selected with “.funQuote”. Any time you have a number of pieces of content that should be sharing formatting or styling, consider adding a class to make them easier to select. Resist the urge to name your classes after the styling applied, though! <p class="brightPink"> sounds like a good idea now, but when your branding changes and “.brightPink” suddenly means lime green text, it’s not as maintainable. Consider instead using the function of the piece as your class, such as “AccentColorText” or “PrimaryCopy”. Your maintainability will go up dramatically!
CSS also provides a means to format only a very specific piece of content by using its ID attribute. <p class="funQuote" id="topBannerQuote"> will receive all of the formatting from “p”, “.funQuote”, and the ID selector “#topBannerQuote”. (The # symbol indicates we’re looking to match the rule on an ID attribute instead of a class or HTML tag.) This is especially useful when we’re looking to format a piece of content that’s not going to have a similar piece on the same page. Headers, menus, footers, and so forth all work very well as IDs and enable you to narrowly focus your formatting on those specific items.
There are a number of pseudo-elements that can be added on to the ones we’ve discussed. “a:visited” for example, will format <a> tags that the user has previously visited (and are cached by the browser), typically with a slightly different color of text. You can learn more about the different pseudo-elements at https://www.w3schools.com/css/css_pseudo_elements.asp.
There are a handful of other CSS selector options, including (most helpfully) media queries for different screen sizes and formats for printing and screen readers for the visually impaired. You can learn more about those at https://www.w3schools.com/css/css3_mediaqueries.asp.
CSS Declarations
Once we’ve identified and selected the pieces we’d like to format, we actually need to create some rules to format them. A CSS declaration block is typically in the format of “<style name>: <value>;”. As an example, “background-color: #ffffff;” will make the background of the element(s) you’ve selected white. (#ffffff is a way of expressing white as a color. It’s the values for red, blue, and green in the color you’re selecting. See https://en.wikipedia.org/wiki/Web_colors for some more examples.) “margin-top: 10px;” will provide a 10-pixel margin above the element(s) you’re selecting. There are far too many CSS properties to be able to dive into all of them here, but https://www.w3schools.com/css/default.asp contains some exceptionally helpful guides and playgrounds where you can work to test out your CSS ideas.
CSS Specificity
Remember earlier when we had <p class="funQuote" id="topBannerQuote"> as our selector? What happens when we have this stylesheet?
.funquote {
color: #ffff00; //This is a purple font color.
background-color: #000; //A shorter way to write #000000, or pitch-black background.
}
#topBannerQuote {
color: #0000ff; //This is bright green. You should never do this.
}
The background color is easy. It’ll go #000000 because that’s the only rule that applies to that CSS property. But the font color? What happens when an element has two separate values that both could apply to the exact same element?
In general, the more specific selector wins. In this case, the ID selector is more specific, so the background will be black from .funQuote, but the text color will become bright green from #topBannerQuote and the .funQuote color declaration will be overridden. The best practice is to tune your selectors so that they format the content you want them to and, ideally, only that content.
Sometimes, though, there’s some boilerplate CSS that you’re not able to change. Maybe it’s built in to your WordPress template or it comes with the system you’re using in a way that you can’t get around. If you REALLY need a rule to take effect no matter what, use the “!important;” modifier.
.funquote {
color: #ffff00 !important; //This is a purple font color.
background-color: #000; //A shorter way to write #000000, or pitch-black background.
}
#topBannerQuote {
color: #0000ff; //This is bright green. You should never do this.
}
This time around the text will be purple on black, because the !important modifier ensures that the color rule is not overridden by the more specific ID-based rule. Note that !important modifiers can only be overridden by other !important declarations.
Where to Learn More
That’s a whirlwind tour of CSS rules and the bare basics of how they work. If you’re interested in learning more, consider taking some of the content at https://www.w3schools.com/css/default.asp. If you’re the sort who learns better from a textbook than a website, consider Head First HTML and CSS by Elisabeth Robson and Eric Freeman. It’s a great, brain-friendly book to get you started with your own HTML and CSS projects.
Subscribe to the blog to receive notifications about more content like this.
