HomePromotionsGraphic Design Printing Solutions Website Design Sign Up Get Started Now!
Website Design > Support / FAQ > Types of CSS
Custom Website Design and Development

Inline Vs Internal Vs External CSS

Almost everybody knows what is CSS as it stands for  stands for Cascading Style Sheets. It’s a style sheet which defines  how to display HTML elements. CSS were added to HTML 4.0 to solve a problem of designing same thing again and again which little modifications. CSS is the main and the best thing and almost only thing for Designers to work on Designing.

Types of CSS?

There are ways to do Designing/CSS that are known as:
  1. Inline CSS
  2. Internal CSS
  3. External CSS
Let me give a small example of each to understand it better.

Inline CSS

An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly! To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph:


<p style="color: sienna; margin-left: 20px”>This is a paragraph.

” would show the paragraph as

“This is a paragraph.”

Internal CSS

An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, by using the <style> tag, like this:

<head>

hr {color:sienna;}

p {margin-left:20px;}

body {background-image:url(“images/back40.gif”);}

</style>

</head>

External CSS

An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:

<head>

css” href=”mystyle.css” />

</head>

An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a .css extension. An example of a style sheet file is shown below:

hr {color:sienna;}

p {margin-left:20px;}

body {background-image:url(“images/back40.gif”);}

Which one to use?

The major question is which CSS would be used. After going through many web sites and articles, I am here writing my views.

Inline CSS

Advantages:
Inline CSS can be used for many purposes, some of which include:
  1. Testing:  Many web designers use Inline CSS when they begin working on new projects, this is because its easier to scroll up in the source, rather than change the source file. Some also using it to debug their pages, if they encounter a problem which is not so easily fixed. This can be done in combination with the Important rule of CSS.
  2. Quick-fixes:There are times where you would just apply a direct fix in your HTML source, using the style attribute, but you would usually move the fix to the relevant files when you are either able, or got the time.
  3. Smaller Websites: The website such as Blogs where there are only limited number of pages, using of Inline CSS helps users and service provider.
  4. Lower the HTTP Requests: The major benefit of using Inline CSS is lower HTTP Requests which means the website loads faster than External CSS.
Disadvantages
Inline CSS some of the disadvantages of which includes:
  1. Overriding: Because they are the most specific in the cascade, they can over-ride things you didn’t intend them to.
  2. Every Element: Inline styles must be applied to every element you want them on. So if you want all your paragraphs to have the font family “Arial” you have to add an inline style to each <p> tag in your document. This adds both maintenance work for the designer and download time for the reader.
  3. Pseudo-elements: It’s impossible to style pseudo-elements and classes with inline styles. For example, with external and internal style sheets, you can style the visited, hover, active, and link color of an anchor tag. But with an inline style all you can style is the link itself, because that’s what the style attribute is attached to.

Internal CSS

Advantages
Since the Internal CSS have more preference over Inline CSS. There are numerous advantages of which some of important are an under:
  1. Cache Problem: Internal styles will be read by all browsers unless they are hacked to hide from certain ones. This removes the ability to use media=all or @import to hide styles from old, crotchety browsers like IE4 and NN4.
  2. Pseudo-elements: It’s impossible to style pseudo-elements and classes with inline styles. With Internal style sheets, you can style the visited, hover, active, and link color of an anchor tag.
  3. One style of same element: Internal styles need not be applied to every element. So if you want all your paragraphs to have the font family “Arial” you have to add an Inline style <p> tag in Internal Style document.
  4. No additional downloads: No additional downloads necessary to receive style information or we have less HTTP Request
Disadvantages
  1. Multiple Documents: This method can’t be used, if you want to use it on multiple web pages.
  2. Slow Page Loading: As there are less HTTP Request but by using the Internal CSS the page load slow as compared to Inline and External CSS.
  3. Large File Size: While using the Internal CSS the page size increases but it helps only to Designers while working offline but when the website goes online it consumers much time as compared to offline.

External CSS

Advantages
There are many advantages for using external CSS and some of are:
  1. Full Control of page structure: CSS allows you to display your web page according to W3C HTML standards without making any compromise with the actual look of the page. Google is the leading search Engine and major source of traffic. Google gives very little value to the web pages that are well-organized, since the value is little thus many Designers ignore it. But by taking small value may drive much traffic to the website.
  2. Reduced file-size: By including the styling of the text in a separate file, you can dramatically decrease the file-size of your pages. Also, the content-to-code ratio is far greater than with simple HTML pages, thus making the page structure easier to read for both the programmer and the spiders. With CSS you can define the visual effect that you want to apply to images, instead of using images per say. The space you gain this way can be used for text that is relevant for spiders (i.e. keywords), and you will also lower the file-size of the page.
  3. Less load time: Today, when Google has included the Loading time in his algorithm, its become more important to look into the page loading time and another benefit of having low file-size pages translates into reduced bandwidth costs. CSS can help you save some money by offering you. I done a small experiment to check the page load time. I am using the Mobile Internet Connection for testing and for that first I cleared the web cache of the website and visited http://lawmirror.com for first time after clearing cache. The total time taken to load the website is 16 seconds. Now I hit the F5 button and the time taken to load the website is 8 seconds. Using external CSS has reduced the page load timing. It might explain it how it reduces the time, when you first visited the website, it has downloaded all the contents + external CSS and while downloading external CSS, it has marked the CSS with the time stamp with the time stamp of the web server. Now when you hit F5, it again starts working but this time the browser compare the time stamps of downloaded CSS with Web Server CSS and due to same time stamp, it doesn’t downloaded the CSS external file from server and using the already downloaded time, which make the Web Page Loading time faster as com paired to first time. If you check under Firebug or Chrome tools it will tell 304 Not Modified, meaning the file is not modified since last downloaded file, and thus ignoring to download the external CSS file.
  4. Higher page ranking : In the SEO, it is very important to use external CSS. How it gives, let me explain, In SEO, the content is the King and not the amount of code on a page. Search engines spider will be able to index your pages much faster, as the important information can be placed higher in the HTML document. Also, the amount of relevant content will be greater than the amount of code on a page. The search engine will not have to look too far in your code to find the real content. You will be actually serving it to the spiders “on a platter”. CSS will help you create highly readable pages, rich in content, which will prove extremely helpful in your SEO campaign. As you very well know, better site ranking means better visibility on the web, and this can translate into more visitors and, ultimately, into increased sales or number of contracts. For more details lets use some code to understand:

First file – <h1 style=”text-align:center; margin-top:25px; margin-bottom:25px;”>abc

Second File – h1{text-align:center; margin-top:25px; margin-bottom:25px;} <h1>

For Designer, the both things are same but for SEO and Spider point of view and they are different. Spider have to extra time to remove the style tag from the first file and which consumers say 2 secs, but in second file the content is directly available to spider and thus can easily index the content without looking in CSS, which give priority of second file over first file. Spider will index both the pages but when it gets the contents goods, it will first index those and then go for other pages with doing some work.
 

Auto Responder in cPanel
     The Auto Responder functionality allows for cPanel to send a pre-made response to e-mails that are received by a given e-mail account.
Types of CSS
     Almost everybody knows what is CSS as it stands for  stands for Cascading Style Sheets. It’s a style sheet which defines  how to display HTML elements. CSS were added to HTML 4.0 to solve a problem of designing same thing again and again which little modifications. CSS is the main and the best thing and almost only thing for Designers to work on Designing.