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:
font-family: Arial; margin-left: 10%}
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.
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.
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.
You can import a style sheet with CSS's @import statement:
<STYLE TYPE="text/css" MEDIA="screen, projection">
<!--
@import url(http://www.tongchiu.com/gen.css);
@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 is the style attached to one specific element. Any opening tag may take the style attribute:
<P style="font-size:
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">
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:
</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 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:
You can take any opening HTML tag and use it as a selector:
h3 {color: red}
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-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 }
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.
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 "-//W
<HTML><HEAD><TITLE></TITLE>
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<STYLE TYPE="text/css">
<!--
.zn { font-size:
-->
</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 (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>
You can declare a color as the following example:
P {color: red}
H2 { color: #000080 }
LI {color: rgb(12%, 51%, 62%)}
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://www.internetcollege.com/bg1.gif) }
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://www.internetcollege.com/bg1.gif) }
BLOCKQUOTE { background: #6699ff }
P { background: url(image/line.gif) #e2e9ee fixed }
TABLE { background: #ffeeff url(house.gif) no-repeat top center }
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:
LI { font-size: 80% }