Css Is A Document Computer Science Essay

Published:

This essay has been submitted by a student. This is not an example of the work written by our professional essay writers.

CSS is a document that is written in a mark-up language. It is used to style web pages mostly written in HTML and XHTML. One of its features is its assumption that multiple, related style sheets can cascade, which means that authors can attach preferred style sheets to web documents. CSS contains a set of rules to resolve style conflicts that arise when applying multiple style sheets to the same document. Because conflicts are bound to arise, some method of resolution is essential to make the content of a document appear properly on a user's display.

People use CCS when creating their website for many reasons. Here are some positive points on why they use CSS.

To edit the style in many pages at once by editing a single CSS document.

CSS gives more control over web pages layout.

CSS can help the user to create a good website. For example the users can use id selectors especially if the user is new to web designing.

It can manage to separate the style from the content on the web page.

Handle the style of the web page and lets the HTML do the content.

If the chosen browser does not support CSS, the browser will simply just get plain text.

FONT -tag and many BODY attributes becomes easier to read and understand for the chosen browser.

There are three methods used for HTML files to access CSS. I will explain what each of these methods does.

Inline - This method allows us to define styles at the exact point. For example if we want a title to be big and bold, we will find the title in our HTML and add it to the CSS which will make the title to appear in the mark-up

Internal - this method allows us to make our rules in the Head section of the HTML file. By doing this it will on effect the content on the web page.

External - all h1 headings and paragraphs on one particular web page to have a certain size, colour and maybe a certain line-height (space between lines).

All these methods have their pros and cons, but which one takes priority?

Inline- is easier to scroll rather than changing the source file, this method is better when creating a smaller website such as blogs with limited pages. But inline can be overriding without the user intending.

Internal - most browsers supports internal style sheets including IE4 and NN4. However internal style sheets can slow page loading because when using internal style sheets the page size can increase.

External - I will give me priority for using external style sheets as this method allows the pages to be loaded quicker than internal and inline style sheets. This method also gives the user the full control of the page structure.

Task 2 - P2

Box Model

Each box has a content area and padding, border, and margin areas; the size of each area is specified by properties defined below. The diagram shows how these areas relate and the terminology used to refer to margin, border and padding.

https://developer.mozilla.org/files/72/boxmodel%20(1).png   

The content area

The content area is located inside the content edge. It contains the real content of the elements such as width and height.

The padding area

The padding area often has a background sometimes it could be a picture or a colour. It is located inside the padding edge and extends the content area between the content and the borders around it.

The border area

The border area contains inside the border edge. Its dimensions are width and height (border height and border width)

The margin area

The margin area contains inside the margin edge. Its dimensions are width and height (margin box width and margin box height). The margin separates all the other elements.

Margins are shared between boxes, normally when the margins collapse the margin are will not be clearly defined.

Task 3 - M1

Produce a report that compares the two methods of accessing external CSS scripts <link> and @import

In your comparison include the following:

How each method is used

The advantage & disadvantages of each method

Why each method may be used in a given context

Which method you will use in your website

External CSS Scripts

When using CSS it is preferable to keep the CSS separate from your HTML. Placing CSS in a separate file allows the web designer to completely differentiate between content (HTML) and design (CSS). External CSS is a file that contains only CSS code and is saved with a ".css" file extension. This CSS file is then referenced in your HTML using the <link> instead of <style>.

Advantages

It keeps your website design and content separate.

It's much easier to reuse your CSS code if you have it in a separate file. Instead of typing the same CSS code on every web page you have, simply have many pages refer to a single CSS file with the "link" tag.

You can make drastic changes to your web pages with just a few changes in a single CSS file

Disadvantages

An extra download is required to import the css information for each document

The document can be delayed when rendering until the external style sheet is loaded.

The layout can be slightly unwieldy and hard to edit.

@import

The @import CCS rule allows the user to import rules form other style sheets. This way the users can avoid retrieving resources for unsupported media types. After the URL these conditions imports comma separated media quires. If these are no media query the import will be unconditional.

To use the @import rule, type:

@import url; or

@import url list-of-media-queries;

url Is a <string> or a <uri> representing the location of the resource to import. The url may be an absolute or relative url.list-of-media-queries Is a comma-separated list of media queries conditioning the application of the css rules defined in the linked url. If the browser doesn't support any of these media types.

