- background-color
This property specify the background color of the element.
Ex:
body{
background-color : yellow;
} - background-image
This property specify an image to use as background of the element. By default image is repeated to cover the whole document.
Ex:
body{
background-image : url(background.jpg);
} - background-position
This property specify the position of the background image of the element.
Ex:
body{
background-position: right top;
} - background-repeat
By default images are repeated both vertically & horizontally. This property specify the background color of the element.
Ex:
body{
background-repeat : repeat-x; // repeated horizontally
}
p{
background-repeat : repeat-y; // repeated vertically
}
This blog supports beginners to get deep knowledge about programming in HTML, CSS, JavaScript, php, asp and other Web technologies and VB, VB.net, Java,step by step from the beginning. All the programming Concepts discuss with simple examples for the readability. Try out daily uploaded lessons to be a Programmer.
CSS - Background
CSS - background properties are used to specify the background effects of the element.
CSS - Class & ID Selectors
You can define your own selectors in the form of Class & ID selectors. Benefit of the Class & ID Selectors are allows to present same HTML element with different styles.
- CSS - Class
Class selector uses the HTML Class attribute and preceded by ".". The class selector is used to specify styles for group of elements. Class selector can be used for several elements.
Ex:
CSS part :
.color{
color : red;
}
HTML Part:
<p class = "color">This is a styled paragraph</p> - CSS - ID
The ID selector is used to specify a style for single, unique element. ID selector uses the HTML ID attribute and preceded by "#".
Ex:
#top{
background-color: yellow;
color : red;
}
HTML part:
<div id = "top">
<h2> ----- </h2>
<p>----</p>
</div>
CSS - Grouping
CSS Grouping used to apply styles for same property of several selectors to avoid repeating the same. This way minimize the coding.
Separate each selector with a comma.
Ex: same font color using for paragraph & hyperlinks we can define it as a group by avoiding repeating the same.
Normal way
P{
color : red;
}
a{
color : red;
}
CSS Grouping
p, a {
color : red;
}
Separate each selector with a comma.
Ex: same font color using for paragraph & hyperlinks we can define it as a group by avoiding repeating the same.
Normal way
P{
color : red;
}
a{
color : red;
}
CSS Grouping
p, a {
color : red;
}
How to use External JavaScript
JavaScript can also be put as an external files like as CSS files. JavaScript files saved with the extention of ".js".
When using an External script, you can't use the <script>...</script> tags. Use src attribute of the <Script> tag to specify the .js external javascriptfile.
<html>
<head>
<script type = "text/javascript" src = "test.js" > </script>
</head>
</html>
When using an External script, you can't use the <script>...</script> tags. Use src attribute of the <Script> tag to specify the .js external javascriptfile.
<html>
<head>
<script type = "text/javascript" src = "test.js" > </script>
</head>
</html>
Javascript - How to write 1st Javascript
This example displays how to use javascript to write something in the HTML Document
<html>
<body>
<script type = "text/javascript">
document.write ("Hello!.. This is my 1st Javascript program");
</script>
</body>
</html>
Following example displays how to use HTML elements within the javascript
<html>
<body>
<script type = "text/javascript">
document.write ("<h2>Hello!.. This is my 1st Javascript program</h2>");
</script>
</body>
</html>
<html>
<body>
<script type = "text/javascript">
document.write ("Hello!.. This is my 1st Javascript program");
</script>
</body>
</html>
Following example displays how to use HTML elements within the javascript
<html>
<body>
<script type = "text/javascript">
document.write ("<h2>Hello!.. This is my 1st Javascript program</h2>");
</script>
</body>
</html>
How to Put JavaScript into HTML Document
Where to put javaScript
This is the syntax of javascript using in HTML Documents
<html>
<head>
<title>JavaScript implement in HTML Doc</title>
<script type = "text/javascript" >
............
</script>
</head>
<body>
<script type = "text/javascript" >
............
</script>
</body>
</html>
- Within the Header Segment
- Within the Body Segment
This is the syntax of javascript using in HTML Documents
<html>
<head>
<title>JavaScript implement in HTML Doc</title>
<script type = "text/javascript" >
............
</script>
</head>
<body>
<script type = "text/javascript" >
............
</script>
</body>
</html>
Subscribe to:
Posts (Atom)
