FEWD 19 @ GA

CSS Basics Oct. 7, 2013

Agenda

For today’s class, we will dive right into the relationship between HTML and CSS. While HTML is a great tool for describing the structure of the content on the page, CSS is great for instructing the browser how we want that content to be presented.

HTML and CSS are both extremely powerful, so it is easy to learn the basics but difficult to master all the nuances. With that in mind, we’ll start by working together to use the two in concert, and transition to working in pairs. After this class, your individual assignments will be to work with CSS to create styles for your own About Me pages.

Starter Files

Nested Selectors (download)
Box Model (download)
Wendy Bite (download) (markup preview) (design preview)

Before Class

Please take a look at the HTML Element Reference provided by the Mozilla Developer Network. MDN is a well-regarded resource for web developers, but its documentation can be sprawling and overly-detailed, especially for beginners. The HTML Element reference is more concise than some of the documentation, and can be very helpful in learning about the various tags. Don’t worry about digging in too deeply, especially if some of the descriptions of the tags and their attributes seem confusing. It will simply be helpful to start getting familiar with looking at this type of documentation at this stage.

As a starting point, try looking into the following elements:

If you have some extra time, try looking up some newer HTML elements, such as:

If you have even more time, have a look at the HTML5 Reference provided by the W3C. Try looking up the same HTML elements (tags) listed above.

The W3C, or World Wide Web Consortium, is the governing body for most web standards, especially HTML and CSS. They are responsible for maintaining the specifications for these languages, and having a standards body (with all its ups and downs) is part of what makes the web on the one hand enormously successful, and on the other hand sometimes frustrating to author.