Hi friends....
Welcome back to My Blog !
Today we will see Basic CSS Properties and How to use?
Basic CSS Properties
CSS Background
Welcome back to My Blog !
Today we will see Basic CSS Properties and How to use?
Basic CSS Properties
- CSS Background
- CSS Text
- CSS Font
- CSS Link
- CSS List
- CSS Box Model
- CSS Margin
- CSS Border
- CSS Padding
- CSS Floating
- CSS Display
- CSS Visibility
Am share one by one...
First am share Background Properties
CSS Background
- CSS Background properties are used to defines the background of an element.
- CSS properties used for background effects
| background-color | background-image | background-repeat | background-Attachment | Background-position |
| The background-color property specifies the background color of an element. The color selected in 3 ways HEX Value RGB Value Name Value |
The background-image property specifies the background image of an element. Default the image is repeated, so it covers entire element |
This property used repeats ann image both horizantaly or vertically. and set background image how to displayed an element. you can set the image has no repaet or horizantally repaet or vertically repeat. |
This property specify the image has scroll or fixed | This property specify the starting of background-image. You can set starting position in 2 ways |
Possible values in this property:
background-color:#FFF000;
background-image:url('bg.jpg');
background-repeat:no-repeat;
background-repea:repeat-x;
background-repea:repeat-y;
background-attchment:scroll;
background-attchment:fixed;
background-position:right;
background-position:20% 50%;
Example:
First am set width and height and background color my header section.
<html>
<head>
<style>
#header
{
width:1000px;
height-:150px;
background-color:#FFFF99;
}
</style>
</head>
<body>
<div id="header">
<h1>My Blog</h1>
</div>
</body>
</html>
Output is:
Example:
First am set width and height and background image my header section.
<html>
<head>
<style>
#header
{
width:1000px;
height-:150px;
background-image:url(logo.jpg);
}
</style>
</head>
<body>
<div id="header">
<h1>My Blog</h1>
</div>
</body>
</html>
Output is:
Note: Default image will repeated, you may change use background-repeat property
This example am set image no repeated!
<html>
<head>
<style>
#header
{
width:1000px;
height-:150px;
background-image:url(logo.jpg);
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="header">
<h1 align="center">My Blog</h1>
</div>
</body>
</html>
Output is;
You can set starting position use background-position property.. please look following example
<html>
<head>
<style>
#header
{
width:1000px;
height-:150px;
background-image:url(logo.jpg);
background-repeat:no-repeat;
background-position:70% 10%;
}
</style>
</head>
<body>
<div id="header">
<h1 align="center">My Blog</h1>
</div>
</body>
</html>
Output is:
CSS Text Properties:
CSS Text Properties used to text formatting properties there are some text properties used often in your webpage.
<body>
<p>text-color or color property is used to set the color of the text,the color selected in 3 ways HEX value,RGB value and name value.</p>
<a href="home.html">Back to Home</a>
</body>
The output is:
Note : The above example the paragraph is make right alignment and letter spacing is 2px and decoration in underline, and transform is uppercase. The hyperlink displayed Underline.If you remove undeline use following codesin style
a
{
text-decoration:none;
}
CSS Font:
CSS Font properties define the font size, family,style,weight of a text.
The CSS Font Properties are
font-family
font-size
font-style
font-variant
font-weight
CSS Links:
Links are be styled in different ways. There are four link states available
a:link
a:hover
a:visited
a:active
Example:
<head>
<style type="css/text">
a
{
text-decoration:none;
}
a:link
{
color:#33FFCC;
}
a:visited
{
color:#336699;
}
a:hover
{
color:#FF0000'
}
</style>
</head>
<body>
<a href="home.html">Home</a>
<a href="about.html">About us</a>
<a href="services.html">Services</a>
<a href="training.html">Training</a>
<a href="contact.html">Contact</a>
</body>
CSS Lists:
CSS List property are allowed ordered and unordered or set image an List Item. There are three CSS List property available.
list-style-type
list-style-image
list-style-position
Example:
<head>
<style type="css/text">
a
{
text-decoration:none;
}
a:link
{
color:#33FFCC;
}
a:visited
{
color:#336699;
}
a:hover
{
color:#FF0000'
}
ul
{
list-style-type:none;
}
li
{
width:200px;
height:40px;
}
</style>
</head>
<body>
<ul>
<a href="home.html"><li>Home</li></a>
<a href="about.html"><li>About us</li></a>
<a href="services.html"><li>Services</li></a>
<a href="training.html"><li>Training</li></a>
<a href="contact.html"><li>Contact</li></a>
</ul>
</body>
CSS Display and CSS Visibility
Display property used to if how to an element to displayed that is block or inline
Visibility property is usedto specify an element should be visible or hidden
The above two property is used for major used for making horizantal and vertical menu.
Block:
Block is an element that takes up width and height. It use for vertical menu creation
ul
{
list-style-type:none;
display:block;
width:500px;
height:300px;
background-color:#3366CC;
}
Inline
An inline element only takes up as much widthnot necessary. it use for horizantal menu creation
ul
{
list-style-type:none;
}
li
{
display:inline;
}
Hide an element:
If you want hide an element in your webpage. it achive in two ways
visibility:hidden;
display:none;
<head>
<style>
#header
{
width:1000px;
height-:150px;
background-image:url(logo.jpg);
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="header">
<h1 align="center">My Blog</h1>
</div>
</body>
</html>
Output is;
You can set starting position use background-position property.. please look following example
<html>
<head>
<style>
#header
{
width:1000px;
height-:150px;
background-image:url(logo.jpg);
background-repeat:no-repeat;
background-position:70% 10%;
}
</style>
</head>
<body>
<div id="header">
<h1 align="center">My Blog</h1>
</div>
</body>
</html>
Output is:
CSS Text Properties:
CSS Text Properties used to text formatting properties there are some text properties used often in your webpage.
- text-color or color
- text-align
- text-decoration
- text-transform
- text-indent
text-color or color property is used to set the color of the text,the color selected in 3 ways HEX value,RGB value and name value.
color :#CC0000;
:rgb(255,0,0);
:"pink";
text-align properties is used to to set the horizantal align ment of a text.possible alignment is left,right,center,justify.
text-align:left;
:right;
:center;
:justify;
text-decoration is used to set/remove decoration from text. text-decoration mostly used to temove the underline from hyperlinks for design purpose.
text-decoration:none;
:overline;
:line-through;
:underline;
:blink;
text-transform is used to specify the uppercase or lowercase letters in a text.
text-transform:uppercase;
:lowercase;
:capitalize;
Other Text properties is
letter-spacing
vertical-spacing
white-spacing
word-spacing
Example:
<style>
.textprop
{
color:#CC0000;
text-align:right;
text-transform:uppercase;
text-decoration:underline;
letter-spacing:2px;
}
</style>
<body>
<p>text-color or color property is used to set the color of the text,the color selected in 3 ways HEX value,RGB value and name value.</p>
<a href="home.html">Back to Home</a>
</body>
The output is:
Note : The above example the paragraph is make right alignment and letter spacing is 2px and decoration in underline, and transform is uppercase. The hyperlink displayed Underline.If you remove undeline use following codesin style
a
{
text-decoration:none;
}
CSS Font:
CSS Font properties define the font size, family,style,weight of a text.
The CSS Font Properties are
font-family
font-size
font-style
font-variant
font-weight
CSS Links:
Links are be styled in different ways. There are four link states available
a:link
a:hover
a:visited
a:active
Example:
<head>
<style type="css/text">
a
{
text-decoration:none;
}
a:link
{
color:#33FFCC;
}
a:visited
{
color:#336699;
}
a:hover
{
color:#FF0000'
}
</style>
</head>
<body>
<a href="home.html">Home</a>
<a href="about.html">About us</a>
<a href="services.html">Services</a>
<a href="training.html">Training</a>
<a href="contact.html">Contact</a>
</body>
CSS Lists:
CSS List property are allowed ordered and unordered or set image an List Item. There are three CSS List property available.
list-style-type
list-style-image
list-style-position
Example:
<head>
<style type="css/text">
a
{
text-decoration:none;
}
a:link
{
color:#33FFCC;
}
a:visited
{
color:#336699;
}
a:hover
{
color:#FF0000'
}
ul
{
list-style-type:none;
}
li
{
width:200px;
height:40px;
}
</style>
</head>
<body>
<ul>
<a href="home.html"><li>Home</li></a>
<a href="about.html"><li>About us</li></a>
<a href="services.html"><li>Services</li></a>
<a href="training.html"><li>Training</li></a>
<a href="contact.html"><li>Contact</li></a>
</ul>
</body>
CSS Display and CSS Visibility
Display property used to if how to an element to displayed that is block or inline
Visibility property is usedto specify an element should be visible or hidden
The above two property is used for major used for making horizantal and vertical menu.
Block:
Block is an element that takes up width and height. It use for vertical menu creation
ul
{
list-style-type:none;
display:block;
width:500px;
height:300px;
background-color:#3366CC;
}
Inline
An inline element only takes up as much widthnot necessary. it use for horizantal menu creation
ul
{
list-style-type:none;
}
li
{
display:inline;
}
Hide an element:
If you want hide an element in your webpage. it achive in two ways
visibility:hidden;
display:none;
No comments:
Post a Comment