 |
Introduction to CSS
CSS stands for Cascading Style Sheet and is used to applying presentation and formatting of a web page. In this section you will find the various topics such as how to apply the CSS to the web forms, how to create functional CSS navigation, apply background using CSS, CSS and text, borders, scroll bar, layout, image roll over, stylish flash, working with colors and other types of formatting using CSS. |
CSS stands for Cascading Style Sheet. CSS give a style to html elements. CSS is used to change font color, font style, size of contents, text, image, table, list, footer, navigation and form of html page. CSS can be used in three ways inline CSS that is used within body in html element, internal CSS that is used in <head> tag portion within style sheet starting and ending tag and external CSS that is created outside of html page but its link is provided in head section. There can be multiple CSS in one html page but multiple CSS is allowed only in case of external CSS. Inline CSS has high priority as compared to internal CSS and external CSS.
CSS Syntax
CSS syntax has three parts which are selector, property and value.
The way to use them:
Selector {property: value}
Selector is html element on which style is implemented e.g. h1, h2, h3, p, ol, ul etc
Property is style attribute which you want to implant on html element e.g. font-color, font-size, font-style, background-color etc.
Desired font-color value, font-color size value is given in it.
Example
Ul {font-color: red; font-style: italic};
P {font-size: 12};
H1 {text-align: center};
Multiple Styles
You can use multiple styles in html element by separating them with semi-colon (;)
Example
<head>
<style type= “text/css”>
h1 {font-size:10; font-color: red; font-weight: italic }
</style>
</head>
Multiple Element
You can use implant same style to multiple html elements. E.g. if you want to give same color and style to your whole page heading, you can then declare all heading elements with same css syntax.
Example
<head>
<style type= “text/css”>
h1, h2, h3, h4, h5 {font-color: green; font-family: Arial; font-style: italic; font-weight: bold ;}
</style>
</head>
Output
All headings h1, h2, h3, h4, h5 would be having same color, style, weight and font-family.
Links Positions
There are three positions in which a link is displayed. Before clicking it or unvisited links, after clicking link or visited link and when you point mouse over it. All these three position can have different color, text-style and text-weight. These link positions are always defined in <head> tag inside style starting and closing tag.
Unvisited Links/ Before Clicking
Before clicking a link is normal position of link and its color and style can be set easily. In this example link color is black and link has no text decoration means it is not underlined etc.
Example
<style type="text/css">
A: link {COLOR: black; text-decoration: none}
</style>
Visited Link
You can change your visited link style and color to make it separate from unvisited links. In the following example visited link will be having underline with it and its color will be gray.
Example
<style type="text/css">
A: visited {COLOR: gray; text-decoration: underline}
</style>
Mouse Over
Mouse over is position when you point your mouse on the link and its color got changed or some times underline appeared or some times its weight becomes bold. In the following given example when you point your mouse on your desired link its color will be white and its background color will be yellow.
Example
<style type="text/css">
A: hover {COLOR: white; background: yellow}
</style>
Inline CSS
Inline style sheet is used when a single you have to implement single style to a particular html element. You can implement inline css by implementing style attribute in relevant tag where style attribute contains css property.
Example
This example implements inline css
<p font-family: Arial>this is paragraph</p>
<h1 font-color: blue>Heading</h1>
Internal CSS Rule
Internal CSS or document level css is declared in <head> tag of html page by CSS starting <style type= “text/css”> and ending tag </style>.
Example
<head>
<style type= “text/css”>
Body {font-color: blue; times new roman; font-size: 12pt}
Table. a {font:15pt times new roman; position: absolute; top:9.7em; left:0.01em}
</style>
</head>
External CSS Rule
In external CSS a link <link rel= “stylesheet” type= “text/css” href=style.css> is given to html page in <head> tag section where style.css is css file name. External CSS link is commonly used in whole web site to give whole site same look and style to its contents. External style sheet extension must be .css followed by style sheet name.
Example
<head>
<link rel= “stylesheet” type= “text/css” href= “style.css”>
</head>
|