HOME

Barry Nirmal   Adding first touch of style

Barry Nirmal

Abstract: This article teaches you the basic concepts of Cascading Style Sheets (CSS).

Let us suppose that you are required to write an article entitled "Dangers of Brainwashing". We will have the following three paragraphs in it.

Dangers of Brainwashing

Power of suggestion

Dealing with tricks of suggestion, Thouless wrote, "...if statements are made again and again in a confident manner, without argument or proof, then their hearers will tend to believe them quite independently of their soundness and of the presence or absence of evidence for their truth. More particularly will his hearers tend to accept the suggestion of a speaker if he has what we may call "prestige" the acknowledged dignity of authority possessed by Cabinet Ministers, bishops,...." Repeated affirmation, a confident delivery, and prestige are the essence of the technique.

Goebbels

The consequences of falling prey to propaganda can be disastrous. The Encyclopedia Britannica, in its reference to Goebbels, states: ".. Goebbels, the leading propagandist of the Nazi party.. mastered, to the point of near perfection, every contemporary device for leading and misleading the public. It was largely due to his extraordinarily persuasive propaganda that the German people followed Hitler into the abyss.."

Food for Thought

Free men in a free society must learn not only to recognize this stealthy attack on mental integrity and fight it, but must learn also what there is inside man's mind that makes him vulnerable to this attack, what it is that makes him, in many cases, actually long for a way out of the responsibilities that republican democracy and maturity place on him.

So, our essay has three paragraphs each with its own heading. Our first and third paras have colored background and the first para is enclosed within a box. Our first para is also pushed in, i.e. it has larger margin on both left and right.

As you can see, performing this task using conventional HTML coding, i.e. without using CSS, is indeed arduous. Here is the step by step procedure for creating this document.

(1) Create a file called style.css and store it on your server in the same directory where the HTML file will be. 


BODY {   MARGIN-LEFT: 10%; MARGIN-RIGHT: 10%; font-size: 100%;
font-family:  Verdana, sans-serif;  }

H1 {  color: blue; font-family: Garamond, "Times New Roman", serif;
  MARGIN-LEFT: -3% }

H2 {  color: blue; font-family: Garamond, "Times New Roman", serif;
  MARGIN-LEFT: -3% }

H3 {  color: blue; font-family: Garamond, "Times New Roman", serif;
  MARGIN-LEFT: -3% }

H4 {  color: blue; font-family: Garamond, "Times New Roman", serif;
  MARGIN-LEFT: -3% }

H5 {  color: blue; font-family: Garamond, "Times New Roman", serif;
  MARGIN-LEFT: -3% }

H6 {  color: blue; font-family: Garamond, "Times New Roman", serif;
  MARGIN-LEFT: -3% }

P.abstract { FONT-WEIGHT: 100;
  font-style: italic; font-family: Arial; color:green ;  }

P.quote { MARGIN-LEFT: 3%; MARGIN-RIGHT: 3%; font-style: italic;
   color: blue;  }

EM {   FONT-WEIGHT: normal; FONT-STYLE: italic; color:red;  }

STRONG { FONT-STYLE: italic; FONT-WEIGHT: bold; color:red;   }

PRE {
  FONT-WEIGHT: bold; COLOR: green; FONT-FAMILY: monospace; WHITE-SPACE: pre
}

.centered_text {   TEXT-ALIGN: center }

DIV.boxed_colored {   BORDER-RIGHT: thin solid;
  BACKGROUND-COLOR: rgb(255,204,153);
  MARGIN-LEFT: 3%; MARGIN-RIGHT: 3%;
  PADDING-RIGHT: 0.2em; BORDER-TOP: thin solid;
  PADDING-LEFT: 0.2em; PADDING-BOTTOM: 0.2em;
  BORDER-LEFT: thin solid; WIDTH: 100%;
  PADDING-TOP: 0.2em;
  BORDER-BOTTOM: thin solid }

