CSS2 - Design your Website with Style

The purpose of this assignment was to:

The description and my solution of the CSS2 -assignment can be viewed at the bottom of this page.

What is CSS and what is it used for?

CSS(Cascading Style Sheets) is a language used to describe how a HTML document should be presented.

External style sheets

External style sheets is the best choice when the design should apply to many pages. With external style sheets, you can do site-wide design changes at one location(in the CSS file). Each page that should use the design rules described in the Style Sheet stored in the CSS file must link to the Style Sheet by using the <link> tag like this:

<head> <link rel="stylesheet" type="text/css" href="external-style-sheet-file.css" /> </head>

Browsers requesting a HTML document will follow the link and read the design rules from the file external-style-sheet_file.css, and present the document according to them.

This is how the External Style Sheet(CSS file) could look like:

body { background-image:url("images/bg.gif") } p { margin-left: 20px; margin-right:10px; margin:1em 0 2em 0 }

Internal style sheets

An internal style sheet can be used when a HTML document should have a different design than the rest of the site's documents. Internal styles are defined directly in the HTML docuement in the head section by using the <style> element like this:

<head> <style type="text/css"> body { background-image:url("images/bg.gif") } p { margin-left: 20px; margin-right:10px; margin:1em 0 2em 0 } </style> </head>

Some old browsers that doesn't support styles, will ignore the style element, but the design rules within the start tag (<style>) and end tag (</style>) will still be presented on the page. To be sure they won't be displayed for browsers not supporting CSS, the design rules should be hidden in the comment element like this:

<head> <style type="text/css"> <!-- body { background-image:url("images/bg.gif") } p { margin-left: 20px; margin-right:10px; margin:1em 0 2em 0 } --> </style> </head>

Inline Style

I would not recommend you to use inline styles to design your website since presentation and content won't be separated, and most advantages of CSS will be lost.

However, if you want to change the style of a single element on a single Web page on your website you they might be useful.

If you decide to use inline styles you do it by setting a value for the style attribute in the start tag for the element you wish to change style for. The value of this attribute can be any CSS property.

This example demonstrate how to change the background and top margin of a H1 element:

<h1 style=" background-color: white; margin-top: 1em"> Text within h1 start and end tags with inline styles </h1>

Cascade into one file

The closer presentation gets to the content of an HTML document the higher priority. Hence, an inline style has the highest priority, which means that it will override a style declared inside the <head> tag, in an external style sheet, or the default style declared in a browser. This is a list to demonstrate the priority:

Least priority is given to the default CSS predefined by the browser.

If some CSS properties have been set for the same selector in different types of style sheets, the values of these properties will be inherited from the style sheet with higher priority.

A component of DHTML

The term Dynamic HTML is used to describe HTML pages with dynamic content. CSS is one of three components in dynamic HTML. The other two components are JavaScript and HTML itself. These three components are tied together with DOM.

Presentation and Content - Some History

At the beginning...

tags in HTML had the purpose of defining the content of a HTML documents.

They were supposed to describe for clients(browsers) parsing a HTML document what kind of elements they were , e.g. "I'm a header", "I'm a paragraph"..., by using tags like <h3>, <p>...etc.

The presentation of HTML documents was supposed to be taken care of by the browsers, without using any tags for formatting.

The two major browsers at that time - Netscape and Internet Explorer - continued to add their own new HTML tags and attributes to the HTML specification in their competition for the browser market.

The more non-standardized tags and attributes were added the more difficult it became to create websites where the content of HTML documents was clearly separated from the HTML document's presentation layout.

To solve this mess, the W3C(World Wid Web Consortium) - a standard setting consortium, responsible for standardizing HTML, created CSS.

All major browsers now support Cascading Style Sheets.

Why separate the presentation of a HTML document from it's content?

Here are some benefits:

Assignment Description

Create a CSS2 tutorial.

Well, this document in itself is the first part of my solution for this assignment. It's purpose was to give a general understanding of CSS and why you should use it when designing (X)HTML document.

The second part - a reference for CSS properties and values - can be found here: CSS 2 Tutorial

«  Previous Next  »