Advanced web design tutorial: HTML
If you did not learn or read the part 04 go here. Today I will discus about stylesheet or css in this advanced web design tutorial. For designing a website style is very important. We use CSS which stands for CASCADE STYLE SHEEET.
There are 3 ways to use stylesheet
- Inline CSS
- Internal CSS
- External CSS
Inline CSS :
When we use style into a HTML tag then it is called Inline Style. It is written by using style attribute. Here is an example for using inline style
<!DOCTYPE html>
<html>
<head>
<title>Here is a example inline css</title>
</head>
<body style=”background-color:grey; text-align:center;”>
<h1 style=”color:green;”>Here is a Heading</h1>
<h2 style=”color:yellow;”>Here is a Heading 2</h2>
<p style=”color:blue;”>Here will be some text for paragraph</p>
</body>
</html>
Internal CSS :
When we use style in head by using style tag then it is called Internal Style. It is written by using style Tag. Here is an example for using Internal style
<!DOCTYPE html>
<html>
<head>
<title>Here is a example inline css</title>
<style>
body{
background-color:grey;
text-align:center;
}
h1{
color:green;
}
h2{
color:yellow;
}
p{
color:blue;
}
</style>
</head>
<body >
<h1 >Here is a Heading</h1>
<h2>Here is a Heading 2</h2>
<p>Here will be some text for paragraph</p>
</body>
</html>
External CSS :
When we use a separate file for writing css. Whic extension is .css file. And link with the page that are designed is called external css. It is mostly used for design website. As it is very easy to use and can easily be modified.
<!DOCTYPE html>
<html>
<head>
<title>Here is a example inline css</title>
<link rel=”stylesheet” href=”style.css” />
</head>
<body >
<h1 >Here is a Heading</h1>
<h2>Here is a Heading 2</h2>
<p>Here will be some text for paragraph</p>
</body>
</html>
the style.css contain the style like
body{
background-color:grey;
text-align:center;
}
h1{
color:green;
}
h2{
color:yellow;
}
p{
color:blue;
}
thats all for today if you face any problem. Don’t forget to ask?