In your web application, CSS can be used in different ways, as shown below.
External CSS
If you need to define a style that will be used on many pages of your web application, this technique is preferred. Once a style is defined in a CSS file, that can be used in many web pages.
Check the following sample code to understand how external CSS files are used. The following line shows how to include a style sheet in an HTML page. Generally, this file linking is performed in <head></head> tag. But it can be included anywhere on the web page. Sometimes, CSS linking is performed in <body></body> tag at the end of the page.
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
Content of style.css file in css directory is shown below.
body {
background-color: grey;
}
h1 {
color: navy;
margin-left: 20px;
}
Internal CSS
If you need to use a style on a specific page, you can use internal CSS instead of using it on other pages, you can use internal CSS. Here, the styles are defined in the file itself.
Check the following sample code.
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
Inline CSS
If you need a style only once on your page, you can use inline CSS.
Check the following sample code.
<h1 style="color:blue;margin-left:30px;">This is a heading</h1>
Posts
No comments:
Post a Comment