Jan's Web Scripting Demo: CSS

Cascading Style Sheets (CSS) offer you a lot of flexibility in formatting what you see on a web page. If you are not familiar with CSS, you should take a look at Jan's CSS demo. We will just review some basics for the current demo.

A style defines one or more properties for an element of a web page, like a paragraph, a heading, the whole body of the page, or any other part of the page. Or, the style may be for a class that can be applied to an element.

A style sheet is a collection of one or more styles.

---

Where do you put a style?

• External: An external style sheet is linked to the page in the HEAD.
  <link rel="stylesheet" href="demo.css" type="text/css">
  There are no HTML tags in such an external file, just a list of the selectors and classes.
• Internal: Between STYLE tags in the HEAD section of the page
  <style type="text/css">
  ... styles listed here...
  </style>
• Inline: In the STYLE attribute of an element
  
  <div style="width:300px; height:400px;background-color:wheat; color:red;font-size:large;">

---

Syntax

A style has a simple syntax but you must be very precise with your typing and naming.

Each rule has a selector and a declaration.
The general form is:    selector {property:value;property:value;}

A colon(:) separates a property from its value. A semicolon (;) separates property-value pairs.

In the example above, the selectors are h3, a third level heading, and p, a paragraph. The declaration is the part between the curly brackets { }, also called braces. Of course a declaration can have just one property:value or many.

The line breaks are ignored in a style sheet you can write separate lines for easy reading. Keep all on one line if there is one short property, like
h1 {color:maroon;}.

A value that has a space must be between quotes or double-quotes, like "Comic Sans MS" in the example above.

No spaces are allowed between a number and its unit of measure, like 12pt in the example above.

---

Write a Class

The general form for a class:
     .classname {property:value;property:value;}

.explanation {background-color: AliceBlue;color:green;}

The general form for a class that can only be applied to a specific type of element:      element.classname {property:value;property:value;}

p.explanation {background-color: AliceBlue;color:green;}

A class name cannot have a space in it or start with a number.

---

Apply a Class

To apply a class to an element, you write a CLASS attribute inside the opening tag:

<p class="explanation">

Here is a paragraph with the class "explanation" applied.

If the class was defined for a specific element, like h3.explanation, it will be ignored if you apply it to a different type of element like a P or DIV or H1.

Multiple classes: You can apply multiple classes at once to an element. The order in the style sheet makes a difference but not the order in the element.

If the styles are in the HEAD as:
.explanation {background-color: AliceBlue;color:green;}
.excited {font-style:italic; color:red;}
<div class="explanation excited"> will produce:

Color for text is the only property that both styles set. What you see is from the last class applied, excited.

---

Write an ID Style

Any element can have an ID, like <p id="myfooter">.

In a style sheet, you can write a style that will apply ONLY to the element with that name. A particular ID can be used by only one element on the page.

#myfooter {font-size:smaller;color:#999999;}

This is a paragraph with id="myfooter"

---

The Cascade

The power of cascading style sheets is in the 'cascade'. The styles are applied from the outside in.

External > Internal > Inline

So an inline style overrides all other style settings. (This is a good reason to avoid writing inline styles!)

For example, you can define some properties for several elements at the same time and then define other properties differently.

Which would create: