CSS Module

CSS code looks like this:
p { font-size: 12pt; color: blue; ... etc.;}

The basic elements are:
selector { property: value; next property: value; ... etc.;} - example: p { font-size: 12pt; color: blue; ... etc.;}

Common notation in .css stylesheets:
p {
    font-size: 12pt;
    color: blue;
    ... etc.;
    }

CSS code can be inserted into 4 places - in different ways:

1. external .css stylesheet
Example in .css: p { font-size: 12pt; }

2. .html document's head
Example in .html <head>: <style> h3 { color: blue; } </style>

3. .html document's body or it's children elements
Example in <body><element>: <h3 style="color:yellow; background-color:blue;">

4. link a new stylesheet to an existing .css file
Example: @import "path/newstyle.css" - path must be relative to the location of the file that we are in, if embedded in the .html file then relative to that.

4 methods of adding CSS to HTML
So You Want A Page Jump, Huh? - htmlgoodies.com

This is a yellow heading <h2> with a blue background - text-align:center; by it's .css stylesheet.

Now we limit the background to stick strictly to the text via display:inline;.
Because of this, text-align:center; doesn't work anymore by it's .css stylesheet -
so we solve it via <div style="text-align: center;>.

Now we use more padding: 10px; and a new font-family: Palatino etc. - font-size: 8px;

And here again <h3> with it's default settings. :-)

We try <p style="color: green; background-color: orange; display:inline;

text-align:center; padding: 8px; font-family:Georgia, 'Times New Roman', Times, serif; font-size: 8pt;">

- font works! - padding too, but not line break padding - so we add some  . :-)

Class & Id - using <div> & <span>

This is <p class="p1">. color:#0B0; font: Arial, Helvetica, sans-serif; font-size: 14pt; font-weight: bold;. CSS used .p1.

And this is <p class="p2">. color:#E00; font:"Times New Roman", Times, serif; font-size: 18pt; font-weight: bold;. CSS used p.p2.

Now id="span1" - This text starts now with <span id="span1"> and continues up to "here", and the rest is again <p>. CSS used #span1.

We repeat id="span1" and see what happens: This should do the same, and this not. :-)

Using it in <h2 id="span1"> works, too. :-)

And repeating <span class="p1"> doesn't generate a line break as <div> will do. :-) and hopefully still works ... yes! and now just <p> again. :-)

Works like span, but div generates a line break as we can see here -

Proof: We use p.p2 in CSS, "and this is the result - ", it doesn't work, just works for <p class="p2">.

Create <div> Objects

CSS Values

Example: {font-size: 12px } px stands for pixel. Also possible:

w3schools.com - Source Code & Result

Tables

Testing Area

The box below combines transitions for: width, height, background-color, transform. Hover over the box to see these properties animated.

	Area	Mean depth
	million km²	m
Arctic	13,000	1,200
Atlantic	87,000	3,900
Pacific	180,000	4,000
Indian	75,000	3,900
Southern	20,000	4,500
Total	361,000
Mean	72,000	3,800