This n That Graphics



Style Sheets TitleIntro Title

Cascading Style Sheets was something that I put off doing for some time. I didn't want to take the time to learn how to use CSS, but once I found out how easy it really was, I just dove in. Why don't you try it for yourself !

To start with, you will find some simple basic examples that you can apply to your pages, while future tutorials will include more of the fundamentals such as "Selectors", "Units", and "Inheritance".

Styles can be used in three ways (a fourth method of importing will not be discussed). The first is by Linking to an External style sheet, which is a plain text file that contains a list of style rules. The second method is by Embedding styles directly into your html document (writing the style rules into your Html documents 'Head' section). This is also called as a "document-wide style". The third method is an "Inline" style. This can be done by applying a style to a single element (Html tag).

Intro


•  What is CSS or Cascading Style Sheets?
•  What can CSS do?
•  What is a style rule?
•  How is CSS added to a Html document?
•  How do I use the <Link> tag? - ( External )
•  How do I use the <Style> tag? - ( Embedded )
•  How do I use the <Div> and <Span> tags? - ( Inline )


What is CSS or Cascading Style Sheets?
CSS is a way to add formatting rules and layout to existing Html tags. While CSS is not a replacement for HTML, it greatly simplifies changes to page appearance by only having to make edits to the Style rules.
[ Back ]
What can CSS do?
Here is a small list of things that you can do with Styles Sheet - some of which are not possible with regular Html tags.
1. Add indentation to text.
2. Use measurements in inches, points, pixels, and more.
3. Position text and images with precise control.
4. Add background color to text, links, and other Html tags.
5. Add styled borders to tables and paragraphs.
[ Back ]
What is a style rule?
It is a statement that affects the style of one or more Html elements as apposed to a style sheet which defines the style of an entire Html document.
[ Back ]
How is CSS added to a Html document?
Add CSS by using 4 Html tags and 3 Html attributes. The tags are <Link> , <STYLE>, <DIV>, and <SPAN>. The attributes are STYLE, CLASS, and ID .
[ Back ]
How do I use the <Link> tag? - ( External )
Add the <Link> tag in the <Head> section of your Html document. Here is an example:

<HEAD>
.... other head elements
<LINK REL="STYLESHEET" HREF="mystyle.css"
   TYPE="text/css">
</HEAD>
Again, a css file is a text file with your style rules.
[ Back ]
How do I use the <Style> tag? - ( Embedded )
The <Style> tag is also placed in the <Head> section of your Html document. Use both the open and close tags: <Style> </Style>. It can list one or more style rules.
Note - Because not all browser understand style info, place the style rules between an open and close comment:
<!--    -->. Also be sure to use the curly braces:
{    } and not a parenthesis.
Here is an example:
<HEAD>
... other head elements
<STYLE TYPE="text/css">
<!--
H1   { font-size: 20pt;
 color: #FF0066}
P   { text-indent: 10px }
-->
</STYLE>
</HEAD>
[ Back ]
How do I use the <Div> and <Span> tags? - ( Inline )
You can apply a style to a specific "block" by using the <Div> tag or apply a style to specific "section" by using the <Span> tag. Here are both examples:
<DIV STYLE="background-color:#0000FF;
color:#FFFFFF">My text background goes here,
</DIV> but not here.
My text background goes here,
but not here.
<SPAN STYLE="background-color:#0000FF;
color:#FFFFFF">My text background goes here,
</SPAN> but not here.
My text background goes here, but not here.
[ Back ]

  Page 1 of 1  
Page added on 08-16-2001
Site Map Home