css dollhouse

Web standards

‘Web standards’ refers to how the world wide web is defined to work by the W3C, an international community of collaborators working together — independent of any one corporate entity or government. It’s also the term for an approach to web design that uses their non-proprietary set of rules and techniques, including: html (hypertext markup language), which structures written content and makes it linkable; css (cascading style sheets), a markup language with its own syntax that can shape and lay out the html content in sophisticated ways; and javascript, another interrelated language which can be used to dynamically integrate interactive effects. These things, and more, can be used to create web sites and web apps.

css gives life

Html was created as a form of writing that can be embedded with the ability to connect in real time to other content. To do this, all of the writing is encoded with tags, categorizing the information in a structural hierarchy. This allows it to function in specific ways and be discoverable in web browsers. This marked up writing, in the context of web authorship and development, is considered content.  

On the other hand, as Jay Hofmann summarizes on css-tricks.com, css was invented to be able to style and shape html content. It exists in a presentational capacity. It’s the flesh on the bones… the paint on the canvas. It’s a major part of what brings the content experience to life. To test this separation of roles, picture all shoes arriving in plain boxes with basic writing on them. The lack of differentiation would make it hard to distinguish one from the next, even with the information spelled out clearly. Designers, in particular, know that there is content in the story told through visual design decisions. If there wasn’t, visual culture in any capacity would be very generic, like the shoe box example. But, for technical purposes in the world of web standards, content (html) and presentation (css) are considered separate, yet interrelated. Html works on a very basic level without css, but is boring — difficult to view/read, even — in many conditions. Css gives form to html. It can’t exist on its own and is meaningless without html. But it is bossy. It can command the html to do, behave, and appear in certain ways. The role of JavaScript in this mix is to integrate more complex interactions, such as variable content, and user-triggered interactions. The focus of this site is on the use of design principles in css.

html structure & nesting

All html elements describe the type of content something is, but there are two broad categories of html elements. Some of them distinguish different types of visible content from others (tags for heading levels, paragraphs, links, and images, for example). Other elements (tags for article, section, division/div, and navigation, for example) have the job of bundling other elements together, becoming containers for them. This is nesting. Like Russian Matroyshka dolls, this chunking of information into nested groupings allows us to control the placement and relationship of different elements, or groups of elements, on a page. Container elements are considered ‘parent’ elements, and elements within containing elements are considered ‘child’ elements. Aside from being contained by other elements, child elements inherit many style settings of their parent element, creating opportunities for styling efficiency. Kevin Powell describes nesting well in his video, “Nesting HTML Elements.”

The visual behavior of this structural system causes elements to automatically appear in vertical chunks down a page, similar to pressing the return key when typing. This is called, ‘normal flow.’ To get elements to do anything other than this default behavior — such as appear side-by-side in some way — requires css.

the box model & spacing

Of all the descriptions of the box model that exist, I think Patrick Griffiths, author of HTML Dog explains it best: “Every element on a web page is surrounded by a force field — a simple, multi-layered box that can be manipulated to create sophisticated effects.” Looking closer at his reference that seemingly points to magic sorcery, we can understand that all searchable content in a web page is “marked up” by being placed within tags. Each piece of this marked up content is called an element. This is where the box comes in. The “shape” of these elements is rectangluar; for example, if I put a background color on  the subheading of this section, directly above, we can see that the text is all actually in a container (hover over or tap on one to see it’s containing box).

There is very awkward spacing on elements, by default, so a designer can utilize padding (an expandable space between the content and it’s border) to create cushions of space inside containers, and margins (an expandable space space outside of an element’s rectangular container) to create distance between other, neighboring elements and their edges. Borders are invisible by default, but can be scripted to be seen, like the lines under each paragraph on this page.

elasticity: fluid layout and flexible sizing units

Unlike print media, web media has fluidity and elasticity. To start with, content will fill any available space given to it in a browser, regardless of whether or not that page is displayed full width on a cinema display or a narrow phone. To control the proportions of things and aid readability, we can size elements fluidly in relation to the presentational conditions of the device they’re on. In the world of responsive and intrinsic web design, relative measurement units and techniques that favor proportions that are friendly to changing device conditions should primarily be used. Some of these units are relative and can shrink/expand (such as % — a percentage of available width in a space), or are related to other units (such as ems, a unit that can behave within a typographic scale of sizes). Absolute units of measure (inflexible units) include pixels (px), which should be used intentionally, versus as a default starting point for sizing. This explanation of css sizing units by Jess Mitchell, “CSS Units Explained,” is a great overview of the range of options to use in web design.  

customization: classes & IDs

The tags that can be used to create html elements are finite in number. When more style variety is needed than the standard tags can provide, designers can customize them, making them specific to individual elements, or a number of elements. This is accomplished by assigning identifiers called classes and/or IDs.

What are classes and IDs? First consider a basic tag, like a tag for a paragraph ( <p> Hello. </p> ). If you want to style all paragraphs on a site to look and behave the exact same way, you just style the standard p tag once with css. However, if you want some paragraphs across a site to look more differentiated than others (such as lead-in paragraphs in editorial design), you can name a class for the lead-in paragraphs that has different styles than regular paragraphs, then apply the special class to the lead-in paragraphs. This allows them to retain the correct html mark-up for browsers to find (<p>), but also lets you have the visual variety you need for clearer communication. IDs function the same way. The difference between classes and IDs is that classes can be used repeatedly on a page; whereas IDs can be used one time only on a page. A good use case for an ID would be if a page had two forms of navigation, and each needed their own ID to be in different places on a page with different styling attributes

In sum, classes can be used by css to talk to categories of things, whereas IDs can be used by css to talk to one-of-a-kind things on a page. Using animals as an example: dogs are a broad species (like a standard, broadly applicable tag); breeds are dogs with specific, shared traits that can be recognized and called by category/type (classes); and individual dogs are identifiable by name (IDs).