DIV.colored_nobox {   BORDER-RIGHT: medium none; PADDING-RIGHT: 0.5em;
  BORDER-TOP: medium none;
  PADDING-LEFT: 0.5em; PADDING-BOTTOM: 0.5em; BORDER-LEFT: medium none;
  WIDTH: 100%;
  PADDING-TOP: 0.5em; BORDER-BOTTOM: medium none;
  BACKGROUND-COLOR: rgb(204,204,255) }

(2) Create the following HTML file: 


<html>

<head>

<link rel="stylesheet" href="style.css">

</head>

<body>

<h1> Dangers of Brainwashing </h1>

<h2> Power of suggestion </h2>

<div class=boxed_colored>

<p>

Dealing with tricks of suggestion, Thouless wrote,
"...if statements are made again and again in a confident manner,
without argument or proof, then their hearers will tend to believe
them quite independently of their soundness and of the presence or
absence of evidence for their truth. More particularly will his
hearers tend to accept the suggestion of a speaker if he has
what we may call "prestige" the acknowledged dignity of
authority possessed by Cabinet Ministers, bishops,...."
Repeated affirmation, a confident delivery, and prestige are
the essence of the technique.

</p>

</div>


<h3> Goebbels </h3>

<p>

The consequences of falling prey to propaganda can be disastrous.
The Encyclopedia Britannica, in its reference to Goebbels, states:
".. Goebbels, the leading propagandist of the Nazi party.. mastered,
to the point of near perfection, every contemporary device for leading
and misleading the public. It was largely due to his extraordinarily
persuasive propaganda that the German people followed
Hitler into the abyss.."

</p>

<h3> Food for Thought </h3>

<div class=colored_nobox>
<p>

Free men in a free society must learn not only to recognize this
stealthy attack on mental integrity and fight it, but must learn
also what there is in side man's mind that makes him vulnerable to
this attack, what it is that makes him, in many cases, actually
long for a way out of the responsibilities that republican
democracy and maturity place on him.
</p>


</div>

</body>
</html>

(3) Open the HTML file created above in web browser. The display will be as originally required.

Explanation of the code given above

First of all, let us understand that the HTML code given above is linking to an external stylesheet when it specified in the head tag: 


<head>

<link rel="stylesheet" href="style.css">

</head>
The code in "style.css" is written in a new language called CSS. This is a different language than HTML and you must learn its rules. If you do not learn its rules and proceed on the assumption that its rules are same as those of HTML, you will end up wasting a lot of your valuable time. For example, it has the following: 

