Where to put CSS
There are three ways to insert CSS
- Inline Style
- Internal Style sheet
- External Style sheet
1. Inline Style
Inline Styles come with basic features. To use Inline Styles, you can use style attribute with the relevant HTML element tag. Style attribute containg any CSS property.
Ex:
<p style = "align : center; color : Red"> This is a Paragraph uses CSS styles </p>
This example displays the text of "This is a Paragraph uses CSS styles" with center align and red color. All CSS properties related to the HTML element define as the value of style attribute and each property seperated by a semi colon. Value of the property define with a colon mark.
2. Internal Style Sheet
When the whole HTML Document has an unique style you can use an Internal Style sheet. These styles define within the header segment of the HTML document.
Ex:
<html>
<head>
<style type = "text/css">
p {
align : right;
color : blue;
}
body {
margin-left : 30px;
margin-right: 30px;
}
</style>
</head>
</html>
When you using P tag or BODY tag within the HTML document above styles automatically apply to the element.
3. External Style Sheet
External Style sheet is the ideal style sheet, it suppors for many pages and can be changed the style from editing a one location without changing the whole documents. All the styles stored in a seperate css file & called it when you needed to apply. Stylesheet calling by using link tag and specify this also inside the header segment.
Ex:
<html>
<head>
<style type = "text/css" rel = "stylesheet" href = "customStyle.css" />
</head>
</html>
An External Style sheet should be with the extention of ".css" and write without html tags. You can use any text editor like HTML coding. Above internal style sheet write here as follows (Do not leave spaces between the property, value and the units)
align:right;
color:blue;
}
body {
margin-left:30px;
margin-right:30px;
}
No comments:
Post a Comment