CSS IN HTML
Sample of the pdf document
Introduction
DHTML(Dynamic HTML)
is a combination of HTML, CSS, and JavaScript. DHTML is used to create dynamic
and interactive Web sites. W3C(World
wide web consortium) once said: "Dynamic HTML is a term used by some
vendors to describe the combination of HTML, style sheets and scripts that
allows documents to be animated."
HTML
was never intended to contain tags for formatting a document. HTML was intended
to define the content of a document, like:
<h1>This
is a heading</h1>
<p>This
is a paragraph.</p>
When
tags like <font>, and color attributes were added to the HTML 3.2
specification, it started a nightmare for web developers. Development of large
web sites, where fonts and color information were added to every single page,
became a long and expensive process.
To
solve this problem, the World Wide Web Consortium (W3C) created CSS. All
browsers support CSS today.
- CSS
stands for Cascading Style Sheets
- Styles
define how to display HTML elements in browser.
Importance of CSS:
CSS
defines HOW HTML elements are to be displayed. Styles are normally saved in
external .css files. External style sheets enable you to change the appearance
and layout of all the pages in a Web site, just by editing one single file
(.css file).
CSS Syntax:
A
CSS rule has two main parts: a selector, and one or more declarations:
h1
{
color:blue;font-size:12px;
}
here
h1àSelector
color:blueàDeclaration
coloràProperty
blueàValue
font-size-12pxàDeclaration
font-sizeà Property
12pxà Value
;(semicolon)à Separator between
two Declaration.
The
selector is normally the HTML element you want to style. Each declaration
consists of a property and a value. The property is the style attribute you
want to change. Each property has a value.
CSS Example:
CSS
declarations always ends with a semicolon, and declaration groups are
surrounded by curly brackets:
p
{color:red;text-align:center;}
To
make the CSS more readable, you can put one declaration on each line, like
this:
Example:
p
{
color:red;
text-align:center;
}
{
color:red;
text-align:center;
}
The
above selector works for paragraph tag <p>. Suppose you want to format
your <body> tag just give body following by curly braces like:
body
{
//Here
format your body tag.
}
To
protect browsers that do not support <style> element, insert comment tags
around (HTML Comments not CSS comments)the declarations within the style
element.
<style
type="text/css">
<!--
p
{
color:red;
text-align:center;
}
{
color:red;
text-align:center;
}
-->
</style>
CSS Comments:
Comments
are used to explain your code, and may help you when you edit the source code
at a later date. Comments are ignored by browsers.A CSS comment begins with
"/*", and ends with "*/", like this:
/*This
is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
}
p
{
text-align:center;
/*This is another comment*/
color:black;
}
CSS
Id and Class:
In
addition to setting a style for a HTML element, CSS allows you to specify your
own selectors called "id" and "class".
The id Selector
The
id selector is used to specify a style for a single, unique element. The id
selector uses the id attribute of the HTML element, and is defined with a
"#".
The style rule...............
Click here for Download PDF / FREE
0 commentaires: