How to add style sheet to an HTML page - Adding CSS to a web page - Cascading Style Sheets - External CSS - Inline Style Sheets - Internal Style Sheet - Jquery CSS
How to add style sheet to an HTML page - Adding CSS to a web page
First of all What is CSS or Cascading Style Sheet?
In Simple, we can describe it as a set of Style that is used to format a web page. Applying Style will give site a better user friendly look.
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in HTML and XHTML.
There are basically 5 ways to add CSS to an HTML page
External CSS File Include
First Method is to add an externl CSS file to your web page.
A simple css file may look like
-----
-----
.txt{ color:#ffffff; font-size:14px }
.txt2{ color:#000000; font-size:12px }
-----
-----
the above style statments is saved in a file called mystyle.css
How to include the external CSS file?
In Your HTML file inside the HEAD tag place the following tag:
<link rel="stylesheet" type="text/css" href="mystyle.css" />
How to apply style to a HTML control?
Just refer the style name in CLASS attibute of your HTML control like given below:
<input type="text" class="txt" />
Internal Style Sheets Include
Including an internal style is simple, just add your styles in the STYLE tag, Place the STYLE tag above the closing head tag
Check this example:
-----
<html>
<title> PHP Techi Web Page </title>
<head>
<style>
.txt{ color:#ffffff; font-size:14px }
.txt2{ color:#000000; font-size:12px }
</style>
</head>
<body>
--------
--------
--------
</body>
</html>
How to apply style to a HTML control?
Just refer the style name in CLASS attibute of your HTML control like given below:
<input type="text" class="txt2" />
Inline Style Sheets Include
Inline Style Sheets - the name itself says what it does,here we just add styles in the STYLE attribute of HTML controll
Check this sample script:
<input type="text" class="txt2" style="color:#cccccc;font-size:10px" />
Applying Styles using Javascript
You can apply CSS using Javascript. Suppose you want to change the color of your Submit button Text when you click on it. You can do this just by calling a Javascript function during the OnClick Event of the button. In the JS function there will be script to change the background color of your button.
Check this sample script:
<script>
function changeColor(){
document.getElementById("myinputbox").style.color='red';
}
</script>
-------
-------
-------
-------
<input id="myinputbox" type="button" style="color:#cccccc;font-size:10px" onClick="changeColor();" />
<head>
<style>
.txt{ color:#ffffff; font-size:14px }
.txt2{ color:#000000; font-size:12px }
</style>
<script>
function changeStyleClass(){
document.getElementById("myinputbox").className='txt2';
}
</script>
</head>
-------
-------
-------
-------
<input id="myinputbox" type="button" class="txt" onClick="changeStyleClass();" />
In the above example the button control is using the style class "txt", on clicking the button it calls a JS function "changeStyleClass()" which changes the style class of the button to "txt2". Please not the keyword "className".
Applying Styles using JQuery
jQuery css() Method - The css() method sets or returns one or more style properties for the selected elements.
The following example will set the background-color value for ALL P tags:
$("p").css("background-color","yellow");
Reference:
Wikipedia
w3schools
JQuery and CSS
In Simple, we can describe it as a set of Style that is used to format a web page. Applying Style will give site a better user friendly look.
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in HTML and XHTML.
There are basically 5 ways to add CSS to an HTML page
External CSS File Include
First Method is to add an externl CSS file to your web page.
A simple css file may look like
-----
-----
.txt{ color:#ffffff; font-size:14px }
.txt2{ color:#000000; font-size:12px }
-----
-----
the above style statments is saved in a file called mystyle.css
How to include the external CSS file?
In Your HTML file inside the HEAD tag place the following tag:
<link rel="stylesheet" type="text/css" href="mystyle.css" />
How to apply style to a HTML control?
Just refer the style name in CLASS attibute of your HTML control like given below:
<input type="text" class="txt" />
Internal Style Sheets Include
Including an internal style is simple, just add your styles in the STYLE tag, Place the STYLE tag above the closing head tag
Check this example:
-----
<html>
<title> PHP Techi Web Page </title>
<head>
<style>
.txt{ color:#ffffff; font-size:14px }
.txt2{ color:#000000; font-size:12px }
</style>
</head>
<body>
--------
--------
--------
</body>
</html>
How to apply style to a HTML control?
Just refer the style name in CLASS attibute of your HTML control like given below:
<input type="text" class="txt2" />
Inline Style Sheets Include
Inline Style Sheets - the name itself says what it does,here we just add styles in the STYLE attribute of HTML controll
Check this sample script:
<input type="text" class="txt2" style="color:#cccccc;font-size:10px" />
Applying Styles using Javascript
You can apply CSS using Javascript. Suppose you want to change the color of your Submit button Text when you click on it. You can do this just by calling a Javascript function during the OnClick Event of the button. In the JS function there will be script to change the background color of your button.
Check this sample script:
<script>
function changeColor(){
document.getElementById("myinputbox").style.color='red';
}
</script>
-------
-------
-------
-------
<input id="myinputbox" type="button" style="color:#cccccc;font-size:10px" onClick="changeColor();" />
How to change the Style Class of an HTML element using Javascript?
You can change the applied style class of an element using JS, here is how it works<head>
<style>
.txt{ color:#ffffff; font-size:14px }
.txt2{ color:#000000; font-size:12px }
</style>
<script>
function changeStyleClass(){
document.getElementById("myinputbox").className='txt2';
}
</script>
</head>
-------
-------
-------
-------
<input id="myinputbox" type="button" class="txt" onClick="changeStyleClass();" />
In the above example the button control is using the style class "txt", on clicking the button it calls a JS function "changeStyleClass()" which changes the style class of the button to "txt2". Please not the keyword "className".
Applying Styles using JQuery
jQuery css() Method - The css() method sets or returns one or more style properties for the selected elements.
The following example will set the background-color value for ALL P tags:
$("p").css("background-color","yellow");
Reference:
Wikipedia
w3schools
JQuery and CSS
Comments
Post a Comment