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
