|
|
|
One
stop solution for VB6, VB.Net, C#, ASP.Net, Crystal Report, Oracle,
SQL Server, MySql, PHP, XML, AJAX .... |
|
|
CSS (Cascading Style Sheets)
|
|
What is CSS?
A style sheet is used to view and alter any of the
attributes of the tags that control its appearance, You use
style sheets to control how HTML tags are formatted. The
word cascading means that multiple styles can be used in an
individual HTML page and the browser will follow an order
called a cascade to interpret the information. Out of the
three types of style sheets a designer can use all three simultaneously
and the browser will deliver the goods in an orderly an predictable
fashion.
With cascading style sheets the important style issue such
as fonts, including specific features such as font face,
size, font weight font style and leading. Anything that can
be displayed with.
|
1. What is CSS
|
|
|
2. CSS Sample
|
|
|
3. CSS FAQ's
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
CSS in details.
1. HTML page formatting can be controlled by CSS.
2. CSS stands for Cascading Style Sheets.
3. Style define how to display HTML elements.
4. Styles are normally stored in Style Sheets.
5. External Style Sheets can save you lots of work.
6. External Style Sheet are stored in .css file.
Basic Properties of Style Sheet
The CSS syntax is made up of three parts: a selector, a
property and a value.
Selector {Property: Value}
The selector is normally the element or tag you wish to
define, the property is the attribute you wish to change,
and each property and value are separated by a colon and
surrounded by curly braces:
body {color: black}
If the value is multiple words, put quotes around the
value:
p {font-familiy: "sans serif"}
If you wish to specify more than one property, you should
separate each property with a semicolon,
p {text-align: center; color: red}
To make the style definition more readable, you can describe
one property per line.
p{
text-align: center;
color: blue;
font-family: arial
}
Grouping : You can group selectors, separate each selector
with a comma, in these example we have grouped all the
header elements, each header element will be blue.
h1, h2, h3, h4, h5, h6
{ color: blue}
Class : with the class attribute you can define different
styles for the same element, say to have two types of
paragraphs in your document: one right alligned paragraph,
and one center aligned paragraph.
p.right {text-align: right}
p.center {text-align: center}
ID : with the id attribute you can define a unique style
that you can use with many element.
#right {text-align: right}
Comments : You can insert comments in CSS to explain your
code. which can help you when you edit the source code at a
later moment. A comment will be ignored by the browser. A
CSS comment begins with /* and ends with */
Types of CSS
1. Inline Style Sheets : This approach exploits
exiting HTML tags within a standard HTML document and adds a
specific style to the information controlled by those tags.
An example would be controlling the indentation of a single
paragraph using the style = "style name" attribute
within the <p> tag.
<html>
<head>
<title> An Inline Style </title>
<body bgcolor= "#C0C0C0">
<p style ="font-family: courier">
This is Style no 1
</p>
<p style ="font-family: arial">
This is Style no 2
</p>
<p >
This is without style
</p>
</body>
</html>
Output of the above code will be
|
This is Style no 1
This is Style no 2
This is without style
|
2. Internal or Embedded Style Sheets : This method allows to control
individual pages by using the <style> tag along with
</style> the information placed between the
<html> and the <body> tag. The style attributes
are inserted within the full <style> container. It
sets the style attributes for the entire page.
<head>
<style type ="text/css" >
hr {color: silver}
p {margin-left: 20 px; font-family: verdana}
</style>
</head>
3. External Style Sheets : This is a master style sheet
stored in an external file, It uses the same syntax you
would use with an embedded style. this file uses the ".css"
extension. with an external style sheet, you can change the
look of an entire web site by changing one file. Each page
must link to the style sheet using the <link> tag. the
link tag goes inside the head section.
<head>
<link rel="stylesheet" tyle ="text/css"
href="lightstyle.css">
</head>
An external style sheet can be written any text editor like
notepad with an extension of ".css". "lightstyle.css"
may contain style like.
hr {color: silver}
p {margin-left: 20 px; font-family: verdana}
CSS Attributes
| Fonts
|
|
|
{font-family: garamond, verdana; font-size: 12
pt; font-weight: bold; font-style: normal color:
#732706;background-color=silver }
|
|
Sample Style |
| Color |
|
|
{color=green; background-color=yellow;
font-size: 12
pt; font-weight: bold;} |
|
Sample
Style |
|
|
|
|
|