CSS stands for cascading style sheet. The richness of web that we see today is attributed to the CSS. It’s knows as Cascading because it cascades from outer nesting to inner. A style applied to a body cascaded to all the elements inside the body. However each element can also override the style. CSS brings a definite advantage to web designing by decoupling the data markup with the styling issues. Also they provide capability to control the style of a web site in a more generic way.
To see the power of CSS, please visit www.csszengarden.com. This is a web site where the same underlying html markup is rendered with different style sheets by different authors.
CSS can be applied three ways:
Putting style in an external style sheet. Make a file with extensions css, For example
standard.css
body,div,td {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666;
}
body {
background-color: #fff;
text-align: center;
}
include in your html or jsp markup file
<html>
<head>
<link rel="stylesheet" type="text/css" href="<location_of_css>/standard.css"/>
</head>
<body>
</body>
</html>
<style> block in the html itself - In this case, the styles are put in the html file itself
<html>
<head>
<style type="text/css">
body,div,td {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666;
}
body {
background-color: #fff;
text-align: center;
}
</style>
</head>
<body>
</body>
</html>
Defining the style as an attribute itself
<html>
<head>
<style type="text/css">
body,div,td {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666;
}
body {
background-color: #fff;
text-align: center;
}
</style>
</head>
<body style="font-family: Arial, Helvetica, sans-serif;font-size: 12px;color: #666;background-color: #fff;text-align: center;">
</body>
</html>
All the three way will give the same effect. The difference comes in re-usability of an approach. When written in an external file, it can be used throughout the site and also the whole site style can be controlled generically. On the other hand, style defined in the page can be used generically for the elements in the page only. Style defined as part of attribute applies to only that element.
More articles on CSS
More articles on CSS
No comments:
Post a Comment