CSS Module

Home - Web Design
HTML Workshop
CSS Workshop
JavaScript Workshop
Graphics Workshop
Web History
CSS Module - css_module.css
Web ☯ Zen
Plain Text

General Basics

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 &nbsp;. :-)

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. :-)

Try .p2 with a new color value in body - works :-)

We try <div class="p1">, in .css stylesheet .p1:

Works like span, but div generates a line break as we can see here -
if we use p.p1 it will not work for <div> etc., just for <p>.

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

Text 1
Text 2
Text 3 and more
next line etc.

Text 4

Text 5

CSS Values

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

w3schools.com - Source Code & Result


Area Mean depth
million km2 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

Testing Area

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

Abra kad abra!

Intro to CSS 3D transforms

Test Java Ball

Click anywhere to move the ball - jsfiddle.net

Copyright © 2013 by IDL Productions