1 :: What Is CSS (Cascading Style Sheets)?
CSS (Cascading Style Sheets) is a technical specification that allows HTML document authors to attach formatting style sheets to HTML documents. When HTML documents are viewed as Web pages through Web browsers, the attached style sheets will alter the default style sheets embedded in browsers.One of the fundamental features of CSS is that style sheets cascade; authors can attach a preferred style sheet, while the reader may have a personal style sheet to adjust for human or technological handicaps. The rules for resolving conflicts between different style sheets are defined in CSS specification.
CSS specification is maintained by W3C. You can download a copy of the specification at http://www.w3.org/.
Tutorials below are based Cascading Style Sheets, level 1, which has been widely accepted as the current standard.
|
2 :: What Is the Basic Unit of CSS?
The basic unit of CSS is a definition of a style property for a selected HTML tag written in the following syntax:html_tag_name {style_property_name: style_property_value}
For example:
/* set background color to black for the <BODY> tag */
BODY {background-color: black}
/* set font size to 16pt for the <H1> tag */
H1 {font-size: 16pt}
/* set left margin to 0.5 inch for the <BLOCKQUOTE> tag */
BLOCKQUOTE {margin-left: 0.5in}
How Many Ways to Attach CSS to HTML Documents?
There are 3 ways to attach CSS to HTML documents:
► Included in the STYLE attribute of HTML tags.
► Included in the STYLE tag inside the HEAD tag.
► Included in an external file and specify it in the LINK tag inside the HEAD tag.
|
3 :: How To Include CSS Inside a HTML Tag?
If you want to include CSS inside a HTML tag, you can use the STYLE attribute as <TAG STYLE="css_definition" ...>. Of course, the CSS definition will only apply to this instance of this tag. The following tutorial exercise shows you how to set background to gray on a <PRE> tag:<p>Map of commonly used colors:</p>
<pre style="background-color: gray">
black #000000
white #ffffff
gray #7f7f7f
red #ff0000
green #00ff00
blue #0000ff
</pre>
|
4 :: How To Include CSS Inside the HEAD Tag?
If you want to include CSS inside the HEAD tag and apply to the entire HMTL docuemnt, you can use the STYLE tag as <STYLE TYPE="text/css">css_definition</STYLE>. The following tutorial exercise shows you how to set body background to black and paragraph text to yellow:<html><head>
<title>CSS Included</title>
<style type="text/css">
BODY {background-color: black}
P {color: yellow}
</style>
</head><body>
<p>Welcome to GlobalGuideLine.com.
You should see this text in yellow on black background.</p>
</body></html>
|
5 :: How To Store CSS Definitions in External Files?
If you want to share a set of CSS definitions with multiple HTML documents, you should those CSS definitions in an external file, and link it to those HTML documents using the LINK tag in the HEAD tag as:<HEAD>
...
<LINK REL=stylesheet TYPE="text/css" HREF="css_file_url"/>
...
</HEAD>
Below is a CSS file called, GlobalGuideLine.css, that stores the same CSS definitions used in the previous exercise:
BODY {background-color: black}
P {color: yellow}
If you modify the HTML document with the LINK tag instead of the STYLE tag, you can get the same result:
<html><head>
<title>CSS Linked</title>
<link rel=stylesheet type="text/css" href="GlobalGuideLine.css"/>
</head><body>
<p>Welcome to GlobalGuideLine.com.
You should see this text in yellow on black background.</p>
</body></html>
|
Home 
Webmaster Said:
Thank you.
fire Said:
Tamer El-Sayed Saad Said:
Sunil Sharma Said: