Cascading Style Sheet (CSS)

Cascading Style Sheet Tutorial	Last Revised: 01/27/2004
Quick Study

Defenition of Cascading Style Sheet

Let's try to simplify the meaning of CSS (Cascading Style Sheet). First, CASCADING, it derived from a multiple sources in accordance with style element. With STYLE it designate by an identifying terms that gives a particular style in a certain window or arrange in accord with the prevailing mode. SHEET can be defined as rolled or spread out in a sheet.

Cascading Style Sheet gives more complex controls that appear on the web page. It allows you to arrange certain windows or control over the appearance of a web paged when viewed. There are browsers that are not supporting this type of HTML form. In general, the Web page creator's style sheet takes precedence, but it's recommended that browsers provide ways for the viewer to override the style attributes in some respects. Since its likely that different browsers will choose to implement CSS somewhat differently, you check to see if the page will work with a different browsers.

The command given to this element is a Style attributes that start at the beginning of your HTML Coding. It give you attribute of <Style Type="Text/CSS">, within this attributes you can set up a certain commands for the declaration of various selectors of elements. This is a very convenient way of formatting a website and it also helps when editing the HTML coding of one file.

CSS is a combination of DHTML and JavaScript. The file linked with HTML can be using the LINK element. Most HTML form that can be use to LINK with this element is saved as .CSS and .js. This LINK element can be inserted inside the < HEAD tag. An example for the LINK element is:

The example we did is an external style that we use an Out source link on another FTP Space for the URL and fetch this using the LINK Element. This is one way to shorten the HTML Coding you have and the .css and .js should be saved either in your FTP Space or in a different FTP's.

Their is an element we can use in Style Sheet that can be added within the <BODY> so you won't use a command line between the HEAD to run the code. We can simply add this on every single inline on every text you want to quote. Here's the example:

<P Style="margin-right: 10pt"> This will indent the text from right.

I used to highlight words if I want to say something to a reader can remember. Add a background color on a word to be able to know the reader about the information you want to tell. I use the FILTER tag to highlight words. You can visit my FILTER Command for more information.

Instead using a <DIV Style="position: absolute; Left:10pt; right:10pt; Top:10pt"> through the <Body> we can easily lessen using this screen in and use an ID and Class selector when we declare those commands on the Style Sheet between the <Head> and <Body> tag. Visit my DIV Tutorial .

Cascading Style Sheet (CSS) can be use in JavaScript. Sometimes you opt to change the scrollbar on a website that usually is in gray format. In CSS we can change the color using the "scrollbar" element. We can change the color of the scroll bar when we load web pages. Here is the procedure to do that.

This will give you Color on the scroll button.

<Style Type="text/Css">
<--
    scrollbar-face-color:#3366FF;
    scrollbar-arrow-color:#FFFFFF;
    scrollbar-track-color:#DDDDFF;   
    scrollbar-shadow-color:'';
    scrollbar-highlight-color:'';
    scrollbar-3dlight-color:'';
    scrollbar-darkshadow-Color:'';
}
-->
</style>

You can check on the Scroll Bar on this screen to see the effect we use above. You can change the color of "Scroll-Face, Scroll-Arrow-Color, Scrollbar-Track-Color, and Scrollbar-Shadow-Color" as well. You can get color code through HTML COLORS

Text can be design by not using Tables; we can use the Style Sheet to make over. Simply adding the command line in the <Style Type="Text/CSS"> like for the "height, margin and color" we simply use the following attributes with the Style sheet.

<Style Type="Text/CSS">
<--
      BODY {line-height: 2pt}
       P {text-indent: 10pt; margin: 0}
       A {text-decoration: underline}
       B {color:#FF66FF}
-->
<Style>

The use of "line-height:2pt" will size the text you use on your web page, the value depends on the number you set and can be as 20pt. To have line indent in a text paragraph use P {text-indent: 10pt; margin: 0;} And if you want to have text to have a decoration simply use the " A{text-decoration: underline;}".

Using the "B{color:#FF66FF}" it will make the text in Bold and add color on the font. Every text you have the element of <B> will be set as I mentioned above. You can customize your text as long as you want. You can use the Font-face, Font-weight, Font-Color; and Background on every Style Sheet.

[Go Back] [ HOME ][ Keyboard Shortcut ]

[ Home ] [ Table Tutorial ] [ CSS Tutorial ] [ Div Tutorial ] [ JavaScript ] [ List Tutorial ]
Š1999-2000. Comments or Questions about this page? Please e-mail the PCTechPH@yahoo.com . All Rights Reserved.

Quick Study

Defenition of Cascading Style Sheet