Thursday, 9 February 2017

INTRODUCTION TO CASCADING STYLE SHEET

CSS is a simple design language to make web pages more presentable.
Cascading – represents inherit. Style – represents attribute or property. Sheets – represents .css file.


Features of CSS
1. Easy manageable
2. Global change.
3. Save lot of time.
4. Easy maintenance.
5. Inline style sheets.
6. Internal style sheets.
7. External style sheets.
8. Performance.
9. Superior styles.
10. Multi-device compatibility.
11. Global web-standards etc.


Why CSS?
1. It is a collection of style sheet mechanism.
2. It is used to add more affects.
3. We can embed CSS in HTML, JAVASCRIPT, PHP, ASP etc.
4. The extension of CSS file is .css
5. Use same style on multiple pages.
6. Reduce download size etc.


CSS versions history
1. CSS 1.0 [1996].
2. CSS 2.0 [1998]
3. CSS 3.0 [2008]
4. CSS 4.0 [2014]


CSS Structure
<html>
<head>
          <style type=”text/css”>
          {
                   ---
                   ---
          }
          </style>
</head>
<body>
          ---
          ---
</body>
</html>

Example –
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>CSS</title>
<style type="text/css">
div
{
          color:blue;
          background-color:#FFFF0;
          text-decoration:underline;
          font-family:Arial;
}
</style>
</head>
<body>
          <div>Welcome to CSS----</div>
</body>
</html>






CSS Comments
Comments are non executable statements / non ignore statements. Using these comment notations we can declare customized statements or user defined statements in the web environment or in the style sheet. In CSS every comment begins with /* and ends with */


Example –
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>CSS</title>
<style type="text/css">
div
{
          /*color:blue;
          background-color:#FFFF0;
          text-decoration:underline;
          font-family:Arial;*/
}
</style>
</head>
<body>
          <div>Welcome to CSS----</div>
</body>

</html>





CSS Basic Syntax
It is made up of three parts –
1. Selector
2. Property

3. Value

No comments:

Post a Comment