Today’s class:
- I’ll check to make sure you have several pages of html
- I’ll introduce CSS
Introducing CSS
So far this semester, we have worked with basic html, learning how to code up information. Today we will shift gears and work with CSS, or cascading style-sheets, to arrange and style that information. The power of CSS is that it allows us to make a change to a single document (a .css file) that affects the layout/appearance of an infinite number of .html pages.
Structural HTML
In order to maximize our .css file’s ability to alter our .html, we’ll need to add some structural .html tags to our document. In HTML 4 we would have done this with the div tag. In HTML 5, we’ll do this with the article and the section tag.
Page Layout
Now that we have added some semantic, structural tags to our .html, we can begin to adjust layout and positioning (Robbins chapters 15 and 16).
- A quick fixed layout (p. 374, working w/ a grid)
- A quick fluid layout (p. 377)
Note: however you design the layout of your page, you will need to have at least two structural elements on every page of your .html: a header and a footer.
I can’t talk about layout and design very long without calling attention to the CSS Zen Garden. To call attention to a few interesting layouts:
If we don’t want text at the edge of our semantic/structural boxes, then we need to adjust margins and padding (Robbins 305).
Typography
We can change how we format fonts (size, font-families, etc). See Robbins 225.
I am going to supplement Robbins a bit by using Google Web Fonts. This gives us access to a wide array of fonts, but also requires we add code to our .html (so that a user’s web browser knows where to find the font that we identify in our .css).
Background Color and Background Images
Here’s where things can start getting fun.
Project One Rubric
Draft of a rubric:
- Image quality
- Links that work
- HTML is W3C compliant (it validates, or if it doesn’t validate, there are minor errors)
- Every .html page shares one .css sheet
- Every .html page has at least a header and a footer
- Uses a Web Font
- Uses a .css reset
- Thought-provoking, non-trivial, juxtapositions
- Beyond quotation, offers some kind of understanding of Ulmer (either in the project, or in an introduction/preface, or in an afterword, or in an about page)
- Uses color strategically
- Demonstrates the ability to position images and includes alt tags
- Thinks about and executes layout
- Upload to USF server space
Homework
For homework I’ll ask you to create two stylesheets for your .html pages. The first should be what Robbins calls a CSS Reset (see p. 427). This is a sheet that turns off all the default margins, padding, borders, etc. for a page so that you can be sure you are designing from scratch. Note that Robbins provides a link to Eric Meyer’s default css reset page that you can copy and paste.
Then start designing your own .css page for your project. Think about layout: do you want multiple pages or one longer layout? Think about typography. Think about your header and footer. Think about whether you want every page to have its own unique background image (this isn’t too hard–you just give each page a unique article id… I can explain this in class on Tuesday if people are interested).
