Hi Everyone,
In this post I will explore the ways of applying CSS to a web page
I will be focusing only on ways of applying CSS and not on exploring CSS, hence prior knowledge of CSS is very much required.
There are three ways of applying CSS to our webpage
1)Inline
2)Internal
3)External
1)Inline
In this method we place the css code in the tag of the page itself using style attributes
<OpeningTag style=”<!–Your CSS code here–>” > </ClosingTag>
2)Internal
In this method we define the css code in the head section of the html page using the <style> tag
and call the CSS using the class attribute inside the tag/control where we need to apply the CSS
<style>
<!–Your CSS code here–>
</style>
3)External
In this method we define the css code in a seperate .css file
and we link our html page to the external .css file using the link tag
and call the CSS using the class attribute
<link type=”text/css” href=”<!–PathForTheCSSFile.css–>” rel=”stylesheet” >
Example:
1) Inline
<html>
<head>
</head>
<body>
<p style=”font:12pt verdana;font-weight:700;color:orange” >This is a CSS Test Line</p>
</body>
</html>
2) Internal
<html>
<head>
<style>
.FontStyle
{
font:12pt verdana;
font-weight:700;
color:orange;
}
</style>
</head>
<body>
<p class=”FontStyle” >This is a CSS Test Line</p>
</body>
</html>
3) External
.FontStyle
{
font: 12pt verdana;
font-weight:700;
color:orange;
}
Save the above text as FontStyleCSS.css and place it in the same folder as the below html file
The above CSS File will be referred/imported as follows
<html>
<head>
<link type=”text/css” href=”FontStyleCSS.css” rel=”stylesheet”>
</head>
<body>
<p class=”FontStyle”>This is a CSS Test Line</p>
</body>
</html>
Uses -
Inline is used when the CSS is to be applied for a single tag/control.
Internal is used when the CSS is to be applied for multiple tags/control.
External is generally used when the CSS that is to be applied are same for different projects, so that CSS code can be reused between different projects.
Further Reading -
In this post I will explore the ways of applying CSS to a web page
I will be focusing only on ways of applying CSS and not on exploring CSS, hence prior knowledge of CSS is very much required.
There are three ways of applying CSS to our webpage
1)Inline
2)Internal
3)External
1)Inline
In this method we place the css code in the tag of the page itself using style attributes
<OpeningTag style=”<!–Your CSS code here–>” > </ClosingTag>
2)Internal
In this method we define the css code in the head section of the html page using the <style> tag
and call the CSS using the class attribute inside the tag/control where we need to apply the CSS
<style>
<!–Your CSS code here–>
</style>
3)External
In this method we define the css code in a seperate .css file
and we link our html page to the external .css file using the link tag
and call the CSS using the class attribute
<link type=”text/css” href=”<!–PathForTheCSSFile.css–>” rel=”stylesheet” >
Example:
1) Inline
<html>
<head>
</head>
<body>
<p style=”font:12pt verdana;font-weight:700;color:orange” >This is a CSS Test Line</p>
</body>
</html>
2) Internal
<html>
<head>
<style>
.FontStyle
{
font:12pt verdana;
font-weight:700;
color:orange;
}
</style>
</head>
<body>
<p class=”FontStyle” >This is a CSS Test Line</p>
</body>
</html>
3) External
.FontStyle
{
font: 12pt verdana;
font-weight:700;
color:orange;
}
Save the above text as FontStyleCSS.css and place it in the same folder as the below html file
The above CSS File will be referred/imported as follows
<html>
<head>
<link type=”text/css” href=”FontStyleCSS.css” rel=”stylesheet”>
</head>
<body>
<p class=”FontStyle”>This is a CSS Test Line</p>
</body>
</html>
Uses -
Inline is used when the CSS is to be applied for a single tag/control.
Internal is used when the CSS is to be applied for multiple tags/control.
External is generally used when the CSS that is to be applied are same for different projects, so that CSS code can be reused between different projects.
Further Reading -
