| Welcome to Questy's Links and Lessons |
|
Building
a better web site Style sheets |
|
|
|
|
|
Style sheets simplify HTML markup and largely relieve HTML of the responsibilities of presentation. They give both authors and users control over the presentation of documents -- font information, alignment, colors. Style sheets can save recoding time because Web designers only have to define formatting once that is applied many times. If that style changes, the change is made in the style definition, and then all corresponding tags will change. Cascading Style Sheets (CSS): In theory, one file could contain the formatting information for all the pages that make up a Web site. Since style sheets offer more powerful presentation mechanisms, the World Wide Web Consortium will eventually phase out many of HTML's presentation elements and attributes. Elements and attributes at risk are marked as deprecated. Using Style Sheets The relatively long time it takes for users to upgrade their browsers means that old style HTML these features will continue to be used for some time. Internet Explorer and Netscape Navigator interpret style sheets differently, and do not accept all the recommended codes, so style sheets will be difficult to use in Web pages until there is a standard implementation. There are four ways to apply style sheets: *
Embedding style information - Changing the styles contained on a page An embedded style defines the styles for a single HTML page. These styles are defined by the <STYLE> tag, which is placed below the <HEAD> tag of an HTML document. Defining a style using an embedded style means that the style is defined or embedded in a block of text within the <HEAD> tag. To embed a style use the <STYLE> tag followed by the style definitions enclosed in the <!-- tags. Example
of an embedded style is: Anytime the H1 tag is used in this document, it will automatically have green font color unless otherwise specified. An inline style defines a style for a specific amount of text. This definition can be done by using either the <SPAN> tag, which would apply the style to everything included between the closing and opening <SPAN> tag, or an inline style can be placed in an existing HTML tag by using the STYLE attribute. Placing a style within an HTML tag is known as an inline style. It is known as an inline style because the style is inserted in the <BODY> of the HTML document rather than being defined in a section of the page dedicated to style definition or via an external sheet. To create a style within an existing HTML tag, assign a value to the STYLE attribute within that tag. The style will remain in effect until the closing </P> tag. Defining
the style within an HTML tag is one way to create an inline style, but
inline styles can also be created by using a separate tag - the <SPAN>
tag. The <SPAN> tag also uses the STYLE attribute to define its
style. All of the text contained within the opening and closing <SPAN>
tags will be affected by this style. Using the <SPAN> tag to create
an inline style rather than defining the style within the tag allows a
greater amount of text to be affected. An example of an inline style created
with the <SPAN> tag is as follows: <SPAN STYLE="color: red">This
is an example </SPAN>. An imported style can define styles for multiple HTML pages. These styles are contained in a separate text file using a .css extension. An HTML page can then import one of the style definitions from this text file by using @import within the <STYLE> tag. A linked style is similar to an imported style in that it can define styles for multiple HTML pages by containing styles in a separate text file. But whatever styles are defined a linked file will be applied to the Web document rather than just importing one of the style definitions. Linking is done through the <LINK> tag specifying the name of the linked file. The <LINK> tag is placed below the <HEAD> tag of an HTML document. File
names of style sheets must be named using a .css extension. Also, these
style sheets should contain only style listings - do not include any HTML
within the file. Instead of tags, styles have selectors. And instead of attributes, styles have properties, but both attributes and properties have values. Other differences can be found when it comes to entering the style code. To
make certain correct syntax is followed, use these guidelines when defining
styles: An
example of proper syntax used within a style code is: CSS2 introduces some improvements over CSS1 including support for media types, bi-directional text, aural style sheets (for synthesized speech), and paged media for output to devices such as printers. However, browser support for CSS2 is limited. Internet Explorer offers limited support for CSS2, and Netscape is expected to support CSS2 when it releases its 5.0 browser. Cascading style sheets means that styles have been defined using several different style methods and some of those style definitions may overlap. When applying these various style definitions, the Web browser usually follows this order: default browser styles are applied first, next it applies imported styles, followed by linked styles, embedded styles, and finally inline styles. When styles overlap, the higher level style sheet takes precedence meaning that the style applied by the lower level style is overwritten by the higher level style. Inheritance as it relates to style sheets means that whatever style is applied to the parent element will also be applied to the child element unless otherwise specified. If Courier font is specified in the BODY style, there is no need to specify that same style for table text, paragraphs, or headings because those tags are contained within the <BODY> tag. Everything contained within the <BODY> tag will take on the BODY style. A
style guide is documentation of a set of design standards used within
a Web site. Style guides may include standards for font types/sizes/colors,
background colors, image size, and page layout. The biggest advantage
for creating and using a style guide is that it ensures consistency across
the Web site as well as across the company.
|
|
|
|
|
Welcome
to the World of Questy |
