Create the css for a website

Assignment Help Programming Languages

Reference no: EM13760324

Purpose: You are going to learn how to create the CSS for a website to match a certain look
and feel.

Requirements: To complete this project you will write and submit 2 files: one HTML document
and one CSS document.

Create a file called lab1.html which contains the HTML of a blog page. Create another file
lab1.css which is linked from lab1.html , and which contains all the style formatting of the
document. These files must match the specification given below.

These files will be created as an ASCII file (i.e. a plain text document with a .html extension).
You may create them with any editor (notepad/wordpad/MS Word) but you must ensure that
they are text files. In other words, they should not contain anything except ASCII characters
(including HTML tags/CSS rules and content).

This time YOU MAY USE A WYSIWYG EDITOR! This editor can be used to generate your
HTML document. All style must be applied in the file lab1.css, which must be coded "by
hand" without the use of any automated CSS code-generation tool.

The purpose of this lab is to create a blog page for one of your interests. These interests may
be fictional, if you like. Be as creative as you wish, although points are not awarded for this. J
The page will contain some placeholder blog entries (i.e. all static content).
Each blog entry is dated and has a title (heading) and one or more paragraphs of body text. For
the date, use a <time> tag.

Each blog entry also has an associated image. (Link to images available on the web, so that
you need not include any image files with your lab submission. Remember...you are only
submitting 2 files...an HTML file and a CSS file!)

The page also contains a box of links to your Friends in a separate column to the left of the blog
entries. (Your friends may also be fictional if you wish. In this example, mine are.)
The page is labeled with a title and subtitle. In the example page given, the title is "Adam's
Metal Journal" and the subtitle is "A Playlist For Every Occasion.

Match the colors and layout of this example as best you can. The emphasis is on layout, so
using the colors black, lightblue, lightgreen, purple, and blue is acceptable. Note that the
background color of the entire page is blue.

Abide by the following style specifications for the page:
• There should be divs around every boxed element, allowing you to style the entire
enclosing virtual box. This includes the page title box, the friends box, each blog entry,
and the white box surrounding this content. These divs should be given appropriate
classes to match the corresponding styles.
• The <time> tag for the blog date should be enclosed within its own span which can be
individually styled.
• The title is a <h1> and the subtitle is a <h2> in the lightblue title box. These headings
should be aligned to the right of that section of the page. The subtitle should have 0.8em
font.
• The text of each blog entry should be widened so that it fills the entire width of its section
(i.e. "fully justified").
• The title of each blog entry is an <h2>.
• The images should float on the right side of a blog entry next to the surrounding text.
They must stay within the bounds of the enclosing box, and not bleed into other content.
• The white containing box should have a solid, black, 4-px thick border.
• The blog boxes should have have a solid, black, 2-px thick border.
• The title box should have a solid, black, 1-px thick border.
• The friends box should have a <h1> for "Friends" and a <ul> with hyperlink list items to
each friend. The hyperlinks should be underlined and change color to red when mousedover
(using the hover pseudoclass).
• The friends box is a left-aligned independent div. The friends box should have a solid,
black, 4-px thick border.
• Set all padding/margins to best match the example above.
• Use the universal selector (*) so that if you hover over ANY element, it is
highlighted yellow. (This is a bit trickier than it may seem...you will need to
exclude certain elements from this behavior, like the html and body tag for
instance.)

BE SURE TO USE THE UNIVERSAL SELECTOR! OTHER METHODS WILL
LOSE CREDIT.

Submission: Prior to the deadline upload your file lab1.html and lab1.css to moodle. Do
not submit any other documents!

Grade Breakdown:

10%: Submission instructions followed to the letter (1 html and 1 css file submitted, named as
stated above, with no contents except plain-text HTML and CSS respectively)

10%: CSS has proper formatting and comments where appropriate

20%: Web page renders properly in Mozilla Firefox 17+ as well as Internet Explorer 9+

30%: Web page contains all required content, visually organized and styled according to spec

30%: CSS rules and HTML tags abide by specifications given.

Reference no: EM13760324

Questions Cloud

Trends toward western-style consumption : China and India have demonstrated trends toward Western-style consumption over the last decade. Given the emphasis on the youth market in the US over the last 60 years (since the baby boom), what can you suggest for marketers in these youth-orient..

Audit professional organizations : Visit a Web site for one of the audit professional organizations.

Breadth and depth of knowledge : The breadth and depth of knowledge required to audit IT and systems are extensive and may include

How do children in us fare in terms of critical issues : How do children in the United States fare in terms of the critical issues of poor health and hygiene, poverty, and malnutrition? Why is supporting each of these basic needs such a difficult challenge

Create the css for a website : Create a file called lab1.html which contains the HTML of a blog page. Create another filelab1.css which is linked from lab1.html , and which contains all the style formatting of thedocument. These files must match the specification given below.

Electro-magnetic force in newtons : The topic of this assignment was chosen so that you won't allow mathematical equations and scientific notation to intimidate you. No knowledge is required to complete the assignment beyond knowing how to perform mathematical operations within a fo..

The future of public health : This course has presented the various roles of the public and community health nurse.

Collective bargaining to both management and employees : Show the level of education is graduate level not 1st grade level - do not repeat the same sentences or paragraphs in other parts within the project.

Write an essay on american literature before the civil war : Write an essay on American Literature before the Civil War. Based on the readings from weeks one and two, discuss the images of America the European writers constructed to promote colonization and settlement.

User Account

All Pages