Module3

Week 3 Module: Style and CSS Part I

Learning Objectives

  • To learn to work with different style options for formatting your elements
  • To prepare you for the next big topic in web design: CSS (cascading style sheets)
  • To learn and research about web design concepts
  • To learn to work with different style options for formatting your elements using CSS
  • To learn and research about web design concepts

Notes
Style—This week’s module focuses on style options: how to format your html elements NOT through using tags like <strong>, <i>, <b>, etc. but through using the style attributes. What’s the difference between tags and the style attributes? Well, while some tags can directly format your text, style attributes give you a lot more options, many of which can’t be done with tags. 

CSS—CSS (cascading style sheets) defines the styles of different elements in html. It was invented to address a shortcoming of html code, especially its early versions: html didn’t provide options to style documents other than some limited formatting tags like <b>,<i>, etc. CSS was invented just to address this problem. CSS is easy to use, its syntax is simple, and it works with all kinds of browsers. There’re three different ways to apply CSS styles: inline (local level), internal (document level), and external (global level). CSS is especially important if you want to format your webpage stylishly and effectively.

Task 1–Learning HTML Style and Cascading Style Sheets (CSS) 

  1. Go to W3school’s HTML tutorial and go through the following sections:
    • HTML CSS
  2. Go to W3school’s CSS tutorial and go through the following sections:
    CSS Home
    CSS Introduction
    CSS Syntax
    CSS How to
  3. Try building a new test page that will use an external CSS style sheet. 
  4. Build a CSS file. This file must have the suffix .css in its file name and should be uploaded to your account. Try to include the following style definitions in this CSS file:
    • A font color other than black or white for the headings
    • A background color other than white for the entire page
    • A sans serif typeface, such as Arial or Helvetica, for the paragraphs
    • A font color other than black or white for the paragraphs
    • A border of at least 1 pixel for all the paragraphs
    • A margin of 50 pixels for all the paragraphs
    • A font color other than black or white for the title “Module 3” using the id selector
  5. In your html code in the test page, call this CSS file so that the style definitions will apply to the elements on the page. This means, your html page (not the CSS file) should contain enough elements so that the CSS style definitions can be applied. 
  6. Note: This CSS style sheet and the html test page are solely for your practice purposes only. They will not be part of what is graded for the module. However, mastering html style and CSS is very important and useful if you’re really interested in web design. 

Task 2–Complete Your Reading Responses for Chapters 5 and 6 of  Web Style Guide

  1. Read Web Style Guide Chapters 5 and 6 and complete your reading responses. Please note that you need to complete a separate reading response for each chapter. 
  2. Post your reading responses to the Reading Response page. 

Task 3–Complete Your Website Analysis Assignment

  1. Read my instructions on the Website Analysis assignment. 
  2. Create a new page and name it “Website Analysis.”
  3. Post your analysis to the Website Analysis page you just created. 
  4. Link your Website Analysis page to your English 3120 Homepage. 

Task 4–Start Working on Your Final Project

  1. Think about how you want to design the homepage of your online portfolio. 
  2. Think about what you learned through the tagline analysis, focal point analysis, and website analysis that you did and see how you can apply the concepts to your portfolio homepage.
  3. The elements on your portfolio homepage should be able to give your readers a good snapshot of your professional credentials, such as your name, your contact info, the type of job you’re applying for, a summary of your major qualifications, a brief bio/description of yourself, a good tagline that projects a theme/image about your professional credentials, etc.