Paul Dynowski

CSS and the Art of Webpage Styling

The devil doesn't wear Prada, the devil uses absolute positioning

Nov 6, 2015

Welcome to this week's technical blog, all about CSS. In theory, I was supposed to select one of four questions to blog about, but, dammit, I learned all this stuff, so you're going to see me show it off. Here are some quick links to further down the page, should you wish to see one specific item: the box model, use of classes vs. IDs, positioning, and inline vs. inline-block.

What is the difference between margin, border, and padding?

Ah, the box model. Defining the simple way to style an HTML element since...(a quick Wikpedia search tells me) December 16, 1996, when the CSS1 recommendation was first adopted by the World Wide Web Consortium. So, let's take a look at this bad boy:

Now, let's break this image down a little. We can immediately see that, moving outward from the actual content of the element, the padding, border, and margin are, essentially, different layers that can be defined to change the look of an element. The padding and the margin are doomed to remain forever invisible, except for the effect that they have on the placement of elements on the page. The border, however, can be made gloriously visible, in any of many styles (solid, dashed, dotted, etc.). Now, let's play with these things a little. We'll start with a basic text-containing div, with visible border, like so:

Now, let's add a visible border, so we can see other changes more easily:

Now, add some padding (say, 10 pixels) to that div:

So, we can see that padding increases the space between the content of the element and the border of the element. In this case, we increased the padding equally around the content with the property "padding: 10px"

Next, and finally, we'll look at what happens when we add a margin to the base div. So, we're going to remove the padding, but add 20px of margin, instead.

So, we see what that has done to our super-fancy text div. The spacing all the way around the border has grown larger - the margin has moved the div down and to the right, and would have moved any elements below or to the right of the div further in that direction, clearing the margin of the element.

So, to make a long story short: (TOO LATE!): the content and the border are the (potentially) visible parts of an element. Padding controls the spacing between the content and the border. Margin controls the spacing between the element and another element. Remember, also, that all three of the properties can be controlled separately for each side of the element.

What are the best practices associated with using classes vs IDs?

So. Now we know a little bit about the box model of the elements. The question remains, then, how do we get the styling onto the elements. Generally, when you define an element in your HTML, you can add class or ID attributes to the tag. Then, instead of adding styling via the general tag, you can choose to use the class or ID to add a more specific styling to certain elements. IDs have a limitation, though: they can only be used once per webpage. This means, however, that if you apply styling to an ID, it is very specific - it will apply only to that single element. So, if you have several elements you wish to style in the same manner, you may wish to employ a class - if you apply styling to a class, any element tagged with that class will obtain that styling. To summarize: if you only need to use it once, throw it in an ID; if you'd like to be able to reuse the styling, make it a class.

What are the differences between relative, absolute, fixed, and static positioning?

Now you've got your elements, and you've got them styled just like you want. How can you make them go where you want them to? Positioning! So, first, a quick listing/definition of the types of positioning, followed by some code examples.

• Static

  - the most basic of the positioning types, static is the default. An element is positioned wherever the HTML interpreter thinks it should go within the flow of the elements. Any element that doesn't manually receive one of the following positioning types is statically positioned.

• Relative

  - this type of positioning allows you to move an element, defined from a base of the place where the element would have been if statically positioned.

• Absolute

  - the trickiest of the positioning methods, this defines the position relative to the closest manually positioned ancestor element. If there is no ancestor element that has been manually positioned, absolute positioning is relative to the body of the page. As you may have been able to tell by the subtitle to this article, absolute positioning is not my favorite.

• Fixed

  - conceptually, I find this the simplest of the defined positioning types. It sticks the element wherever you tell it to in the viewing window, and the element doesn't stays in one place, regardless of the motion of the page it's on.

What does it mean to display inline vs using inline block?

And finally, we get to some general display options for your HTML elements. The major options are block, inline, and the bastard child of the two, inline-block.

• Block

  - block elements take up the full width of their defined space, and do not allow any further elements to the right of them on the page.

• Inline

  - inline elements take up only the specific space that they require, and allow elements to display to the right of them on the page. Importantly, padding and margin only work side-to-side with inline elements - they won't interrupt the general flow of the text.

• Inline-block

  - So, this unholy chimera of a display style allows elements to display to the right of it on the page, but it will allow actual dimensions to be set on the element.

And, that, finally, thankfully, is what I've learned about that in the past week. I hope you've found this entertaining and informative, or at the very least informative. See you next week.