This is Part 3 of a 6-part series on diving “under the hood” with WordPress. Today, we’re covering CSS, known as “Cascading Stylesheets”. Using CSS, you can modify any property of an HTML tag and have the web look exactly like you see fit! Other posts in this series:
Now that we understand the basics of HTML, it’s time to take that standardized, boring content and do some amazing things with it. Just using HTML tags isn’t enough – we have to take that content and give it form and style. This is done with the use of CSS – Cascading Stylesheets.
CSS: Cascading Stylesheets
CSS is, in short, the language that defines structure, style, and layout on a website. If you want text to wrap, change color, size, or format of any piece of content, the easiest way is through CSS.
Why use another language?
There was a time in the history of the web when HTML tags actually carried style data as attributes. You could open nearly any website and see something like this:
<body bgcolor="#000000" background="../../img/bg_stars.jpg" text="#ff0000" link="#ff4c4c" vlink="#ff4c4c" alink="#ff4c4c" marginwidth="0" marginheight="0"> <font size="+2">You've made it: Jam Central Station, the central depository for all things Space Jam. From the best seats in the house, you can peruse the production notes, find out about the filmmakers, check out the theatrical trailer, and look at a bunch of photos from the film.</font> </body>
By the way, this site is the actual site for the movie Space Jam, and that site’s still available online – go and revel in the nostalgia!
See all of the extra attributes? That’s how style information was transmitted to the browser. As the web matured – and syndication of content through RSS became necessary and more popular – a way was needed to separate the form (design + color) and the function (content + functionality) of the website. CSS was invented to strip HTML tags of their data and allow content to be syndicated and styled on a per-site basis.
CSS: Selectors, Declarations, Properties, and Values.
A CSS tag looks like this:
h1{ color: blue; font-size: 2em; }
h1.class { color: red;}
h1#id {color: green; }
Let’s break the tags down piece by piece.
Selectors
The ‘h1’ section is called a selector. It’s used to determine which tags will be targeted by the “rule changes” provided by CSS. Selectors are commonly identified by one of three characteristics: the tag itself, a class, or an ID.
If the tag is by itself, that means every instance of that tag will be changed. A class (h1.class) can be defined that will only affect tags marked with that class. If a style is going to be repeated throughout a document (such as a “post” class on a blog), classes allow you to apply a uniform style to the specific elements. An ID (h1.id) is a single element on a page identified by a unique ID. Only one ID can be on a page.
More advanced selectors can be found in this article.
Declarations
A declaration is a pair of attributes assigned to a selector, and contains a property and a value. The property is what CSS rule we’re trying to change. In the above example, the ‘color’ property is being changed. The ‘value’ is what we’re telling the rule to actually do. Above, we’re changing the ‘color’ to ‘blue’.
The CSS Order of Operations
So, why are the stylesheets “cascading”? Because there’s a specific order that the styles follow as they’re loaded. The order of loading is as follows:
- Browser defined styles – either default styles rendered by the browser. This also includes any styles overridden at the browser level by the user (accessibility scripts fall into this category).
- External Stylesheets – these are stylesheets loaded by the <link> tag in the header. If there are two or more stylesheets loaded, the styles are loaded from top to bottom, with styles loaded later taking precedence and overwriting earlier styles.
- Internal Stylesheets – these styles are loaded in the page itself with the <style>…</style> tag in the document.
- Inline styles – while not recommended, it’s sometimes necessary to load styles in the tag themselves using the style=”” attribute.
The !important Exception
Regardless of where in the order you place it, you can add !important to a CSS tag to force it to render above all styles. If multiple tags have the !important attribute, rules will be followed as normal.
And Then it Gets Confusing…
Unfortunately within these levels it starts to get a bit confusing. The actual selectors are important in deciding which order rules are applied to an HTML tag. There’s actually a mathematical formula to determine this order, called the “style precedence” equation.
- Element, Pseudo Element: d = 1 – (0,0,0,1)
- Class, Pseudo class, Attribute: c = 1 – (0,0,1,0)
- Id: b = 1 – (0,1,0,0)
- Inline Style: a = 1 – (1,0,0,0)
In English: these four values can be added to by using specific selectors. The higher the total number, the higher precedence is given, and higher rules are applied.
A (somewhat) easy example would be this:
h1 {color: blue}
h1.title {color: red}
.post h1.title {color: green}
.post h1#post-title {color: purple}
div.post h1#post-title {color: black;}
div.post h1#post-title:hover {color: pink}
The values:
- h1 = 1 (0,0,0,1)
- h1.title = 2 (0,0,1,1)
- .post h1.title = 3 (0,0,2,1)
- .post h1#post-title = 3 (0,1,1,1)
- div.post h1#post-title = 4 (0,1,1,2)
- div.post h1#post-title:hover = 5 (0,1,1,3)
Basically, as you add styles and/or classes, you get more specific in targeting the elements. This allows elements to over-write generic tags with specific rules.
We’re going to do a bonus post because this one was so long. We’re going to spend one more day on CSS – the next post will be some of the popular CSS declarations and how we can use them in WordPress.