CSS stands for Cascading Style Sheets. CSS is a separate language from HTML that allows you to override boring default web browser styles and make web pages look any way you want them to.

CSS describes the presentation of a web page, not the structure/content (HTML does that).

Separating structure and presentation makes changes to an entire site easy. It also increases accessibility, flexibility and reduces complexity, of websites.

CSS is typically placed in a separate file with a .css extension.

CSS uses a priority scheme to determine which style rules apply to an element. Style rules can override one another. Style rules that come later (in page loading) can override styles that come earlier.

W3C maintains the CSS standard. Current recommended version is 2.1, but CSS 3 is in draft form and is being adopted by web browsers quickly.

Including CSS: it’s best not to mix presentation and structure. Even though you can include CSS in HTML (inline), it’s better to do it through an included stylesheet file. This provides maximum accessibility, flexibility and simplicity.

An example style rule:

p {
color: red;
}

p = selector
color = property
red = value

Basic Selectors

type selector matches every instance of the element type specified

descendent selector matches elements nested inside other elements. HTML is structured like a tree, start at a large branch, work your way down.

ID selector matches a single element by it’s ID attribute

class selector matches a subset of elements based on their class attributes

IDs should be used for major site components that will only appear once on a page. Classes can be used many times, is good for multiple elements you want to apply the same styling to.

Other Selectors

pseudo class matches an element only when it’s in a specific state

• :first-child selects the first child in an element
• :link matches an anchor tag if it’s not yet been visited
• :hover selects elements being hovered by the user
• :active selects link being clicked by the user
• :focus good for improving accessibility for people who use keyboards to navigate webpages

