Assignment 1: CSS Setup and Webfonts

Create and Link your CSS Files

We'll be mostly working with the CSS code. The HTML markup can basically stay the same for all the layouts. Important to understand is the separation between content (HTML) and design (CSS). The same exact content can be designed in many, many different ways. One classic example is the CSS Zen Garden project where people could submit their CSS code responsible for styling the same exact HTML.

First thing we do is create a CSS file and then link it to our first HTML page. CSS can be embedded inside the HTML document as well but for we'll be working with an external, separate style sheet file (the most common usage). Inside Dreamweaver select FILE > NEW for the top menu, select CSS and hit CREATE. Save this blank CSS file right away. Call it "recipe-a.css" and save it into the same folder as your first HTML file. Dreamweaver can help you link the HTML to the CSS. For this open the HTML and select TOOLS > CSS > ATTACH STYLE SHEET. Browse to the CSS file you just created, make sure "Add as Link" is checked and hit OK.

Inside the HEAD section of your HTML, you can now find a new line of code that should look like this:

HTML code:

If the CSS is linked correctly you can see changes in the layout as soon as you create CSS rules. Dreamweaver has the SPLIT view option where you can see code and browser preview ("Live") simultaneously, which is a very helpful feature.

CSS Reset

If you look at your first HTML document the result should look similar to the example below.

As you can see the browser automatically applies styles to the tags we added: The h1 tag results in the biggest type size, the h2 in a slightly smaller headline etc. Bullet points were applied to the list, Paragraph and other elements have certain spaces applied, and so on. This makes a lot of sense since the HTML page alone should be legible and structured without having to apply CSS styles.

But for our purpose it can be confusing. We want full control over sizes, spaces and extra graphic elements. A way to achieve this is to apply a so called "CSS Reset".

These a a number of CSS declaration applied simultaneously to several HTML elements. The result in the browser should look like this now:

All browser styles have been reset so we can start from scratch with the CSS/design.

Next the to the Reset there are other helpful CSS rules that make coding the layout easier. I'll explain in detail what they mean but for now copy the whole section below and paste it into the top of your CSS file before you get started adding your own rules below that.

Google Webfonts

Instructions coming soon