Usually you can attach stylesheet (css) in three different way to the HTML file. Here below are three different ways I described. Each method has positive and negative aspects.
- Inline Style
- In HTML Head Tag
- Link External CSS File
Inline Style:
You can write inline style by adding style=”…” directly into html tag. Inline style people don’t use so often now as it is hard to manage and modify. However in some cases where you can’t attaché or link the stylesheet, the inline style is better option to use e.g html email newsletter. Where you can’t attaché external stylesheet.
Positive:
- Do not require any external file.
Negative:
- Hard to manage and modify in long tasks.
- Not reusable.
- Confusing
Example:
<div style="”width: 300px; border: 1px;">Hello! CSS</div>
In HTML Head Tag:
You can write style into html head tag too. You need to wrap all classes with ‘style’ tags into html ‘head’ tag. It may be useful if you have only one page and don’t want to use it for other pages. Also may good for html email newsletter. Where you can’t attaché external stylesheet.
Example:
<html>
<head>
<style type="text/css">
your stylesheet class here...
</style>
</head>
<body>
your content here...
</body>
</html>
Positive:
- Easy to manage than Inline style
- Reuse Class and IDs on the same page
Negative:
- Cannot use for other pages.
- Hard to manage if it is long enough
Link External CSS file:
Design html pages by linking external stylesheet is most usable and efficient way. As the biggest plus point of this is reusable and manageable.
Also it is easy to link any external stylesheet to your html page. You can use absolute or relative path to link the stylesheet. Even you can link from other server too. To link stylesheet you all need to do is create one css file e.g. style.css and place into your any web directory and use below code into html tag.
Example
<link rel="stylesheet" type="text/css" href="style.css" />
Where style.css is your file name and path. Now it is on the root of the page but as I said above you can use any path absolute or relative to link stylesheet.
Positive:
- Manageable
- Easy to modify
- Can be reuse without limit
- One line code to link
Negative:
- Create an additional file
I hope this information would be helpful for beginner. If you have any questions feel free to ask me.
Please rate this
(2 votes, average: 4.00 out of 5)
Loading ...
All material | content of this post is original and copyrighted to Jatin Soni.
