Assignment 1: CSS 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 and other helpful rules

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

result in browser:

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:

result in browser:

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.

CSS code:

Webfonts

Download the web-fonts folder and copy the "fonts" folder as well as the "fonts.css" file into your local site folder into the main directory ("lastname").

We need to link the "fonts.css" to the HTML document. For this you can simple duplicate the line of code we created earlier and change it to:

HTML code:

the "../../" means that the link is going out of two directories ("recipe-a" and "lastname-1_1" folders ) to the "fonts.css" file. The fonts and fonts.css files don't change so all of your HTML documents can link to the same files (no need to duplicate it).

When you're done your HTML head section should look like this:

CSS code:

Above: The "fonts.css" file (which is part of the downloaded folder) contains a number of CSS Rules (shown is just one of them) that connect/link the font files with so-called font-family declarations. In the end this means that you can display an HTML element in Proxima Nova as soon as you assign the font-family declaration to an element. There are 3 font files per font (".eot", ".woff" and ".ttf"). which is necessary to make it work on all the different browsers (Safari, Chrome, Firefox, Explorer etc.)

Read more about Webfonts in this article.

CSS Properties for this assignment

Below a collection of CSS properties that we could use for assignment 1_1. Of course there are more but I think that's all we need for now. The declarations' values (2% etc.) are just examples

CSS code:

You can find a full list of properties on the w3schools.com site.

Example CSS rule with some of those properties from above:

CSS code: