Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts
Thursday, March 3, 2011
What is external Style Sheet?
An external type of style sheet is a separate file apart from the HTML file(s). The external style sheet is given a .css extension. It is associated to the HTML document using a link element or an @ import directive in the head of the html document. Any html document associated to an external style sheet gets the styles, and that is where the maintenance power of CSS is found. Not only do external style sheets allow reuse of rules within one specific document. They allow the style sheet itself to be shared across multiple documents. Using external CSS allows you to maintain a single style sheet for an entire site.
What is embedded style?
An embedded style controls the appearance of a single document. CSS rule(s) are placed in the head of the document via the style element. Embedded styles can be really helpful when you are first learning to code CSS, because it is very easy to edit and troubleshoot the code. Similar to inline styles, embedded CSS defeats the purpose of separating content and presentation. An embedded style sheet can be useful when a single document has a unique style. If the same style sheet is used in multiple documents, then an external style sheet would be more appropriate. Embedded styles are sometimes referred to as internal styles
for example:
Place the following code between the <head>...</head> tags of your HTML document:
<style type="text/css" media=screen>
<!--
p {font-family: georgia, serif; font-size: x-small;}
hr {color: #ff9900; height: 1px }
a:hover {color: #ff0000; text-decoration: none}
-->
</style>
for example:
Place the following code between the <head>...</head> tags of your HTML document:
<style type="text/css" media=screen>
<!--
p {font-family: georgia, serif; font-size: x-small;}
hr {color: #ff9900; height: 1px }
a:hover {color: #ff0000; text-decoration: none}
-->
</style>
Write the start and end tag for CSS to embed in HTML?
Embedded Style Sheets refer to when you embed style sheet information into an HTML document using the style element. You do this by embedding the style sheet information within <style>...</style> tags in the head of your document.
Disadvantages of CSS?
Browser compatibility :
Browsers have varying levels of compliance with Style Sheets. This means that some Style Sheet features are supported and some aren't. To confuse things more, some browser manufacturers decide to come up with their own proprietary tags.
Fortunately, browser compatibility is becoming less of an issue as the latest browser versions are much more standards-compliant than their earlier counterparts.
Browsers have varying levels of compliance with Style Sheets. This means that some Style Sheet features are supported and some aren't. To confuse things more, some browser manufacturers decide to come up with their own proprietary tags.
Fortunately, browser compatibility is becoming less of an issue as the latest browser versions are much more standards-compliant than their earlier counterparts.
Advantages of CSS?
- CSS saves time
- Pages load faster
- Easy maintenance
- Superior styles to HTML
- Improved Search Engine Results:
- Sites Load Faster:
- Design Separated from Content:
- Displayed on Various Media:
- Compatibility with Browsers:
When most of us first learn HTML, we get taught to set the font face, size, colour, style etc every time it occurs on a page. This means we find ourselves typing (or copying & pasting) the same thing over and over again. With CSS, you only have to specify these details once for any element. CSS will automatically apply the specified styles whenever that element occurs.
Less code means faster download times.
To change the style of an element, you only have to make an edit in one place.
CSS has a much wider array of attributes than HTML.
With use of CSS, you can keep your HTML code much cleaner. As a result search engine bots do not have to separate the real content from the junk code. You are also free to put any content anywhere in your document with CSS. This will aid the search engine crawlers to identify the important content first.
As the style sheets are lighter, it will enable the websites to load faster. Since table layouts are no longer required in CSS, the sites take up less memory and load faster. The users will find it easier to view a site designed using CSS as it will load in a fast pace and can be swiftly navigated from one page to other.
A web designer has more control over a website with CSS as a style sheet can be linked to all your web documents. For a slight modification, what you have to do is edit a single file, just the style sheet. Information related to layout, positioning, style, font and color are all put in a style sheet for the entire site.
A web designer has great flexibility in presenting the content. Different style sheets can be used for different media without even the user knowing it. Style sheets can be made for different media like the printer and PDA.
Adhering to the web standards set by W3C, a designer is making it obvious that the content of a site is validated in all browsers. But with the introduction of a new browsers, it is not possible to test a website for all probable browsers. But if the coding is done following to a standard, a major part of the job is already done.
Subscribe to:
Posts (Atom)