Creative Computing

Index of /

Week 4

vibes

This Week

HTML Review

Download this template to get started: intro-to-css.zip.

File structure:

tiny folders

Using Images

Use relative file paths to link to images. From our index.html file, we specify that we want to go into the images folder, and link to a file called image.gif:

tiny path

<img src="images/image.gif">

Intro to CSS

CSS stands for Cascading Style Sheet. It is a separate language that allows us to add style, create complex layouts, and apply behaviors and animations to our HTML elements.

Including CSS

To add custom styles to our HTML documents, we create a new file, called main.css

tiny css folders

... and we link to this CSS file from our HTML document via the link element.

<link rel="stylesheet" type="text/css" href="css/main.css">

The styles in main.css will apply to every page that links to it in the document <head>. This allows you to maintain consistency across all your pages.

Targeting HTML Elements

You can target HTML elements by their tag names, just as we have done with the body tag. In CSS, we have property names, and property values.

background: orange;

For example, background is a property name. It defines the property of the HTML element we wish to address. orange is a property value. We specify the color or style we'd like to associate with background.

There are many CSS properties we can apply to various HTML elements, and they all have various effects and implications for style and layout. To get started, you might explore the following properties:

Background Images & Colors

background-color
background-image
background-size

Typography

color
font-family
font-size
letter-spacing
line-height

Borders

border-color
border-width
border-style

Margins & Padding

margin
padding

To learn more about each property, you can do a Google search. Type "CSS font-family" or "CSS background-color" or "CSS letter-spacing". In other words: CSS + [property name]. You can also try more general searches, such as: "CSS typography" or "CSS image effects" or "CSS animation". W3Schools is also a good resource for basic information.

Play around with where you add your styles. Note what happens when you apply a CSS property to the body vs. to just the p (paragraph) tag.

Assignment

DUE WEEK 5

  1. Read & Review. Download the updated template from our in-class demo (intro-to-css). Open the entire folder in Sublime Text and read through the index.html file, including all of the comments.

  2. Create a beautiful, clearly structured, single-page archive of your 25 Frames project. Once you are finished, upload your project to your server and paste a link into the class Google Doc.