Design  | SFC  |  NOS  |  Code |  Diary  | WWW |  Essay |  Cisco | [Home]
 

[Bill's Home]
[Old Page]

Quick links

Design Tips
WinSock in Visual Basic
WinSock multiserver
DHTML
CSS
Flash/XML
ASP
PHP
JavaScript
Java
Delphi
RSA
WAP
Java Socket Programming
Subnetting
RS-232
Subnetting

Source Code

Pascal
Java
C Programming
Applied PC Interfacing
WinSock client
WinSock server
FTP client
HTTP client
Java client/server
HTTP client
Subnetting in VB
RS-232 in VB
WinSock Multiserver

 

 

 

 

CSS Introduction

HTML has been widely accepted. Its initial objectives were to present text and graphic with integrated hypertext links, which allowed users to move easily between pages which were stored either locally or on different page servers. For this it created simple style tags for paragraphs and section headings. These included:

  • <P>. Defines a new paragraph.
  • <H1>, <H2>, . <H6>. Header 1, Header 2, . Header 6.

Along with this the <A> tag allowed support for hypertext links, and images can be incorporated with the <IMG> tag. This worked well for the basic layout of text and graphics, but fails to properly present objects in a precise form. This is mainly due to the lack of re-definition of the standard styles, thus the designer had very little control over the actual presentation of the HTML page in the browser. With standard HTML the designer cannot change the actual format of the standard styles, or define new ones, which could be reused in either page elements.

CSS tries to overcome these problems by defining a language which can be used to define font and text layout styles. World Wide Web Consortium (W3C) has standardized the format, so that most browsers support it. The CSS has not only defined a standard for WWW browsers, but one which can be used in any print layout system.

An example of a CSS definition is:

CSS style example

<style type="text/css">
H3
{
font: 14pt Courier New, Courier, mono;
margin-right: 8px; margin-left: 8px;
left: auto; text-align: justify
}
</style>
<h3>Some text</h3>

Executed code

Some text

This changes the style of the <H3> tag to a font size of 14 point, with a font of either Courier New, Courier or any other mono spaced font. The margins have been set at 8 pixels on the left and right hand side, and the text align is set to justify.

Often there is a requirement to change a style of a small amount of text. In CSS this is possible where the change to a style is defined using the style modifier. For example the following changes the style for <H1> for all the text up to the end of the closing </H2> tag:

CSS style example

<h1 style='font: 14pt Courier New, Courier, mono; margin-left:0cm;
text-indent:0cm;tab-stops:54.0pt'>
Some text</h1>
<h1>Some more text</h1>

Executed code

Some text

Some more text

Typically, also, it is required to modify a standard style with the addition of additional styles definition, or to change defined ones. This can be done by defining a new class style onto the standard one. For example the following modify the <P> style and defines a new class (NewFormat):

CSS style example

<style type="text/css">
p.NewFormat
{
margin:0.5cm;
margin-bottom:.0.5cm;
text-align:left;
line-height:12.0pt;
tab-stops:14.2pt 1.0cm 42.55pt 2.0cm
punctuation-wrap:simple;
text-autospace:none;
font-size:12.0pt;
font-family:Times New Roman;
}
</style>

<p class=NewFormat> This is the new text

Executed code

This is the new text

This will change the <P> style for the new class named NewFormat, and modify the font type to Times New Roman, of a font size of 12 points. In this case the <P> will not be modified with this changed.