Advantages

Use multiple style sheets on a page

Disadvantages

Some older browsers does not recognize @import such as Internet Explorer

Cannot specify alternate style sheets or style sheet titles when specifying style sheets

When using multiple sheets it slows the loading of your page since it's just more sequential http requests.

I used ccs script because I created a small website which consist of few pages. So even if I have to insert a new CSS page I don't have to go through all the pages. I did not use @import because we have to check our website on different browsers. I want my website to work on main browsers such as internet explorer, Firefox and Google chrome.

From a standards viewpoint, there is no difference between linking to an external style sheet and importing it. Either way is correct, and either way will work equally well (in most cases).

TASK 4 - P4

Create a story board for your website, which must include the following:

Clear designs for each page of the website. You should show things such as font sizes, font styles, and positions of any links, images and the CSS styling choices you have made.

The planned CSS layout for each page. Include an explanation of how CSS will control the layout

Task 5 - P5 (a) M3 (a)

Build a website based on your designs, with annotated screen shots clearly showing the web pages in action. The website must include:

Page layouts created using CSS.

A CSS menu system considering width, margins, padding, border and content area.

The use of an external style sheet.

Correct use of a class or ID selector.

Correct structure of HTML code which includes correct indentation and comments. Part of M3 (a)

Note: Consider the following in the implementation of your style sheets:

Links and pseudo classes: setting pseudo class order; adding background images;, formatting text, applying borders and padding, heading styles, positioning elements, styling e.g. adding colour, font size, font weight, background image; spacing e.g. applying padding, margins, borders

Task 6 -P6 (a)

Produce a test plan document for your CSS web site created, test your website is working correctly according to the test plan. You must provide the following:

Test plan document for each page.

Annotated screen shots showing that you have tested your website in a minimum of two browsers.

Screen shots showing you have validated your CSS code.

Checklist of assignment 1

Content

Y/N

Comments

TASK 1:

(P1)

What is CSS?

Why it should be used?

Three methods used for HTML files to access CS

TASK 2:

(P2)

Explain the features of the box model for CSS. Use illustrations/diagrams to support your explanation

Explain two different types selectors used in relation to the box model. Use examples to support the explanation.

TASK 3:

Compare the two methods of accessing external CSS scripts <link> and @import. (M1)

How each method is used

The advantage & disadvantages of each method.

Why each method may be used in a given context.

Which method you will use in your website.

TASK 4:

Design a story board for your website. (P4)

Clear storyboard designs for each page of the website

The planned CSS layout for each page. Include an explanation of how CSS will control the layout

TASK 5:

Build a website based on your designs, with annotated screen shots clearly showing the web pages in action. (P5 a) (M3 a)

Page layouts created using CSS.

A CSS menu system

The use of an external style sheet.

The use of a class or ID selector.

Code indented and commented. Part of M3 (a)

TASK 6:

Test your website is working correctly (P6a)

Test Plan

Screen shots showing that you have tested in two browsers

Screen shots showing you have validated your CSS code

Writing Services

Essay Writing
Service

Find out how the very best essay writing service can help you accomplish more and achieve higher marks today.

Assignment Writing Service

From complicated assignments to tricky tasks, our experts can tackle virtually any question thrown at them.

Dissertation Writing Service

A dissertation (also known as a thesis or research project) is probably the most important piece of work for any student! From full dissertations to individual chapters, we’re on hand to support you.

Coursework Writing Service

Our expert qualified writers can help you get your coursework right first time, every time.

Dissertation Proposal Service

The first step to completing a dissertation is to create a proposal that talks about what you wish to do. Our experts can design suitable methodologies - perfect to help you get started with a dissertation.

Report Writing
Service

Reports for any audience. Perfectly structured, professionally written, and tailored to suit your exact requirements.

Essay Skeleton Answer Service

If you’re just looking for some help to get started on an essay, our outline service provides you with a perfect essay plan.

Marking & Proofreading Service

Not sure if your work is hitting the mark? Struggling to get feedback from your lecturer? Our premium marking service was created just for you - get the feedback you deserve now.

Exam Revision
Service

Exams can be one of the most stressful experiences you’ll ever have! Revision is key, and we’re here to help. With custom created revision notes and exam answers, you’ll never feel underprepared again.