Week 5 2/28-3/6 External CSS

Content

CSS2 external style sheet with images.

CSS EXTERNAL STYLE SHEETS

Here is the Powerpoint file introducing CSS external style sheet. I have also attached two short videos – one is created by me and the other is from LinkedIn Learning (lyndia), both on the topics of CSS external style sheets, how to create and link the CSS external style sheets to a .html file.

Create an external CSS style sheet with Dreamweaver

Attach a CSS external style sheet with Dreamweaver

INSERT, CONTROL AND STYLE IMAGES

Working with images on web pages has been a challenge. Please watch these videos carefully. Pay special attention to how to insert the image, link the image file, and align the image using CSS.

Place image, float and margin with CSS

Control image properties with CSS – float $ margin

Style images

Use background images

ASSIGNMENT 5

6 points
due on 3/7/2022

Revise your week4.html page from last week. Add an external CSS style to this page. Here is an example (just for the format).

You may add other elements as deemed necessary. However, the following elements are required for your week5.html page:

  • table centered (0.5 points);
  • a border around all the cells for the table and no cell space (0.5 points);
  • an image in one of the paragraphs aligned left or right (1 point);
  • the inserted image has 10px or 5px padding, but banner has no padding (1 point). 
  • words in the paragraph wrap nicely around the image (1 point);
  • give the content cell a 10px padding for the left and right (0.5 points);
  • an external CSS style sheet linked to this week5.html file (0.5 point);
  • styles in this external style sheet include .class and #id selector types (1 point).

After it is done, please link this week5.html page to your week2.html. I will check your assignment through our class webpage link.

***** IMPORTANT*****

You may create this week5.html page by copying and pasting week4.html page first and make necessary changes (including change the file name).

When you create this external CSS file, you can see it on the tab open in Dreamweaver. When you save your week5.html file with this .css file as you click File and Save all, this .css file will be automatically saved in the same folder as your week5.html on your local computer hard drive. When you upload your week5.html file to your server, please make sure you upload this .css file to your server, too, in the same folder where your week5.html locates.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

Set your Twitter account name in your settings to use the TwitterBar Section.
Skip to toolbar