Website Evaluation

2005-11-07T11:12:00.000-08:00

Learn Web Standards: CSS Guide – Why Use CSS

http://www.westciv.com/style_master/academy/css_tutorial/introduction/key_ideas.html

The site explains the uses of CSS quite well and actually goes to surprising lengths to explain this in great detail without being overly technical. This is good for users with little experience of it as they can understand the language, but it is also suitable for users with some experience as it does actually go into quite a lot of depth.
Once explaining the uses of CSS, it then goes onto explain exactly how it works, and then finally onto how it may be implemented by the user.
However although this is useful it could also be considered biased as the site is rather obviously selling a product to aid with CSS creation, so maybe its not actually that good at all!

Pete

How can we style web pages using cascading style sheets (CSS) and what are the reasons for doing so?

2005-10-10T07:08:00.000-07:00

Cascading style sheets gives the developer and also user more control over how the pages of a website is displayed. Style sheets can be created to define different elements such as headers, links, paragraphs etc… which can be applied to any page within the website. They are straightforward pieces of code, which is only written once and then when its needed, it is simply ‘called’ to that particular page. E.g. there is no need to keep writing the same chunks of code every time this style (header/paragraph etc) is needed, when a simple line of code e.g. a call type function, can be used to overcome this.

Web pages can easily be styled using a CSS. A CSS can control things such as the colour, font size, font style etc. Assigning a CSS within a website can save a considerable amount of time as it can update several pages at the same time.

“The original specifications for Cascading Style Sheets mostly limited themselves to recreating HTML effects. CSS level 2, published in 1998, however brought new capabilities, in particular the ability to position elements on a webpage with great precision. CSS could not only recreate HTML formatting, it could make professional looking layouts.”

(Castro, E 2003, p. 18)

“CSS is designed to allow the separation of presentation and structure. Prior to CSS, nearly all of the presentational attributes of an HTML document were contained within the HTML code; all font colors, background styles, element alignments, borders and sizes had to be explicitly described, often repeatedly, in the midst of the HTML code. CSS allows authors to move much of that information to a stylesheet, resulting in considerably simpler HTML code. The HTML documents become much smaller and web browsers will usually cache sites' CSS stylesheets. This leads to a reduction in network traffic and noticeably quicker page downloads.”

(Wikipedia, 2005, Use of CSS)

Cascading style sheets are very useful when creating very large and complicated sites, and have two main advantages:

“-Separation of content and design. CSS gives site developers the best of both worlds: content mark-up that reflects the logical structure of the information and the freedom to specify exactly how each HTML tag will look.

-Efficient control over large document sets. The most powerful implementations of CSS will allow site designers to control the graphic ‘look and feel’ of thousands of pages by modifying a single master style sheet document.”

(Lynch and Horton 2001, p.118)

Cascading style sheets are useful because they can be used in such a way that allows them to control the style of many different web pages all at the same time. Normally in HTML the style, colour, size, font, position, etc is defined within the code each time, but using CSS it is possible to define the complete style of paragraphs, headings, etc, or even a predefined name for an area with just one line of code rather than defining it separately each time within the HTML on separate web pages.

CSS can either be coded at the top of a web page within the head tags, but this will mean that the styles defined there will only apply to that particular page. If you wish to style many different pages all at once and therefore save a lot of coding, then it is more efficient to create an external CSS that is linked to the HTML page within the head tags. However, if a style is defined within the HTML then this will override that which is defined within the CSS, this can be useful if you wish to use a generic style defined in the CSS and then just want to change a very small area on one particular page.

CSS coding works by defining the HTML tag or name of an area you wish to define, then the attribute, and then the property of it, e.g.:

(this defines the font of a paragraph)

p {font-family: Tahoma, Verdana, Arial, sans-serif}

(this is a custom named area for some text)

#minititle {text-align: left; font-family: Tahoma, Verdana, Arial, sans-serif; color: #FFFFFF}

Custom named areas are implemented into the HTML code using the id attribute within the tag, e.g. div id=”minititle” or p id=”minititle”.

It is also possible to create specific ‘class’ elements for use throughout documents which is very useful and done in a similar way to the custom areas, e.g.:

.centre {text-align: center}

p class=”centre”

More advanced CSS can be used to control the entire layout of a web page, this is really useful as again it allows you to the style of many different pages all at once, but it can also create some very powerful effects that cannot be done in standard HTML. It is also not as restrictive as tables are when it comes to controlling the layout of your content.

CSS can allow you to define pretty much anything in relational or absolute sizes or positioning, this is something which is not possible to the same extent in HTML that it is in CSS, and for this reason CSS is far better for displaying content for exact purposes. It also has a feature that allows you to arrange content in layers, so you can hide behind others if needed.

CSS also incorporates a media element which allows you to display the same content, but it will change depending on whether you print the page or using a handheld, etc. This is quite good for accessibility.

LYNCH, P. J. AND HORTON, S. 2001. Web Style Guide, Basic Design Principles For Creating Web Sites. 2^nd ed. New Haven and London: Yale University Press.

First post

2005-09-26T01:52:00.000-07:00

Just a post to get us started

COMP3092 Group 3

Website Evaluation

How can we style web pages using cascading style sheets (CSS) and what are the reasons for doing so?

First post