Monday night the user group meetup welcomed Kory McDow, owner and designer at Certified Square, to talk about HTML, CSS, and what the heck to do with them on the web. We had almost 70 people show up from our rough head count. One of the largest crowds yet, which was awesome!

Kory started out by laying the foundations for how the web works. None of the technology is any good, though, without content. Websites are based on content and you have to have it before you do anything else. Once you have your content in place it’s presented to the browser through HTML and CSS. Using Kory’s analogy, HTML is like a “bare house.” It defines the structure. CSS, on the other hand, is what gives the house its style. It’s the paint, color, flooring style, and more.

HTML is composed of various structural tags. There’s the p tag for content, h1 through h6 for headings, a for links, ul and li for lists, and finally img for images. These tags are globally applicable so HTML looks the same to developers all across the world. Those tags set the structure for your page.

With the structure in place you can dive in to making it look how you want. A plain HTML page will still display without CSS but adding styles gives your page “flavor.” Here’s an example of what CSS looks like:

p {
color: #f08;
font-size: 16px;
}

That can look intimidating at first but as Kory stepped through it step-by-step what you have is the CSS telling your browser, “For all paragraphs set the color of text to hot pink and the size of text to 16 pixels.” You can define as many properties (font-size, color, margins, padding, etc.) as you like per selector (p, h1, img, etc.).

Some other great tips from Kory’s presentation included:

• Using Chrome’s built-in web inspector is great for modifying CSS on the fly
  • Hit Apple + option + I to launch the tool. Or, you can hover over the page element (e.g. the heading you want to change) and right click. Then select “Inspect Element.”
• Themes can be edited on WordPress.com through the CSS editor.
• colourlovers.com is a good resource for colo(u)rs.
• It is important to know what selectors take precedent over other selectors otherwise changes won’t be respected. This guide can help. 🙂