What is CSS:
CSS is the abbreviation of a cascading style sheet and is used to represent (to make beautiful) the HTML document. It is known as cascading because whenever we apply one or more styles to any HTML element, CSS will follow a rule according to which the most specific style declaration got the priority. I've explained the difference between inline, embedded, and external CSS in this post, so please read till the end and perform some practice to get a better understanding of the concept. In this way, you can use the idea when presenting your HTML documents.
Types of CSS?
There are three types of CSS that are known as:
- Inline CSS
- Embedded or Internal CSS
- External CSS
Let me describe all the three types one by one with examples for each of them.
Inline CSS:
When we need to apply styles to a small section of HTML elements, we can use inline CSS. To apply inline styles, use the style attribute in the relevant HTML markup/tag, which contains any property. In the example below, I used the "margin-left" and "color" attributes to apply styles on the paragraph tag.
Inline Style Example:
Inline styles are written inside the "style" attribute of the respective tag.
<p style="margin-left:25px;color:blue;">This is my first paragraph</p>Advantages of Inline Style:
- Inline Style: has a high priority among these three styles, which is the main advantage.
- Single HTML document: When you add the CSS code in the same HTML document you don't need to upload multiple files on the server.
- Lower HTTP Requests: When you use Inline Style all the code will be in a single HTML document which mean lower HTTP requests and ultimately your website will load faster than External CSS
- It is recommended to use Inline Style on small (1 to 5 pages) websites or blogs because there is a limited number of pages. It will help service providers as well as users.
Disadvantages of Inline Syle:
- It is a time-consuming task because you add inline style rules to every HTML element which makes your HTML document structure dirty. For example, If you want all your headings(h1) to have font size "20" you have to add an inline style to each <h1> tag in your document.
- In terms of performance, using Inline CSS styles does not seem to be a very persuasive approach because all of your CSS code is in the same HTML document which increases the page size and ultimately leads to increase load time as well.
Embedded or Internal CSS:
In embedded or internal style sheet we put all our style declarations in the head section of the HTML document/page. To do this we have to wrap our style declaration in between the <style> and </style> tag in the head of the HTML document/page.
Internal CSS Example:
Internal styles are written in "style" tag, within the "head" section of an HTML document.
<head>
<style type="text/css">
div{margin-top:20px;}
p{margin-left:10px;}
</style>
</head>Advantages of Internal CSS:
- Internal style saves time because If you want all your headings (h1) to have the font size of “20” you have to add an Inline style <h1> tag in the Internal Style Sheet.
- Because you only need to add the CSS code to the same HTML file, there is no need to upload multiple files which also saves your time.
- Because style information is in the same HTML file, we have fewer HTTP requests.
Disadvantages of Internal CSS:
- When you add CSS code to the same HTML document it will increase the page size and load time.
When we need to add a unique style to a single HTML document, we usually use embedded or internal style sheet.
External CSS:
When we put all style declarations in a separate file and save them with a .css extension, it is called external style sheet or external css. To make an external style sheet, open Notepad, Save it with the name something.css, and boom. Now to use external style sheet on your web page, you need to link it with your web page. To do this, use the <link> tag in the header of an HTML document or web page. E.g
External or Linked CSS Example:
External styles are written in a separate file, and then you can link inside the head element of the HTML document. You can write the external style sheet in any text editor such as notepad or notepad ++ and after that saved with the .css extension.
<head>
<link rel="stylesheet" type="text/css" href="something.css">
</head>Advantages of External CSS:
- Clean Code: Your HTML document structure is clean because all of your CSS code is in a separate .css file.
- Reduced Document Size: By including CSS styles for text in a separate file, you can significantly reduce the file size of the page. Moreover, the ratio of content to code is much greater than that of simple HTML pages, thus making the page structure easier to read for programmers and search engine spiders.
- High Search Engine Ranking: In SEO, the use of external CSS is very important. In SEO, everyone knows that content is king, not the amount of code on the page. Search engine spiders can index your pages faster because important information can be placed higher in the HTML document. Likewise, the amount of related content will be greater than the amount of code on the page. Search engines don’t have to spend too much time in the code to find the real content. You actually provide it to the spider "on the plate" which ultimately helps in getting a higher ranking in search engines.
- Change Whole Website Appearance: It is ideal when many web pages need the same style. Using this method, you only need to change one file to change the overall appearance of the website.
Disadvantages of External CSS:
- In case, you are linking your HTML document with multiple CSS files it can increase your website's load time.
- Before the external CSS is loaded, the page may not render correctly.
I hope after reading this article everyone understands the idea and purpose of using external and internal styles. Please do write in the comment box if you have any questions related to all three styles. i.e., inline, embedded, and external styles.
No comments:
Post a Comment
Please do not enter spam links.