child selector matches child elements of the specified parent element. example: ul > li
adjacent selector matches elements immediately preceded by a specified sibling element. example: h2 + p
attribute selectormatches element attributes based on attribute name and value. example: h2[class="foo"] (h2[class~="foo"] will match all h2s with class “foo”, even if more classes are listed. In other words: class="foo bar" and class="foo" will both be styled.

Exhibit A

Ted talk about by Salman Kahn: “Let’s use video to reinvent education”

(As I watched this video I thought “OMG, what if I had had a math class like they described, I might actually have LIKED math.” Imagine all of the kids who are steam-rolled by the current educational paradigm of lecture->homework->test->repeat. What if it were different, like Salman Kahn says it could be?)

Exhibit B

Online, video based, education platforms like linda.com, teamtreehouse.com, codecademy.com (and surely there are more niche examples) that circumvent the slow-to-change world of traditional universities and community colleges all together. We already know it doesn’t really matter where your bachelor degree is from, so long as you have one. Is this state just a stepping stone to a world where subject mastery, not traditional formal education, is the real, recognized advantage in the job market?

Exhibit C

Portfolio Working: an alternative concept to traditional employer working. Imagine the innovation that would be unleashed if fewer creative people were tied to employers. They would have the freedom to apply their energy to areas where they truly excel, working in loosely connected teams that evolve as needed. They are able to take risks far greater than organizations can. Such risks enhance the rate and degree of creative innovation.

What do these things have in common? I see them all as opportunities for people to come closer to realizing their full potential. How amazing is that?

Like a book, publishing a website is a complex process and often has many contributors. So how about joining me in the trend of the website colophon?

The myth that a single piece of software (ahem, Dreamweaver/Flash) affords the ability to make websites is still common. This is like thinking that owning a KitchenAid mixer makes you a great baker. Say the proud new mixer owner wants to make an angel food cake from scratch. Even with the fancy mixer to save her arm from all that egg white beating, and a recipe to guide her, the trial and error process—the experience—is unavoidable. Just what “stiff peaks” means is impossible to know until she has seen it for herself … and come out the other side with a proper angel food cake. The importance of keeping yolk out of the whites is not fully felt until an entire cup and a half of egg whites fails to beat up and must be thrown out.

So it is the same with websites (and all other crafts). While some tools may light the path, there is no magic bullet. You must wallow in the messiness of experience, trial and error, failure and incremental successes. You must first cut your teeth with HTML, CSS and alot of other stuff that feels completely foreign. Slowly, over-time, the connections are made, and you eventually understand deeply what it takes to build a website. Tools + Experience.

(Rose, this post is for you, as you are likely the only reader to actually “get” the angel food cake references

But, I hadn’t worked my way through the program myself. I always feel a bit uncomfortable recommending something I haven’t tried myself. I also like hearing fundamental concepts explained—you know, the kind of things you take for granted because you understand them on a level that is beyond words. Connecting that knowledge with language deepens the understanding and becomes an excellent tool for teaching and/or demonstrating expertise.

So, I watched a handful of videos today. Here are my notes:

HTML Introduction and History

• Markup language shapes text in a way that makes it easier to understand. It adds annotation, semantic meaning.
• HTML is a markup language that can be interpreted by web browsers. Other markup languages exist.
• Programming languages determine behavior, markup determines structure. (HTML is not a programming language)
• HTML tells browsers how to process various parts of a document: paragraphs, images, headers, etc.
• The internet is the system of connected computing hardware located all over the world. The World Wide Web is not the internet. The World Wide Web is just one particular use case of the internet. Other uses include: VoIP, gaming, apps
• Sir Tim Berners Lee invented HTML and the World Wide Web in the late ’80s. He was a physicist and contracter for CERN. He wanted to develop a better way of sharing documents. He created HTML by adding hyperlinking to an existing markup language. He also founded the W3C, the international organization that maintains the HTML specification and supports further development of it.

Learning HTML

• HTML/web design is fun because you can instantly see the results of your efforts in a browser
• no single technology or language enables the creation of websites, rather, a broad collection of technologies provide the pieces needed to build a complete website.
• HTML = Structure
• CSS = Presentation
• Javascript = Behavior
• To make a website, all we need is a text editor and a web browser. Every computer comes with a text editor.

Markup Element Highlights

I won’t bore you or myself with all the details of HTML tags covered in the videos, but here are a few nifty new things I learned.

• the technical name for <hr> and other elements that are self-contained, don’t require a closing tag, is void element.
• the cite attribute can be used on <blockquote> to include the source of the quote. example: <blockquote cite=”http://example.com”>
• <q> can be used for inline quotations and also accepts the cite attribute
• <abbr> is used on acronyms and you can add the expansion of the acronym by adding a title attribute. example: <abbr title=”Self-Contained Underwater Breathing Apparatus”>SCUBA</abbr>
• <address> is for addresses (duh) and if it’s parent is the <body> tag, it is considered the contact information for the entire page. If it is nested in a div, it is considered the contact information for the content around it, for example, a list of names with addresses. (I bet the use of <address> is really helpful for localized search engine rankings)
• <wbr> is optional whitespace. You can use it to indicate the best place for the browser to add a line break in a long word (or a url), but the line break appears only when needed! This is the equivalent of optional hyphen available in layout programs like Adobe InDesign. (I’ve previously longed for a tag like this, who knew it already existed!)

I wrote this post, not because I think you particularly care, but to serve as a reminder and reinforcer to me of this new direction.

Happy trails!

Some highlights, in bullet point fashion:

• Hired a part-time assistant/intern to help out, discovered the joy of sharing my knowledge with others and made an excellent friend in the process
• Taught a web design class that met twice a week for two hours with 18 students. Confronted and pondered the many challenges of higher education in today’s economy and culture. Confronted also my fears of public speaking and doing something less than perfect. Expect I will continue to uncover hidden gifts from this challenge.
• Managed and launched my first Drupal project.
• Fell out of the routine of daily yoga and journaling, regrettably.
• Struggled with and eventually accepted my horse’s career-ending injury. Realized that horses will play a much smaller part in my life moving forward, and that is ok.

… and more floating just below my consciousness.

The little web designer in me felt a little threatened when I first came to this page (Google is taking my clients!!!). I was happy that Big Web Designer stepped in quickly and recognized what a great opportunity this is for both local businesses and myself. First, and most important of all, small businesses are getting online! Second, Google is doing me a huge favor: getting the word out about the importance of a web presence, guiding and reassuring the nervous business owner as he registers his domain name, cautiously writes his first “About Us” page and goes live with his version 1.0 of his web presence. In time, he will tire of the limits of his free website (you always get what you pay for) and I will be happy to come to the rescue, building and improving on the foundation that Google helped him lay.