What are Cascading Style Sheets?

 .

A rule consists of two parts, the Selector and the Declaration

Selector - the part before the left curly brace 

The selector is the link between the HTML document and the style. It specifies what elements are affected by the declaration.

 

Declaration - the part within the curly braces

The declaration is that part of the rule that sets forth what the effect will be. In the example above, the selector is h1 and the declaration is "color: green." Hence, all h1 elements will be affected by the declaration, that is, they will be turned green. (The color property just affects the foreground text color, there are other properties for background, border, etc.)

 

Multiple style declarations for a single selector are separated by a semicolon:

 

selector { property1: value1; property2: value2; }

Any HTML element is a possible CSS1 selector. The selector is simply the element that is linked to a particular style. For example, the selector in

P { text-indent: 3em }

 

 

As an example, the following code segment defines the color and font-size properties for H1 and H2 elements: This can be better shown separated out on the page…

 

<STYLE TYPE="text/css">

  H1 {

font-size: x-large;

color: red;

}

  H2 {

font-size: large;

color: blue;

}

</STYLE>

 

 

/* make comments in your styles using these thingiees */

 

Place all your comments between these.

 

You can make notes on your styles or turn off the styles you don't want to use.

Grouping

You can set a group of styles using the same code such as the Heading codes below.

 

