Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. While most often used to style web pages and interfaces written in HTML and XHTML. There are three ways to insert CSS style sheet into HTML.
1) Using External style sheet: Best method of adding CSS
This is one of the best method of adding the css styling to a HTML page. This is how it is done.
Lets say this is the css file:
style.css
h1 {color:#008000;}
p {margin-left:10px;}
body {text-align:center;}
To add a style sheet to HTML, we use the <link> tag in the header section of HTML page, like this:
<head> <link rel="stylesheet" type="text/css" href="style.css"> </head>
2) Internal Style sheet
If you do not want to have a separate style sheet then you can simply write your CSS in the head section of HTML page like this: Remember to enclose the code within <style> and </style> tags.
<head>
<style>
h1 {color:#008000;}
p {margin-left:10px;}
body {text-align:center;}
</style>
</head>
2) Inline Styles
You can code the CSS along with the HTML tags itself. Consider the below example:
<p style="color:blue; font-size: 16px; margin:20px;">This is the content of my paragraph</p>
Here we have specified the style in the </p> tag itself. Same way we can style other HTML elements using this inline styling method. Even though it is easier to code the things using this method, still it is not recommended when we build a website or an online application. The reason is that if any change is required you need to make that change in the HTML code itself. It is much easier to maintain a separate style sheet.
Leave a Reply