This is a Premium Blog

CSS Basic

Written on June 5, 2007 by admin

What is CSS? Cascading Style Sheets. Language used to describe how an HTML document should be formatted.

How to Insert a Style Sheet

When a browser reads a style sheet, it will format the document according to it. There are three ways of inserting a style sheet:

1. External Style Sheet

An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:

PLAIN TEXT
HTML:
  1. <link rel="stylesheet" type="text/css" />
  2. href="mystyle.css" /&gt;

The browser will read the style definitions from the file mystyle.css, and format the document according to it.

An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a .css extension. An example of a style sheet file is shown below:

PLAIN TEXT
CSS:
  1. hr {color: sienna}
  2. p {margin-left: 20px}
  3. body {background-image: url("images/back40.gif")}

2. Internal Style Sheet

An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section by using the <style> tag, like this:

PLAIN TEXT
HTML:
  2. <style type="text/css">
  3. hr {color: sienna}
  4. p {margin-left: 20px}
  5. body {background-image: url("images/back40.gif")}
  6. </style>
  7. </head>

The browser will now read the style definitions, and format the document according to it.

Note: A browser normally ignores unknown tags. This means that an old browser that does not support styles, will ignore the <style> tag, but the content of the <style> tag will be displayed on the page. It is possible to prevent an old browser from displaying the content by hiding it in the HTML comment element:

PLAIN TEXT
HTML:
  2. <style type="text/css">
  3. <!--
  4. hr {color: sienna}
  5. p {margin-left: 20px}
  6. body {background-image: url("images/back40.gif")}
  7. -->
  8. </style>
  9. </head>

3. Inline Styles

An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly, such as when a style is to be applied to a single occurrence of an element.

To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph:

PLAIN TEXT
HTML:
  1. <p style="color: sienna; margin-left: 20px">
  2. This is a paragraph
  3. </p>

Multiple Style Sheets

If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet.

For example, an external style sheet has these properties for the h3 selector:

PLAIN TEXT
CSS:
  1. h3
  2. {
  3. color: red;
  4. text-align: left;
  5. font-size: 8pt
  6. }

And an internal style sheet has these properties for the h3 selector:

PLAIN TEXT
CSS:
  1. h3
  2. {
  3. text-align: right;
  4. font-size: 20pt
  5. }

If the page with the internal style sheet also links to the external style sheet the properties for h3 will be:

PLAIN TEXT
CSS:
  1. color: red;
  2. text-align: right;
  3. font-size: 20pt

The color is inherited from the external style sheet and the text-alignment and the font-size is replaced by the internal style sheet.

__________________________________________________

Making a CSS Class Selector

You can create your own class of code and do this with any html tag you want style applied to, by making css class selectors.

Within the style code in the head of your document, you add .whatever (dot whatever) just like this P.whatever, and you make a class of your own. Here's how I would do it to our old friend "overlapping text".

First the head code:

PLAIN TEXT
CSS:
  1. <STYLE TYPE="text/css">
  2. <!--
  3. P.hyper { font-size: 30pt; color: blue; position: relative; left: 50px; top: 20px; z-index: 1 }
  4. P.gurl { font-size: 30pt; color: green; position: relative; left: 65px; top: -55px; z-index: 10; font-family: merced, forte, arial, serif }
  5. -->
  6. </STYLE>

Then when you code what you want in the body of your document you just add the following:

PLAIN TEXT
HTML:
  1. <P class="hyper">I Just Love</P>
  2. <P class="gurl">Overlapping Text</P>

I Just Love

Overlapping Text

So there you have it. You can call your class anything you want. You can make as many classes as you want. This is the power of CSS.

Color scrollbar script:

Add the following script within your head tag and change the color attributes to suit.

PLAIN TEXT
CSS:
  1. <style
  2. type="text/css">
  3. body {
  4. scrollbar-arrow-color: ffffff;
  5. scrollbar-base-color:ffffff;
  6. scrollbar-dark-shadow-color: ffffff;
  7. scrollbar-track-color: ffffff;
  8. scrollbar-face-color: ffffff;
  9. scrollbar-shadow-color: ffffff;
  10. scrollbar-highlight-color: ffffff;
  11. scrollbar-3d-light-color: ffffff;
  12. } </style>

No underline on links:

Add this code to your page, within the <head></head>tags. It does work as well in the homestead editor under the insert html button.

PLAIN TEXT
CSS:
  1. <style
  2. type="text/css"> <!-- A:link {text-decoration:none} A:visited
  3. {text-decoration:none} --> </style>

Script for changing linked text color on mouseover:

This only works with the IE browsers. Add this code within your <head> tags. To keep the underline on your links, replace "none" with "underline" Change "YourColor" with the hexidecimal number of color required.

PLAIN TEXT
CSS:
  1. <style
  2. type="text/css"> <!-- A:link { text-decoration: none; color:#YourColor
  3. } A:visited { text-decoration: none; color:#YourColor } A:hover { text-decoration:
  4. none; color:#YourColor } --> </style>

Script for changing text color on mouseover

You can change the color of your text, be it a full paragraph or just one word by applying the code below to any valid html tag. The code is applied inline to your text where you want the text mouseover color applied.

Run your mouse over this sentence to see an example.

PLAIN TEXT
HTML:
  1. This
  2. is an<b onmouseout="this.style.color = 'black';" onmouseover="this.style.color
  3. = 'red';" align="justify"> example </b>of changing the
  4. color of text using a MouseOver.

CSS Custom Cursors

IE 6 users can now apply a custom cursor to their webpage using a simple CSS script and a pre-made graphic which is either a .cur or .ani file.

If your browser is IE6 you should see a "smiley" instead of the usual cursor on this page. Netscape and other browsers will see nothing except the default cursor. (Netscape 7.0 may now support the CSS custom cursor)

Now there's no need download those intrusive cursors that place spyware onto your computer.
You can have either a static cursor or an animated cursor.

Here's how it is done for webpages.

Copy and paste the stylesheet script below into the <head> of your html document. Change "yourimage.cur" to reflect the name of your .cur or .ani file. If your <body> tag is in upper case letters then make the stylesheet (body) the same

PLAIN TEXT
CSS:
  1. <style>
  2. <!-- body{ cursor:url("yourimage.cur"); } --> </style>

Posted in HTML Tutorials
Tags:

If you enjoyed this post Subscribe to our feed

Leave a Reply