DIV.boxed_colored {   BORDER-RIGHT: thin solid;
If you change the line to the following by placing a space before the period and after it, like you do with Java code, it will not work: 

DIV . box_colored {   BORDER-RIGHT: thin solid;
It will not give you any error message, but the first para will not have a box drawn around it.

Click here to learn the rules of the CSS-1 language.

Now let us look at the following in the style sheet: 

BODY {   MARGIN-LEFT: 10%; MARGIN-RIGHT: 10%; font-size: 100%;
font-family:  Verdana, sans-serif;  }
The example above is a simple CSS rule. A rule consists of two main parts: selector ('BODY') and declarations (e.g. 'font-size: 100%'). The declaration has two parts: property ('font-size') and value ('100%'). The selector is the link between the HTML document and the style sheet, and all HTML element types are possible selectors.

Now let us look at the following rule in our style sheet: 


.centered_text {   TEXT-ALIGN: center }
Since there is no tage name before the period, this rule can be used by any HTML tag. For example, we can have: 

<h1 class=centered_text>Glory to CSS </h1>
The text "Glory to CSS" will appear centered. And if we use: 

<div class=boxed_colored>
<p class=centeerd_text>
Dealing with tricks of suggestion, Thouless wrote,
"...if statements are made again and again in a confident manner,
without argument or proof, then their hearers will tend to believe
them quite independently of their soundness and of the presence or
absence of evidence for their truth. More particularly will his
hearers tend to accept the suggestion of a speaker if he has
what we may call "prestige" the acknowledged dignity of
authority possessed by Cabinet Ministers, bishops,...."
Repeated affirmation, a confident delivery, and prestige are
the essence of the technique.
</p>
</div>
Then the above text will appear in a box and inside the box, the text shall be such that each line will not be left aligned but center aligned.

Now let us look at the following rule: 


DIV.boxed_colored {   BORDER-RIGHT: thin solid;
  BACKGROUND-COLOR: rgb(255,204,153);
  MARGIN-LEFT: 3%; MARGIN-RIGHT: 3%;
  PADDING-RIGHT: 0.2em; BORDER-TOP: thin solid;
  PADDING-LEFT: 0.2em; PADDING-BOTTOM: 0.2em;
  BORDER-LEFT: thin solid; WIDTH: 100%;
  PADDING-TOP: 0.2em;
  BORDER-BOTTOM: thin solid }
This rule is for HTML tag named DIV and class named box_colored. To use this rule you say in HTML code: 
<div class=boxed_colored>
- - -

</div>

In the above rule, for border, we are specifying four properties: BORDER-TOP: thin solid; BORDER-BOTTOM: thin solid; BORDER-LEFT: thin solid; BORDER-RIGHT: thin solid; This gives you the freedom of specifying broder only on top and bottom, or on left and right only, or on one side only. For example, to specify border only on top and bottom, we can create another rule as follows: 


P.border_top_bottom {
  BORDER-TOP: thin solid;
  BORDER-BOTTOM: thin solid;
  BORDER-LEFT: none;
  BORDER-RIGHT: none;
}
Now consider the following rule which draws a solid border all around in red: 

P.border_nice  {
  BORDER-STYLE: solid;
  border-color:red;
}
Now let us suppose that we want to display the folllowing:

Mind Control Techniques
used by cults
Technique 1
Technique 2
Technique 3
Technique 4
Technique 5
Technique 6

Dealing with tricks of suggestion, Thouless wrote, "...if statements are made again and again in a confident manner, without argument or proof, then their hearers will tend to believe them quite independently of their soundness and of the presence or absence of evidence for their truth. More particularly will his hearers tend to accept the suggestion of a speaker if he has what we may call "prestige" the acknowledged dignity of authority possessed by Cabinet Ministers, bishops,...." Repeated affirmation, a confident delivery, and prestige are the essence of the technique.

Here you will find that the text is to the left of the table. The table has the heading in one color and the color of the rows alternate. This is achieved by using the following style rules: 


TD {
  font-size: 80%;
  font-family: sans-serif;
}
TD.shaded1 {
  BACKGROUND: rgb(255,204,153);
}
TD.shaded2 {
  BACKGROUND: rgb(255,255,153);
}


TH.shaded {
  BACKGROUND: rgb(204,204,153);
}
In the HTML file you use the following code: 

<p> <table border=1 align=right>
<tr><th class=shaded>Mind Control Techniques <br>used by cults </th>
</tr>
<tr><td class=shaded1 >Technique 1  </td>
</tr>
<tr><td class=shaded2 >Technique 2 </td>
</tr>
<tr><td class=shaded1 >Technique 3 </td>
</tr>
<tr><td class=shaded2 >Technique 4 </td>
</tr>
<tr><td class=shaded1 >Technique 5  </td>
</tr>
<tr><td class=shaded2 >Technique 6 </td>
</tr>
</table>

<div class=colored_nobox>
<p>

Dealing with tricks of suggestion, Thouless wrote,
"...if statements are made again and again in a confident manner,
without argument or proof, then their hearers will tend to believe
them quite independently of their soundness and of the presence or
absence of evidence for their truth. More particularly will his
hearers tend to accept the suggestion of a speaker if he has
what we may call "prestige" the acknowledged dignity of
authority possessed by Cabinet Ministers, bishops,...."
Repeated affirmation, a confident delivery, and prestige are
the essence of the technique.

</p>
</div>

** The End **