Cascading Style Sheet
It
is used to enhance the web page design by developer. CSS is a very efficient
technique to develop a well-defined website. There are three ways to define the
web page using style sheet.
·
Inline
style
·
Internal style sheet
·
External
style sheet
Inline or
Embedded Cascading Style Sheet (CSS)
The Inline style
is specific with its own tag. The inline style uses the HTML "style"
attribute to style a specific tag. It is only used for an individual tag
itself. The Inline style is good for one an individual CSS change that cannot
used repeatedly in the site. Below is the example of inline style sheet.
<h1
style="color: green ;"> this is a Green Heading</h1>
Internal Style Sheet
Internal
style sheet is used inside the <head> tag. It is used for own entire page
which we are developing. It cannot be used for any other web page except that
page which is developed by designer. Internal style sheet is always written in <head>
tag with starting or closing <style>
</style> tag. All the coding is written inside these tags. It can be
seen like this one.
<html>
<head>
<style>
body {background-color: green;}
h1 {color: blue;}
.p {color: green;}
</style>
</head>
<body>
<head>
<style>
body {background-color: green;}
h1 {color: blue;}
.p {color: green;}
</style>
</head>
<body>
<h1>This is a
heading 1.</h1>
<h2 class=”p”>This is a heading 2.</h2>
</body>
</html>
<h2 class=”p”>This is a heading 2.</h2>
</body>
</html>
External Style Sheet
External
style sheet is always written outside the web page with an extension (.css). It
is use for all the web pages by calling the <link> tag inside the <head>
tag. Its main advantage is that it can be used for more than one web page or
for multiple web pages. By using an external style sheet (ess),
the look of entire website can be change. There is separate file of external
style sheet which can be seen like this.
<html>
<head>
<head>
<link rel="stylesheet" type="text/css"
href="external.css">
</head>
<body>
<h1 class=”h1”>This is a heading 1.</h1>
<h2 class=”h2”>This is a heading 2.</h2>
</body>
</html>
</head>
<body>
<h1 class=”h1”>This is a heading 1.</h1>
<h2 class=”h2”>This is a heading 2.</h2>
</body>
</html>
External
Style Sheet (ESS) can be written in any text editor, notepad file or in a software
such as Dreamweaver, visual studio etc. The file will not contain any html
tags.
body
{
background-color: pink; }
.h1 { color: black; }
.h2 { color: red; }
.h1 { color: black; }
.h2 { color: red; }
Blogger Comment
Facebook Comment