Under the Hood with WordPress, Part 4: Using CSS
This is Part 4 of a 6-part series on diving “under the hood” with WordPress. Today, we’re covering the last part of CSS (Cascading Stylesheets). We’ll go over some specific examples that you’ll see often as you look through a WordPress theme.
So, after yesterday’s CSS lesson is your head spinning yet? The positioning piece of CSS is definitely confusing, but distilling it down to “more specific = higher position” will usually serve you well. Today, we’ll switch gears and talk about some of the common CSS attributes you’ll see “in the wild”. Not selectors, mind you – those are going to be different for every theme – but the rules themselves.
Dimension Attributes
Before we get into the nuts and bolts of this, there’s one last thing we need to cover: the box model. The box model is the math involved in determining a container’s dimensions on a web page.
The Box Model Equation
The actual equation is:
Outline + Margin + Border + Padding + Width
If you have a box that’s 550px wide with 10px of margin on both sides, 10px of padding, and a 1px border…
0px outline + (10px * 2) margin + (1px * 2) border + (10px * 2) padding + 550px width = 592px total
Outline is seldom used, but it’s useful to know that it does play a part in the equation, especially when you’re trying to figure out why things aren’t fitting in their proper place.
Box-Sizing
div.post { box-sizing: border-box; }
If you want to over-ride the box model, you can use “box-sizing”. This forces the element’s width to be the absolute width, and the rest of the elements actually subtract from the width instead of adding to it.
550px width + 10px margin = 550px width
The actual width is 530px, but it adds the margin on to add up to 550px instead of adding the margin to the width outright.
Border
div.post { border: 1px solid black; }
Adds a border to an element. The first property is the width. The second is the style of line you wish to use (the most popular being solid, dashed or dotted). The final property is the color – either a named color, a hex-code, or a RGB value will be accepted.
Margin
div.post { margin: 20px; }
div.post { margin: 20px auto; }
div.post { margin: 20px 10px 5px; }
div.post { margin: 1px 2px 3px 4px; }
Adds space to the outside of an element (as opposed to padding, which adds it to the inside). This can either bet set as a numerical value, a percentage value, or “auto”, which relegates the remaining margin equally to “center” the object.
Margin can be written any of the ways mentioned above. CSS numbers are written in the order of top, right, bottom, and left. The first code above applies the same number to all sides. The second applies the values to top-bottom and then left-right (20px top-bottom, automatic margin on left and right). The third code applies separate values to the top and bottom, but applies the middle value to the left and right (so, 10px left and right). The final code applies separate values to each side.
Padding
div.post { padding: 20px; }
div.post { padding: 20px 10px; }
div.post { padding: 20px 10px 5px; }
div.post { padding: 1px 2px 3px 4px; }
Padding works very similarly to margin, but applies the space on the inside of the element instead of the outside. The main difference is that you cannot set padding “automatically”, however, in all other aspects the sizing works the same.
Width / Height
div.post { width: 50%; height: 25px; }
Sets the width and height of the container. This can be either numeric, a percentage, or the “auto” value.
Min- and Max-Width / Min- and Max-Height
div.post{ width: 1000px; min-width: 100%; }
Min- and max-width (and height) set the absolute thresholds for containers resizing. A container with a min- dimension set will never resize to lower than that dimension, while a container with a max- dimension will never resize to wider than the specific number given. Can be a numeric value, a percentage, or “none” – meaning that there is no value set.
This works well with “responsive” designs. A mobile site will have a much smaller width than a typical desktop site, so having the above code will cause the width under 1000px to fall in at 100% wide.
Design Attributes
Background
background: white url(image.png) repeat center center fixed;
The ‘background’ attribute above is actually a short-cut to a number of other background-related attributes. In order:
- background-color – sets the color of the element’s background. Can be a hex-code, RGB value, or a named color.
- background-image – sets the URL of the background image, if there is one.
- background-repeat – does the background image tile (repeat), tile horizontally (repeat-x), tile vertically (repeat-y) or not tile at all (no-repeat)
- background-position – a 2-part value determining where the background image’s point of origin is. Can either be a numerical value, a percentage value, or a keyword (left, center, right || top, center, bottom). The first value is the horizontal position; the second value is the vertical position.
- background-attachment: does the background scroll with the content (scroll) or is it fixed in place (fixed).
By stringing these together, you can write a shorter CSS rule that accomplishes the work of the 5 other attributes.
Font Attributes
Font-Family
h1 { font-family: "Arial", Helvetica, sans-serif; }
Changes the font of an element. Fonts can be “degraded” – if a user doesn’t have a font, it’ll check down the list for the next available font. The final declaration should be generic to allow the system to pick the most appropriate font.
Font-Size
h1 { font-size: 1.35 em; }
Sets the font size. Can either be set in pixels or ems for best result.
Font-Style
h1 { font-style: italic }
There’s an official definition for this, but to put it easily this allows you set the font to either be “normal” or “italic”.
Font-Weight
h1 { font-weight: bold }
Allows you to set the font weight of the text in the element. Most of the time, you can use “bold”, but more modern fonts will actually have font weights varying from 100 to 900.
Color
h1 { color: #666 }
Sets the font color. This can either be a hex-code, a named color, or a RGB value.
Text-Align
h1 { text-align: center}
Allows you to align the text. You can align the text either ‘right’, ‘center’, ‘left’, or ‘justify’ the text on both margins.
Text-Decoration
h1 { text-decoration: underline}
I would be very wary of adding underlines to things that are not hyperlinks, in order to avoid confusing people, but you can take the underlines away if you have another way of differentiating the links from other content. Values accepted: “none” to remove a decoration, or “underline”, “overline”, or “line-through” to add a decoration.
Text-Transform
h1 { text-transform: uppercase; }
This attribute allows you to transform the text in whatever way you wish. This way, you don’t have to type text in all caps, but you can format it as such on the site. You can format text to either be “uppercase”, “lowercase”, or to “capitalize” the first letter of each word.
a: link states (link, visited, hover, active)
Hyperlinks have their own set of attributes that you can use to fully customize their appearance.
a:link
The :link state is it’s resting state. Before a link has been clicked or hovered, it has the rules defined in this attribute
a:hover
As you move your cursor over the hyperlink you can allow the :hover attributes to take over
a:active
When you physically click on a link, the :active attributes kick in.
a:visited
If a link has been previously visited, you can apply certain characteristics to let it stand out from the other “resting” links on a page.
Layout Attributes
Display
div.post { display: none; }
Sets the display characteristics of an element. You can make an element disappear from view (“none”), act as a block element (with defined layout attributes such as width and height (“block”), or act as an inline element that can sit inside of other elements (“inline”).
Position
div.post { position: relative; top: 10px; }
The position attribute allows you to move elements around the page. The values accepted:
- absolute: specifies a place on the page to position the element.
- relative: specify positioning from the initial point-of-origin
- fixed: will position an element on the screen to remain there even if the window is scrolled
- static: will place the element back in its initial place
Odd Behavior: “Relative” Absolute Positioning
One thing worth mentioning: you can actually have the “absolute” positioning place an element relative to another element. Basically, if you have a box, and you want an image to be in the top right corner of the box:
<div class="box">
<img src="image.jpg">
</div>
<style>
.box{ position: relative; }
.box img { position: absolute; top: 0; right: 0; }
</style>
The image will be in the top right corner of the box because the box has a “relative” position set.
Float / Clear
The final CSS attributes are the ones that give even the most experienced developers nightmares – floating elements. However, once mastered, I think that this is the single attribute that can make a website go from “good” to “amazing”.
<div class="content">Content</div> <div class="sidebar">Sidebar</div> <br class="clear" />
<style>
.content{ float: left; width: 66%; }
.sidebar{ float: right; width: 33%; }
.clear{ clear:both; }
</style>
Floating an element causes the nearby elements after it to “wrap” around the element. By floating an element, we can position content next to each other – even going so far as to create any number of columns if we need to.
Clearing is the act of putting a hard break on floating elements, so that any elements below the “cleared” element will show up in the proper order – under the element.
One rule of thumb you should remember: if you want to keep weird things from happening, then always clear any floating elements you have – and I would bargain that this is the single cause of many new developer’s headaches. By creating a clearing break below any floated columns, we ensure that any content that follows ends up in its proper place.