In the bad old days of the web, users had to specify the formatting for every page and item on the page in the HTML tag. This worked, but it led to a lot of repeated code, and it made changing your site’s look or design an absolute nightmare. (In fairness, designing a site was a bit of a nightmare, so it evened out.)
Essentially the early web made the mistake of mixing content and formatting into a single file. In good programming practice, content should be separate from display and both should be separate from behavior or interaction. (More on that part when we hit Javascript.)
The Solution
That’s where CSS came in. Short for “Cascading Style Sheet”, CSS allowed site designers to separate their content (HTML) from the way it would be displayed (CSS), and even to have different displays depending on the device being used. In fact, the same HTML could look wildly different depending on the style sheet used, as the CSS Zen Garden project aptly demonstrated.
Additionally, because a single CSS file could be used by any number of HTML files, a well written site could be completely redesigned just by updating a single CSS file, and the changes would cascade through all the pages of the site.
CSS Selectors
A CSS file consists of a number of CSS selectors, which define a part or parts of a web page and the rules that apply to those selectors. We’ll start by understanding what selectors can do.
The simplest type of selector is the HTML tag selector. Simply put, this applies its rules to every matching tag on the site. So a “p” selector would define the formatting for every paragraph tag on the site, as well as any child elements, including spans, etc. This is most often seen when formatting the <body> tag to define the base text colors, fonts, backgrounds, etc.
More useful are class selectors. By adding a class to your HTML element (such as <p class=”announcement”>), you can use the class name preceded by a dot to select all elements of that class. In this case, we’d use “.announcement” to format our announcement. Remember, “In CSS, dots have class.”
If you’re really trying to hone in on a specific element, though, you can assign it an id and select it that way. So you might, for example have a <ul id=”mainNavigation”> that lists the main links on your page. You could then select it using the hash symbol, like this: “#mainNavigation”. Apparently “In CSS, hash doesn’t have class, but it does have Id.”
There are, of course, many other ways of selecting elements in CSS, but these will do for a start. For more advanced selectors, see the W3Schools tutorials.
Adding Some Rules
Once you have your selector, it’s time to apply some rules. Rules go inside curly braces, “{“ and “}”. There are CSS rules for pretty much any sort of formatting you could want to do, but the trick is knowing the right keyword to use. Most are pretty intuitive, such as “background-color:” or “font-size:”, but some are less so, such as the vague “color:” and the obscure “font-variant-ligatures:”, which I don’t think I’ve ever used. For a full list, again, W3Schools is a great place to start.
Each rule has a set of valid values, which go after the “:”. You’ll have to experiment a bit to get the exact values you want, but there’s a lot of power here and you’re not likely to break much, so experiment a bit on your test copy of your website. You do have a test copy of your website, right?
A Couple of Examples
So let’s say that we wanted to create the world’s ugliest, least user friendly website. We could just go sign up for Geocities, but it’s far more fun to use CSS to make our own. We’ll go with a bright green background and some nice white text for “ease” of reading. In CSS that looks like:
body {
background-color: #00ff00;
color: #ffffff;
}
No truly hideous site would be complete without the abuse of fonts, so we’ll set the font family to attempt to using Comic Sans:
body {
font-family: "Comic Sans MS", “Comic Sans”, cursive, sans-serif
}
This attempts to use “Comic Sans MS” if it’s on the user’s machine, then looks for “Comic Sans”, then falls back to a generic cursive font if not, and finally fails to a simple sans-serif font. Notice that we reused the body selector. In a real development environment, we’d combine those into a single CSS selector with three rules.
Finally, let’s add a heading and see what happens if we play with the text directions:
h1 {
text-direction: rtl;
}
This should ensure that no one ever visits our site ever again. (All we need is a marquee, a blink tag and an autoplaying video and we’ll have committed every design sin on one page.)
Want to try a terrible site? Try it yourself! (click "Run")
Conclusion
That’s a whimsical example, but hopefully you get the ideas behind how CSS functions enough to begin making small changes to your templates or websites. By editing code that already exists you can begin to learn how the different elements interact without having to build the entire foundation from the ground up. It’s easier to hang a door than to build a whole house, so start by making changes to something that already exists.
In the following column, we’ll look at Javascript, which gives your pages interactivity and function. Remember we’re working through ADDIE as we go, and we’re deep in the design process at this point.
- Analyze
- Defining Your Audience and Message
- Design
- Choosing a Platform
- Understanding Basic HTML, CSS and JavaScript
- Finding Your Way Around Navigation
- Picking Good Colors
- Develop
- Writing Good Code
- Writing Good Content
- Implements
- Testing Your Site and Why It Matters
- Getting Noticed
- Evaluate
- Analyzing Your Analytics
- Feeding the Beast
See you soon for future articles!
Learn more about the use of technology in your church by subscribing to this blog!
