Above:(work in progress–I’m not done yet… now I have 6 errors in my html) transformation of a website going from simple html, to CSS—simple layout and background colors in boxes, to incorporation of googlefonts and patterns—as planned in my style tile)

CSS is the hero behind html. Hypertext Markup Language originated from the need to index research. The hyperlinks carrying the reader to other sources of related material. CSS stands for Cascading Style Sheets. It allows the simple text to have background images, colors, and layout. In that regard, CSS complicates your html code. This makes it perform differently depending on the user’s computer. A web developer should have a Mac and a Windows set-up and be able to look at websites in different browsers. If you have an Adobe ID, try their browser lab.

In yesterday’s lecture, Erik Fadiman went over CSS rules. There are a few categories: tag, class, ID and compound. These sound complicated and intimidating as much as the phrase “paragraph styles” intimidated me when we were talking about InDesign. These categories the specificity in the style system you are creating when you design a piece. I think that Erik has a better explanation of these at his website.

Class is surprisingly more flexible than it’s equivalent in InDesign. It designates traits (that you choose, for example, red and italic) and it modifies what you apply it to. If you don’t specify more than those other traits are left the same without having to create a new “style.” This can be used multiple times and spans tags.

Tags are more specific. The CSS rules redefine existing html tags such as h1, p, etc.

If there’s only one instance of what you are styling (ex. One very special button), then use #ID.

#Compound is special because it’s like nested styles. You can get very specific as to what you what. It’s indicated by <a> (an a tag.) You should use a tags for most styling. (It’s easier to do, in my experience).

The nuances of CSS rules are like learning about chemistry. There’s a pattern but many exceptions and the only way to learn is by rote memorization.  In Adobe Dreamweaver, the interface isn’t as elegant as other design programs by Adobe. For example the way to align text in boxes is to make the line height the same height as the box (which is all measured in pixels). And displaying a text element as a box allows you more control over the trying to use it as an inline element.

I was intrigued to know that one can design a website without photoshop but instead using code. Coders have an immense confidence about them. Why? Because what they don’t know they can find easily. Coders have made it easy for other coders with code generators like this one. My instructor demonstrated how easy it is to look up an effect you want and its corresponding html. Simple, indeed. Those horrible gradients that emphasized buttons on websites in the 90s, remember those? Get some for your website here!

Subtlety is key. And remember as designers, it’s up to you to view templates and variants, understand their bones and build something of your own on top to make it special.

(Earlier Post Relating to This Project)