CSS stands for Cascading Style Sheets. This is a simple styling language
which allows attaching style to HTML elements. Every element type as well
as every occurance of a specific element within that type can be declared
an unique style, e.g. margins, positioning, color or size. So you might
consider these style sheets as templates, very similar to templates in
desktop publishing applications. For example:
body { background-color: white; color: darkblue;font-size: 10pt;
font-family: Arial; margin-left: 10%}
Linking and Embedding
There are many ways to link style sheets to HTML, each carrying its own
advantages and disadvantages. New HTML elements and attributes have been
introduced to allow easy incorporation of style sheets into HTML documents.
External style sheets
An external style sheet can be linked with any number of HTML documents
by using <link> that is placed in the document HEAD. The tag's
various attributes indicate things about the style sheet - the rel
attribute the type of link (a style sheet); the type attribute the
type of style sheet (always text/css); and the href attribute the
location of the style sheet. This is a very convenient way of formatting
the entire site as well as restyling it by editing just one file.
For example:
<HTML><HEAD>
<LINK rel="stylesheet" type="text/css" href="basic.css">
</HEAD>
<BODY> ... </BODY>
</HTML>
Once you have linked the style sheet to your page, you then have to create
the style sheet. For example:
body { font-family: Verdana, Helvetica, Arial, sans-serif;
color: darkblue; background-color: #ffeeff}
If you saved the example above as a style sheet, then every page that
links to it will have the specified styles. Files containing style information
must have extension .css.
Embedded Style Sheets
If you have a single document that has a unique style, you can
use an embedded style sheet. If the same style sheet is used in
multiple documents, then an external style sheet would be more appropriate.
A embedded style sheet is inside the HEAD element with the STYLE
element and will apply to the entire document:
<STYLE TYPE="text/css" MEDIA=screen>
<!--
body { background: url(flower.gif) lightyellow; color: darkblue }
.zn { margin-left: 8em; margin-right: 8em }
-->
</STYLE>
The required TYPE attribute is used to specify a media type, as is its
function with the LINK element. You should write the style sheet as a
HTML comment, that is, between <!-- and --> to hide the content
in browsers without CSS support which would otherwise be displayed.
Importing Style Sheets
You can import a style sheet with CSS's @import statement:
<STYLE TYPE="text/css" MEDIA="screen, projection">
<!--
@import url(http:
@import url(/product/file.css);
table { background: yellow; color: #003366 }
-->
</STYLE>
The @import allows you to keep some things the same while having others
different; and follows this syntax: @import url(gen.css);
Note: If more than one sheet is imported they will cascade in order they
are imported - the last imported sheet will override the next last; the
next last will override the second last, and so on. If the imported style
is in conflict with the rules declared in the main sheet then it will
be overridden.
Inline Style
Inline style is the style attached to one specific element. Any
opening tag may take the style attribute:
<P style="font-size: 10pt">.
To use inline style, one must declare a single style sheet language for
the entire document using the Content-Style-Type HTTP header extension.
With inlined CSS, an author must send text/css as the Content-Style-Type
HTTP header or include the following tag in the HEAD:
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
Syntax
Basic syntax as follows:
selector { property: value }
That is a property (such as color) followed by a colon (:) and a value.
A property is assigned to a selector in order to manipulate
its style. Examples of properties include color, margin, and font. The
value is an assignment that a property receives. Multiple style
declarations for a single selector may be separated by a semicolon. The
following example defines the color and font-size properties for H1 and
P elements:
<HEAD>
<TITLE>CSS Example</TITLE>
<STYLE TYPE="text/css">
H1 { font-size: x-large; color: darkred }
P { font-size: 12pt; color: darkblue }
</STYLE>
</HEAD>
You can use grouping of selectors and declarations to decrease
repetitious statements within style sheets. For example:
H1, H2, H3, H4 { color: #666666; font-family: Arial }
Selectors
Selectors are used to associate style declarations with an element or
elements. This is done by placing the declarations within a block (enclosed
in {}) and preceding it with a selector. For example:
p {color: #008000}
div {color: #cccccc; font-size: 14pt}
Tag selectors
You can take any opening HTML tag and use it as a selector:
h3 {color: red}
Class selectors
These allow you to give elements a particular name. For example:
<P class="zn"> .... </P>
In a style sheet, The syntax as the below:
P.zn { color: blue }
Or like this:
.zn { color: blue }
Pseudo-class selectors
Pseudo-classes can be assigned to the A element to display links,
visited links and active links differently. The anchor element can
give the pseudo-classes link, visited, or active. A visited link
could be defined to render in a different color and even a different
font size and style. The sample style sheet might look like this:
A:link { color: red }
A:active { color: blue; font-size: 150% }
A:visited { color: green }
ID selectors
These selectors are very similar to classes except there can only
be one element with a given ID in a document. An ID selector is
assigned by using the indicator "#". For example:
#abc { text-style: bold }
To use an ID selector:
<P ID=abc>Welcome to my website</P>
Note: IDs like classes they should be in lowercase, may not start with
a number or contain spaces. This selector type should only be used sparingly
due to its inherent limitations.
Span
This element may be used as a selector in a style sheet, and it
also accepts the STYLE, CLASS, and ID attributes. Some examples
of SPAN follow:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML><HEAD><TITLE></TITLE>
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<STYLE TYPE="text/css">
<!--
.zn { font-size: 28pt }
-->
</STYLE>
</HEAD>
<BODY>
<P><SPAN CLASS=zn>These words could be big.</SPAN></p>
<p><SPAN STYLE="font-family: Arial;font-size:12"> And these ones are different.</SPAN>.</P>
</BODY></HTML>
Div
DIV (short for "division") is a block-level element that,
in function, is similar to the SPAN. But DIV may contain paragraphs,
headings, and tables. For example:
<DIV CLASS=zn>
<H1>Welcome</H1>
<P>Hello World</P>
<P>Welcome to my website!</P>
</DIV>
Properties
Color
You can declare a color as the following example:
P {color: red}
H2 { color: #000080 }
LI {color: rgb(12%, 51%, 62%)}
Background
Background-color This sets the background color of an element.
For example:
BODY { background-color: white }
H1 { background-color: #000080 }
Note:
1. To help avoid conflicts with user style sheets, background-image should
be specified whenever background-color is used. In most cases, background-image:
none is suitable.
2. Netscape 4.* does not color in the background of block elements if
they are given a background color that is different from BODY - it does
not color in the spaces between words. To avoid this, explicitly set border:
none
Background-image Specified with background-image. For example:
BODY { background-image: url(/images/cloud.gif) }
P { background-image: url(http:
Background-repeat This states the tiling of the background image.
The possible values include: repeat | repeat-x | repeat-y | no-repeat.
The repeat-x value will repeat the image horizontally while the repeat-y
value will repeat the image vertically. For example:
BODY { background: white url(candybar.gif);
background-repeat: repeat-x }
In the above example, the image will only be tiled horizontally. IE only
draws repeat-x to the right, and repeat-y down, not left and right and
up and down as it should do.
Background This allows one or more of the properties to be specified
in the order color, image, repeat, attachment, position. For examples:
BODY { background: white url(http:
BLOCKQUOTE { background: #6699ff }
P { background: url(image/line.gif) #e2e9ee fixed }
TABLE { background: #ffeeff url(house.gif) no-repeat top center }
Fonts
Font-family This allows a specific font to be used. For example:
P { font-family: Times }
You may specify a couple fonts separated by comma. In case that if your
preferred font is not available, your second choice is used. For example,
font-family: Times, Arial. Note that any font name containing whitespace
must be quoted, with either single or double quotes. For example:
P { font-family: "New Times Roman", Times, serif }
Font-size This can be specified as a length, or one of the following
keywords: xx-small, x-small, small, medium (initial), large, x-large,
xx-large. For example:
H2 { font-size: large }
P { font-size: 10pt }
LI { font-size: 80% }
Table { font-size: small}
Note: Internet Explorer 3 and Netscape 4.* treat all relative units and
% as relative to the element default rather than as relative to the parent
element.
Font-style This defines that the font be displayed in one of three
ways: normal, italic
or oblique (slanted). For example:
P {font-style: italic}
Font-weight This is used for specifying the weight of the font
that can be specified as normal (initial value), or bold. For example:
P {font-weight: bold}
It can also be specified as an absolute number, being one of 100, 200,
300, 400 (the same as normal), 500, 600, 700 (the same as bold), 800,
or 900, where 100 is the lightest and 900 the most bold. For example:
H1 { font-weight: 800 }
Font This may be used as a shorthand for the various font properties.
For example:
P { font: italic bold 12pt/14pt Times, serif }
This specifies paragraphs with a bold and italic Times or serif font
with a size of 12 points and a line height of 14 points.
Text
Text-align The value can be left (initial value), right, center,
or justify (aligns to both margins). Text-align only applies to block elements
and is inherited. For example:
H1 { text-align: center }
P.newspaper { text-align: justify }
Text-decoration This allows text to be decorated through one of five
properties:
underline,
overline,
line-through,
blink, or the default,
none. For example:
A:link, A:visited, A:active { text-decoration: none }
Text-transform allows text to be transformed by one of four properties:
none (initial value), lowercase, uppercase, or capitalize (capitalize
the first letter of every word). It applies to all elements and is inherited.
For example:
H1 { text-transform: uppercase }
H2 { text-transform: capitalize }
Margin
This property sets the margin of an element by specifying a length or
a percentage. Each element can have four margins - left, right, bottom
and top. These are defined by the margin-left, margin-right, margin-top,
margin-bottom properties. For example:
P {margin-left: 20px}
The margins can be specified for all four sides at once with the margin
shorthand. Margins can be negative, and initially margins are 0.
P {margin: 10px 12px 6cm 8pt}
This would give P a top margin of 10 pixel, a right margin of 12 pixel,
a bottom margin of 6 pixel and a left margin of 8 pixel.
Rules
Inheritance Basically a selector which is nested within another
selector will inherit the property values assigned to the outer selector.
For example, a font defined for the BODY will also be applied to text
in a paragraph.
! important A style can be designated as important by specifying
! important. A style that is designated as important will win out
over contradictory styles of otherwise equal weight. A ! important
statement like this:
BODY { background: url(man.gif) white; background-repeat: repeat-x ! important }
The weight sort The weight sort sorts declarations according to
their weight. Declarations can have normal weight or important weight.
Declarations are made important by the addition of !important (or ! important).
For example:
P {font-size: 36pt !important} P {font-size: 16pt}
36 pt will result because that declaration has greater weight.
The order sort When two rules have the same weight, the last rule
specified wins. Thus:
P {color: red}
P {color: green}
It would result in green.
Case sensitivity All CSS is case insensitive.
