The CSS is attach to the HTML element, for example <h1 style="colour, blue,">this would make the colour of the heading title blue.
Inline on Page (Internal)
THe CSS is described in the <HEAD> tag. for example
<head>
<style>
h1{
colour:blue;
}
</style>
</head>
External CSS Page
<head>
<link rel="sytlesheet" href="style.css">
</head>
With this code, all h1 layout can change without changing anything in the coding of the style.
CSS - Cascading Style sheets
HTML is used for layout
CSS is used to format web pages
The structure of CSS
A CSS rule has two maiun parts: a selector and one or two declarations. Properties and values help create the things you want, for example Font size or Colour
Inline
Advantages
- Lower The HTTP Requests: This means that the website loads faster than External CSS
- Quick-Fixes: Fix to the HTML source are imenant, but the fix should be when you have spare time to do it.
- Smaller Websites: With smaller websites means using Inline CSS would help serice providers and the user.
- Testing: Inline CSS is used by web designers when starting a new project. This helps them because it is much simpler to scroll up the source rather than changing the source. When detecting a problem is not so easy to fix, when debugging a page source.
- Every Element: In every element, you must include every inline styles. This causes download time for the viewer and maintenance work for a designer.
- Over-doing: Inline CSS can be over done because of the fact that they are the most specific out of the three CSS.
- Pseudo-elements: In inline CSS, it is hard to do pseudo-elements in inline styles. E.g. Inline CSS, the link is all you can style with, unlike in external and internal CSS you can style a lot more features in your CSS.
Advantages
- One style of same element: In this type of CSS, you do not need to input every element. All paragraphs in a CSS can be in one font by just adding an inline style tag in the internal HTTP request.
- Pseudo-elements: With internal style sheets, you can style the tag however the user wants too.
- No additional downloads: Unless, this style sheet request for a HTTP, then there are not need for additional downloads.
- Cache Problem: In CSS internal styles, it is compatible with all browsers like Firefox or Chrome.
- Large file Size: In internal CSS, when created offline, it seems that the size is not big, but when its online, the file size increases.
- Multiple Documents: when using internal CSS, you will not be able to use it on multiple web pages.
- Slow Page Loading: Internal CSS usually have less demand for HTTP request, but when used online the pages that are loading is considerably slow when comparing to inline and external CSS.
Advantages
- Full control of page structure: This CSS gives you the allowance to display your webpage without exposing the official appearance of the web page.
- Less loading time: With low file sizes and reduced bandwidth, the external CSS will decrease the amount of loading time in its web pages.
- Reduced file size: By styling text in a separate file, the file size of the CSS will decrease massively. This works by the external CSS already downloaded, making web pages load much faster than before.
- Higher page ranking: This means search engines can look for your web page, it has a greater amount of chances that a user visits your webpage.
- When rendering documents, the external sytle sheets has to be loaded before the documents can be applied.
- It has faults such as when small number of styling definition.
- To be able to import information into a document, there must be an extra download to be able to do the importing.
http://vineetgupta22.wordpress.com/2011/07/09/inline-vs-internal-vs-external-css/
http://www.schoolsucks.com/paper/Advantages-And-Disadvantages-Of-External/15415.html
http://webdesign.about.com/od/beginningcss/qt/tipcssinlinesty.htm
http://rainbow.arch.scriptmania.com/css/cascading_style_sheets.html
http://www.basictips.com/tips/article_92.shtml
No comments:
Post a Comment