<html>

  <head>

        <style type="text/css">

      h1,h2,h3,h4,h5,h6 { color : #0000CC; }

      h1 { font-variant : small-caps; }

      h2 { background-color : #FFFFAA; }

    </style>

  </head>

Setting styles for the Hyperlinks

Styles can be assigned to the A element to display links, visited links and active links differently.

Here is an example of the styles. ...

 

a:link    { color: red }

a:active  { color: blue; font-size: 125% }

a:hover  { color: yellow; font-size: 125% }

a:visited { color: green; font-size: 85% }

 

 

 

There are three major ways that you can add a style to your site.

 

These are

inline – in the body of the code- this overrides all other styles.

 

Head – added to the head of the page, easy to find and modify

 

Separate page – For website where the same style is used over many pages.

 

Making the style ‘inline’, in the body of the page…

<html>

<head>

</head>

<body>

<h1 style="color:#329932;">Our Heading</h1>

<p style="font-variant:small-caps; color:#993232;">The paragraph</p>

</body>

</html>

Adding the style to the head

<html>

<head>

<style type="text/css">

h1 { color:#329932; }

p { font-variant:small-caps; color:#993232; }

</style>

</head>

Linking to a CSS page…

<html>

<head>

 <link Rel="stylesheet" HREF="SUCUstyle.CSS" MEDIA="screen" TYPE="text/css">

 </head>

.

Ranking of the 3 style placements

There is a ranking of importance between the 3 ways that you can use your CSS.

 

The overriding style is the Inline style <h1 style="color:#329932;">.

Next styles in the Head, and finally styles on a separate page.

So although you may use a separate page to set the base styles of the page, you can easily modify a particular style using the Head or the Inline styles.

 

Eventually you will want to move your styles off on to a separate page, this makes your page faster loading and  easier for Search Engines to find the relevant information. Some engines may only go through the first 50 lines of a page, so more will get indexed if the styles are off page.  It also means that one style can be uniform throughout the site.

.

Span and DIV  - how to actually place your style on your page

 

Using a style to cover individual words.

 

For this use the SPAN selector.

In the body just bracket the words with <span class="name"> and </span>

 

<html>

  <head>

       <style type="text/css">

      span.extrabold { font-weight : bold; background-color : #CCFFCC; }

      span.ultrabold { font-weight : bold; color : #227722; background-color : #CCFFCC; }

    </style>

</head>

  <body>

    <p>This is an <b>extremely</b> long paragraph that really doesn't have anything meaningful in it and doesn't serve any real purpose except to allow us to <span class="extrabold">emphasize</span> some of the text in <span class="ultrabold">different ways</span>.</p>

  </body>

</html>

This is an extremely long paragraph that really doesn't have anything meaningful in it and doesn't serve any real purpose except to allow us to emphasize some of the text in different ways

 

Use a style to cover blocks of text.

 

For this use the DIV selector.

In the body just bracket the text with <div class = “name”> and </div>

 

 

What is the difference between the amount of text in a <span> or <Div>? Who knows?

 

 <Div> is for blocks, and can have <span> inside them.

<html>

  <head>

<style type="text/css">

 

 div.sidebar {

background-color : #CCFFCC;

color : "Blue";

FONT-SIZE: 10pt;

FONT-FAMILY: Arial;}

 

 div.mainbody {

background-color : #227722;

color : "Yellow";

FONT-SIZE: 10pt;

FONT-FAMILY: Arial;}

 

 </style>

</head>

  <body>

    <div class="sidebar">

      <p>This is an extremely long paragraph that really doesn't have anything meaningful in it and doesn't serve any real purpose except to allow us to show how the DIV tag works.</p>

    </div>

    <div class="mainbody">

      <h1>Main Body</h1>

      <p>This is an extremely long paragraph that really doesn't have anything meaningful in it and doesn't serve any real purpose except to allow us to show how the DIV tag works.</p>

    </div>

  </body>

</html>

This is an extremely long paragraph that really doesn't have anything meaningful in it and doesn't serve any real purpose except to allow us to show how the DIV tag works.

Main Body

This is an extremely long paragraph that really doesn't have anything meaningful in it and doesn't serve any real purpose except to allow us to show how the DIV tag works.

.

Make a sub style of a style

 

For example set the paragraph style p and then make a special version of it p.special that changes the color.

Note the !important code that tells the new style to override the p style

 

<html>

  <head>

<style type="text/css">

      p { font-weight : bold; color : #AA0000; }

      p.special { color : #00AA00; font-weight : bold; }

    </style>

</head>

  <body>

    <h1 class="special">Notice this heading? </h1>

    <p>Even though it has a class value of "special" it won't take special rule because it is only defined for P tags, like the following...</p>

    <p class="special">The SPECIAL paragraph</p>

    <p>The paragraph</p>

  </body>

</html>

Notice this heading?

Even though it has a class value of "special" it won't take special rule because it is only defined for P tags, like the following...

The SPECIAL paragraph

The paragraph

 

In this example note the multiple selectors used.

This also shows some of the variations on the font size attribute

 

 

<html>

  <head>

<style type="text/css">

.selector1 { font-size : 14px; }

.selector2 { font-size : 12pt; }

.selector3 { font-size : 125%; }

.selector4 { font-size : x-large; }

</style>

</head>

 

<body>

<p>The Normal paragraph</p>

<p class="selector1">The Selector1 paragraph</p>

<p class="selector2">The Selector2 paragraph</p>

<p class="selector3">The Selector3 paragraph</p>

<p class="selector4">The Selector4 paragraph</p>

</body>

</html>

The Selector1 paragraph

The Selector2 paragraph

The Selector3 paragraph

The Selector4 paragraph

 

In this example note the multiple attribute for each selector …

 

a very handy way of formatting your text.

 

<html>

  <head>

        <style type="text/css">

      .selector5 { font-family : Arial; font-weight : bold; }

      .selector6 { font-style : oblique; font-weight : bolder; font-variant : small-caps; }

      .selector7 { font : bold italic; }

      .selector8 { font : oblique bolder small-caps; }

    </style>

</head>

  <body>

    <p>The Normal paragraph</p>

    <p class="selector5">The Selector5 paragraph</p>

    <p class="selector6">The Selector6 paragraph</p>

    <p class="selector7">The Selector7 paragraph</p>

    <p class="selector8">The Selector8 paragraph</p>

  </body>

</html>

The Normal paragraph

The Selector5 paragraph

The Selector6 paragraph

The Selector7 paragraph

The Selector8 paragraph;

 

Finally in this simple Introduction have a look at the fun you can have with boxes around your text.

 

Padding is the space between the text and the border.

 

Margin is the space between the border and the rest.

 

To set the padding and margin the numbers refer to the Top;

Right;

Bottom;

Left;

}

 

Instead of

margin: 1pt 1pt 1pt 1pt;, where all are the same you could just put in

margin: 1p; and this will cover them all.

 

.box {
DISPLAY: block;
BACKGROUND: #e0d090;
border: 3pt groove #008080;
padding: 15px 15px 15px 15px;
margin: 1pt 1pt 1pt 1pt;
}
.box2 {
FONT-SIZE: 10pt;
FONT-FAMILY: Arial;
margin: 5pt 10pt 5pt 10pt;
display: block;
background: #E0D090;
}

 

<Div class ="box">Here is the text for Box. The styles can be reset and changed to suit.</div>

<div class=box2">This is the text in Box 2. This is really easy to use as it saves you from making tables inside of tables. The entire box is only surrounded by these simple div statements.</div>

Here is the text for the Box. The styles can be reset and changed to suit.

.

This is the text in Box 2. This is really easy to use as it saves you from making tables inside of tables. The entire box is only surrounded by these simple div statements.