Basics of CSS:-
Before you learn css you need to know the basics of TML/XHTML for understanding.
What is CSS?
1 CSS is called Cascading Style Sheets
2.used to change the style of HTML elements
Type of CSS
CSS can derive 3types the are
i) Internal(Embedded) Style Sheet (See Example with output)
ii) Inline Style Sheets (See Example with output)
iii) External Style Sheet
Internal Style Sheets
1)Internal Style Sheets are write inside the <head> section via <style> tag. Style tag is write like <style type="text/css">----</style>.
2)This type of style sheet can only use to that particular page only. If you want to use more page then you can use external style sheet.
Example:-
Inline Style Sheets
1)Inline style is not used at all, period.
2)This styles are placed directly inside the HTML elements code.
3)Most of the users avoid to used this, because it will increase number of lines.
Example:-
External Style Sheets
1)This style sheet is the most important one it is increase the speed of the page load.
2)Can access from any web page.
3)All styles are defined in a file, and if we want to include, we can include like <link href="sample.css" rel="stylesheet" type="text/css">.
Example:-
The following are stored in .css file(sample.css)
The above file is include like below
Screen Shot:-
Before you learn css you need to know the basics of TML/XHTML for understanding.
What is CSS?
1 CSS is called Cascading Style Sheets
2.used to change the style of HTML elements
Type of CSS
CSS can derive 3types the are
i) Internal(Embedded) Style Sheet (See Example with output)
ii) Inline Style Sheets (See Example with output)
iii) External Style Sheet
Internal Style Sheets
1)Internal Style Sheets are write inside the <head> section via <style> tag. Style tag is write like <style type="text/css">----</style>.
2)This type of style sheet can only use to that particular page only. If you want to use more page then you can use external style sheet.
Example:-
------
------
<HEAD>
<STYLE TYPE="TEXT/CSS">
.div_class
{
margin-right: 10px;
margin-left: 2px;
margin-bottom: 45px;
margin-top: 8px;
}
</STYLE>
</HEAD>
------
------
------
<HEAD>
<STYLE TYPE="TEXT/CSS">
.div_class
{
margin-right: 10px;
margin-left: 2px;
margin-bottom: 45px;
margin-top: 8px;
}
</STYLE>
</HEAD>
------
------
Inline Style Sheets
1)Inline style is not used at all, period.
2)This styles are placed directly inside the HTML elements code.
3)Most of the users avoid to used this, because it will increase number of lines.
Example:-
<div style="margin-right: 10px;margin-left: 2px;margin-bottom: 45px;margin-top: 8px;">
------
------
</div>
------
------
</div>
External Style Sheets
1)This style sheet is the most important one it is increase the speed of the page load.
2)Can access from any web page.
3)All styles are defined in a file, and if we want to include, we can include like <link href="sample.css" rel="stylesheet" type="text/css">.
Example:-
The following are stored in .css file(sample.css)
.t_Bubble {
position: relative;
}
.t_Background,
.t_Stem { position: absolute; }
.t_Close {
position: absolute;
cursor: pointer;
top: 0;
}
.t_CloseButtonShift {
position: relative;
overflow: hidden;
float: left;
}
.t_CloseState {
position: absolute;
margin: 0;
padding: 0;
left: 0;
}
position: relative;
}
.t_Background,
.t_Stem { position: absolute; }
.t_Close {
position: absolute;
cursor: pointer;
top: 0;
}
.t_CloseButtonShift {
position: relative;
overflow: hidden;
float: left;
}
.t_CloseState {
position: absolute;
margin: 0;
padding: 0;
left: 0;
}
The above file is include like below
-------
-------
<HEAD>
<link href="sample.css" rel="stylesheet" type="text/css">
</HEAD>
-------
<HEAD>
<link href="sample.css" rel="stylesheet" type="text/css">
</HEAD>
Screen Shot:-
0 comments:
Post a Comment