In an html file we can add style using CSS i.e Cascading style sheets.
CSS files can be defined in 3 ways:
Inline
Internal
External
An inline CSS file the styling code is used to apply style to single html element. A shown in this example the whole paragraph element is styled with red font.
<html>
<head>
<title>Inline Css example</title>
</head>
<body>
<img src="tanush.jpg" width="100" height="100">
<p style="color: red">My name is Tanush Agarwal. </p>
</body>
</html>
The inline style is added to the element directly.
An Internal CSS is used if the style property is to be applied to whole page.Internal styles are defined within the <style >element on the <head> section of html page. In the following example if inline style is to be applied then we have to write the style code with each html element or we can apply the property in head section within <style> element.
<html>
<head>
<title>Internal Css example</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p> My name is Tanush Agarwal. <br></p>
<p>another paragraph</p>
</body>
</html>
The most used way of adding styles is External CSS . In it we create a separate file with extension .css and in it write the code for styling. The two file are:
/external.html
<html>
<head>
<title>External Css example</title>
<link href="stylesheets/external.css" rel="stylesheet">
<body>
<p> My name is Tanush Agarwal. <br></p>
<p>another paragraph</p>
</body>
</html>
../stylesheets/external.css
p{
color:red;
}
CSS files can be defined in 3 ways:
Inline
Internal
External
An inline CSS file the styling code is used to apply style to single html element. A shown in this example the whole paragraph element is styled with red font.
<html>
<head>
<title>Inline Css example</title>
</head>
<body>
<img src="tanush.jpg" width="100" height="100">
<p style="color: red">My name is Tanush Agarwal. </p>
</body>
</html>
The inline style is added to the element directly.
An Internal CSS is used if the style property is to be applied to whole page.Internal styles are defined within the <style >element on the <head> section of html page. In the following example if inline style is to be applied then we have to write the style code with each html element or we can apply the property in head section within <style> element.
<html>
<head>
<title>Internal Css example</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p> My name is Tanush Agarwal. <br></p>
<p>another paragraph</p>
</body>
</html>
The most used way of adding styles is External CSS . In it we create a separate file with extension .css and in it write the code for styling. The two file are:
/external.html
<html>
<head>
<title>External Css example</title>
<link href="stylesheets/external.css" rel="stylesheet">
<body>
<p> My name is Tanush Agarwal. <br></p>
<p>another paragraph</p>
</body>
</html>
../stylesheets/external.css
p{
color:red;
}
No comments:
Post a Comment