Go4Expert

Go4Expert (http://www.go4expert.com/)
-   Web Design, HTML And CSS Tutorials (http://www.go4expert.com/articles/web-design/)
-   -   CSS Tutorial (http://www.go4expert.com/articles/css-tutorial-t572/)

pradeep 28Jan2006 13:07

CSS Tutorial
 

Introduction



CSS is a set of page markup definitions that can be applied to HTML documents to define how pages are rendered. This addition to the HTML tag set can be applied by Authors internally in each HTML document or they can reside in a separate server side file that is referenced and applied to the document. The end user may also define their own Style Sheet that resides on their local system to be applied to all of the documents that they browse. Style sheets also offer much more flexibility in terms of the presentation effects that they provide. Properties such as color, background, margin, border, and many more can be applied to all elements.

How it Works



Cascading Style Sheets (CSS) define how to display HTML elements. Style sheets work like templates: you define the style for a particular HTML element once, and then use it over and over on any number of Web pages. If you want to change how an element looks, you just change the style; the element automatically changes wherever it appears. (Before CSS, you had to change the element individually, each time it appeared.) Style sheets let Web designers quickly create more consistent pages--and more consistent sites.Style sheets also offer much more flexibility in terms of the presentation effects that they provide. Properties such as color, background, margin, border, and many more can be applied to all elements. With just HTML and its proprietary extensions, one must rely on attributes like BGCOLOR, which are only available for a few elements. Style sheets give the flexibility of applying a style to all paragraphs, or all level-two headings, or all emphasized text.

Things that Webmasters Don't like



Browser compatibility must be the most common difficulty. Anyone that has had problems trying to keep their JavaScript compatible across browsers and even within different versions of the same manufacture's browser knows that making working documents that are consistent often means not using such features. If a Browser is incapable of implementing CSS it should be able to ignore the CSS style selectors and revert to standard HTML. However if you are creating documents for a closed audience, as would be the case in a Corporate Intranet environment, the probability of successful implementation is much greater.Another factor that Webmasters should be aware of concerning the use of an external file to define CSS Declarations is that the End user will have to access 2 files to view their pages. This possible initial lag should be weighted against the overall load that would be placed on the server if every HTML file required additional data to be added to define the CSS information internally. Analysis of Initial lag vs. overall server load would be dependent upon the amount of CSS use across the site.

Lets Start


First Step

The application of Styles through CSS is made possible by adding additional formatting controls to the current HTML TAG Elements. When the author wants to take advantage of the additional formatting a Style Selector is made and applied to the HTML element. Example: <style type="text/css" > P { color:#ff0000 }</style>In the example above the HTML element <p> has a color declaration and the value is a rrggbb color of #ff0000 . The result would be that all paragraphs would be formatted to be displayed with a font color of red. However the Author could override this Style Declaration Value by using a child element like < font color="blue" > inside of the paragraph.

Another important note is that where it was once common to leave the <p> tag open Authors should now take care to close it with <p> a to make sure that Style Declarations are properly controlled.

Browser Support

Internet Explorer 3, 4, and 5, Navigator 4, and Opera all have partial support for Cascading Style Sheets, level 1. So when using Cascading Style Sheets you need to be conscious of which browsers implement which properties. Defining a Style Sheet

We Can Define

<HTML>
<HEAD>
<STYLE type="text/css">
<!--
H6 { font-family: Arial; font-style: italic; color: green }
-->
</STYLE>

</HEAD>
<BODY>
<H6>This is a green, italic, Arial H6 header.</H6>
<P>
<H6>So is this.</H6>
</BODY>
</HTML> Text Formatting

Where Font attributes apply to the character level Text Formatting applies to how the characters are manipulated to makeup words and how words are used to make sentences. Indenting

The text-indent property will allow you to indent the first line of a block of text. Values include: length, percentage

P { text-indent: 3em } Text Alignment

Defines how a block of text will be aligned within a containing element. Values include: left, right, center, justify

P { alignment: center } Decoration

This property can be applied to text to add additional decorative features. Values include: none, underline, overline, line-through, blink.

Note: Blink does not work with IE and Overline does not work with NS4.

You can also use this declaration to override the default settings of the users agent. The following example will allow you to create links that are not underlined.

Also see Pseudo Class Elements.

<style>
A:link, A:visited, A:active { text-decoration: none }
</style>
<a href="file.html">Click Here</a> Text shadows

Allows you to define a shadow effect to your text.
Note: This Text Formatting feature does not work in IE4 or NS4. <style>
P { text-shadow: black }
</style>
<P>This is some text</P> Word Spacing

Word Spacing allows you to define the amount of space between words.
Note: This Text Formatting feature does not work in IE4 or NS4. Values include: normal, length, auto

H1 { word-spacing: 1em } Letter Spacing

Letter Spacing allows you to define the amount of space between letters in each word. Note: This Text Formatting feature does not work in NS4.

Values include: normal, length, auto

<style>
P { letter-spacing: 0.1cm }
</style>
<P>This is some text</P> Text Transform Case

Case allows you to change how a block of text will appear. This is an easy way to override the formatting of a block of text that has already been typed and placed in the document. Values include: capitalize, uppercase, lowercase, none

The values of this property have the following meanings:

capitalize: first character of each word is uppercase
uppercase: all characters are uppercase
lowercase: all characters are lowercase
none: element ignores parent element value

<style>
P { text-transform: uppercase }
</style>
<P>This is some text</P> White Space

White space is used to define how a block of text will be controlled within an element. White space refers to the spaces between the words. Note: This Text Formatting feature does not work in IE4 and has only partial support in NS4.

Values include: normal, pre, nowrap

In the example below the H1 element has been given the white-space value of pre or preformatted text. This means that additional spaces between words will be preserved as if the block was preformatted text.

<HTML>
<HEAD>
<STYLE type="text/css">
H1 { white-space: pre }
</STYLE>
<BODY>
<H1>This is some text </H1>
</BODY>
</HTML> Tables

Tables are often used by Authors to organize their page content into readable and visually appealing documents. Tables are defined by using a layered grid.

The <Table> element being on the bottom defines: the overall width and height of the table and how the cells of the table will be separated with margins.

The <Row> element is then used to separate the table into a number of horizontal rows but can not contain the actual page content.

Finally the top layer the <td> element is used to define columns that are placed inside the rows to hold the actual information to be displayed.

Table Headers <th> are also used to provide comment lines between the row / column contents. They can not contain column elements and are considered row elements.

he <CAPTION> element can be used to contain a description of the table. Although the code is placed inside the <TABLE> element it is displayed outside the boundaries of the table border. Because all of these elements are containers many formatting Declaration Values can be applied to them to define: width, color, border,... and styles can be inherited by their child elements to define: text color, size, and family and Back Ground.

Lists

CSS Selectors can provide the Author extended control over how their Lists are formatted. Properties can be applied to the markers that appear before the list items to provide order to the information. In addition to the regular list styles that are available in HTML the author can also define their own marker item by using an image. Other proposed CSS declaration values would control how the list item markers are applied and indented in relation to the line items.

The possible values have the following meanings:

disc: A disc (exact presentation is UA-dependent)
circle: A circle (exact presentation is UA-dependent)
square: A square (exact presentation is UA-dependent)
decimal: Decimal numbers, beginning with 0.
lower-roman: Lower case roman numerals (i, ii, iii, iv, v, etc.)
upper-roman: Upper case roman numerals (I, II, III, IV, V, etc.)
lower-alpha: Lower case ascii letters (a, b, c, ... z)
upper-alpha: Upper case ascii letters (A, B, C, ... Z)
none: No marker

<STYLE>
OL { list-style-type: lower-roman } </STYLE>
<BODY>
<OL>
<LI> This is the first item.
<LI> This is the second item.
<LI> This is the third item.
</OL>
</BODY> list-style-image

When you would like to us an image to represent the bullet of your list items you can use the URL value you can also define a list-style-type to be used if the enduser has disabled the loading of images. Works only with IE4! The following example sets the marker at the beginning of each list item to be the image "Pic.jpg".

<style>
UL { list-style-image:
url(http://www.webolics.com/Pic.jpg) }
</style>
list-style-position

CSS2 has also defined a selector declaration that would allow you to position the List marker either away from the Line Item or it could have the value compact that would make the Marker move to the position of the first character in the Line Item. This is not implemented in either IE4 or NS4! Possible values include: inside, outside

<style>
UL { list-style-position:inside }
</style> BackGround Properties

There are 5 background properties, and 1 shorthand.

background-color
background-image
background-repeat
background-attachment
background-position background (shorthand)

The nice thing about backgrounds is that it doesn't have to apply to the whole screen, as the normal background HTML tag does. To apply a background to the whole page, you use it in the body tag. You can specify backgrounds in paragraphs, table cells, headers and almost anything else you want.

background-color and background-image

These two are very straight forward. For background-color the valid values are colors, be it rgb, hex, or color name, and transparent, which makes the background transparent. There are only two values for background-image, none and a url to point to an image object. Examples: P.bg1 { background-color: #000000; color: #FFFFFF; /* color the text white */ } P.bg2 { background-image: url(images/bg1.gif) } click here for a not so pretty example; Use better judgment than I did with this example, but you can see what it can do. background-repeat

Valid values are: repeat, repeat-x, repeat-y, and no-repeat. A value of repeat, repeats the background horizontally and vertically. repeat-x only repeats the background in the horizontal direction, repeat-y vertical direction. And as you might have thought no-repeat does not repeat the background at all.

background-attachment

There are two values for background-attachment, scroll and fixed. A valid you of scroll is what is common with browsers today. The background scrolls along as you do. A value of fixed will keep the background fixed, with the text and other goodies scrolling on top of it.

background-position

You can specify where the background is to be placed with this property. Valid values are: length, percentage, top, center, bottom, left, right. For example you have a table cell which is bigger than the background image, and you want it to be in the bottom right corner of that cell. Here's the code: TD.bg1 { background-position: bottom right } or TD.bg1 { background-position: 100% 100% } Both of these will do the same thing, you can also position the backgrounds by specifying the pixels offset of the image.

background (shorthand)

The shorthand notation for background follows the order: background-color, background-image, background-repeat, background-attachment, and background-position Example:

P { background: white url(bg1.gif) no-repeat fixed } Link to External Style Sheet

Defining styles in the HTML document is useful if you want to affect only one Web page, but what if you want to use the same styles for several pages--or even a whole site? That's when it makes sense to create an external style sheet and link to it from your HTML documents. First, create a file called basic.css that contains just this text:

H6 { font-family: Arial; font-style: italic; color: green }

Next, start a new HTML document (call it basic.html), and add a element that calls the style sheet in the document's head:

<HTML>
<Head>
<LINK rel="stylesheet" type="text/css"
href="basic.css" title="style1">
</HEAD> The element's attributes tell the browser to find an external style sheet, that the style sheet is a CSS file, and that the name of that file is basic.css. (This assumes that your style sheet file is in the same directory as your HTML file. If not, you need to supply the directory path in the href attribute.)The title attribute simply gives the style sheet a name to reference.

Concluding A Beginning...



Style sheets represent an enormous step forward for the Web. With the separation of content and presentation between HTML and style sheets, the Web no longer needs to drift away from the strong ideal of platform independence that provided the medium with its initial push of popularity. Authors can finally influence the presentation of documents without leaving pages unreadable to users .


All times are GMT +5.5. The time now is 09:29.