CSS
1. CSS stands for Cascading Style Sheets
2. CSS is used to apply the style for the control
3. Styles define how to display HTML elements
4. Styles were added to HTML 4.0 to solve a problem
5. External Style Sheets can save a lot of work
6. External Style Sheets are stored in CSS files
2. CSS is used to apply the style for the control
3. Styles define how to display HTML elements
4. Styles were added to HTML 4.0 to solve a problem
5. External Style Sheets can save a lot of work
6. External Style Sheets are stored in CSS files
The General Structure To Apply The Styles Are:
<html> <head>
<styles type="text/CSS">
</styles>
</head>
<body>
</body>
</html>
CSS can be appiled in three ways:
- Internal CSS
- External CSS
- Inline CSS
Internal CSS:
The CSS which is written internally within the html document in the head tag is called internal CSS.External CSS:
The CSS which is written externally and it is linked within head tag is called External CSS.
Inline CSS:
The CSS which is written in the tags in the body of html documents is called inline CSS.
CSS Is Categorised Into 3 Types:
- Tag As Selector (or) Tag Base CSS
- ID As Selector (or) ID Base CSS
- Class As Selector (or) Class Base CSS
Tag As Selector (or) Tag Base CSS:
The CSS which is used to apply for tag of HTML is called as Tag Base CSS.
Example:
<html>
<head>
<title> Tag Base CSS</title>
<style type="text/css">
body
{
font-family:verdana;
font-size:16px;
}
h1
{
font-family:verdana;
font-size:30px;
color:red;
text-transform:uppercase;
text-decoration:underline;
text-align:left;
background:pink;
}
h2
{
font-family:courier;
font-size:20px;
color:green;
text-decoration:underline;
text-align:right;
background:#FFFFFF;
}
</style>
</head>
<body>
Raghu Pogu
<h1>www.eTutorialsBank.com</h1>
<h2>www.trickzonal.com</h2>
</body>
</html>
ID As Selector (or) ID Base CSS:
The CSS Which is used to create block elements is called as ID Base CSS.
Alternative for creating table(cell) without HTML.
It denoted by '#' before the name.
Example:
<html>
<head>
<title> Tag Base CSS</title>
<style type="text/css">
body
{
font-family:verdana;
font-size:16px;
background:gray;
margin:0px;
padding:0px;
}
#main
{
width:780px;
height:700;
background:#fff;
margin-left:250px;
margin-right:250px;
}
#header
{
width:780px;
height:120px;
background:#CC6666;
}
#nav
{
width:780px;
height:30px;
background:#996666;
}
#banner
{
width:780px;
height:350px;
background:#CC6666;
}
#content
{
width:780px;
height:150px;
background:#996666;
}
#footer
{
width:780px;
height:50px;
background:#CC6666;
}
</style>
</head>
<body>
<div id="main">
<div id="header"></div>
<div id="nav"></div>
<div id="banner"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
Class As Selector (or) Class Base CSS:
The CSS is used to redefine the elements of HTML is called Class Base CSS.
It is denoted by "." before the name.
Example:
<html>
<head>
<title> Tag Base CSS</title>
<style type="text/css">
body
{
font-family:verdana;
font-size:16px;
}
p
{
text-align:justify;
line-height:150%;
}
.red-text
{
color:red;
font-size:16px;
}
.blue-text
{
color:blue;
font-size:14px;
}
h1
{
font-size:20px;
text-transform:uppercase;
}
</style>
</head>
<body>
<h1><span class="red-text">Class Base CSS</span><h1>
<p class="blue-text">
The CSS is used to redefine the elements of HTML is called Class Base CSS.
It is denoted by "." before the name.
</p>
</body>
</html>
No comments:
Post a Comment