Different ways to implement CSS

There are four different ways to use CSS in your web pages: – Inline CSS – Embedded CSS/Internal CSS – Linked CSS/External CSS – Importing CSS

Inline CSS Inline styles are CSS styles that are applied to one element using the style attribute. CSS can be defined for single tags by simply adding style="style definition : style attribute;" to the tags. Inline CSS has the highest priority out of external, internal, and inline CSS. This means that you can override style rules that are defined in external or internal by using inline CSS

If you want to add a style inside an HTML element all you have to do is specify the desired CSS properties with the style HTML attribute. Syntax: <element style=“style1: value1; style2: value2; style3: value3;…”> Eg: Content

Advantages The only styles that have higher precedence. Inline styles are easy and quick to add. You don't need to create a whole new document (as with external style sheets) or edit a new element in the head of your document (as with internal style sheets).

Disadvantages Disadvantages: – doesn't separate document structure from formatting so use sparingly, if at all – Increase maintenance work for the designer and download time for the reader

Internal or Embedded CSS CSS can be defined for entire pages by simply adding a style definition to the head section. An internal style sheet should be used when a single document has a unique style. When using internal CSS, you must add a new tag, style, inside the tag.

You can embed style definitions in a document head using the following form: style declarations Where style declarations are the declarations of the different styles to be applied to the document

Advantages By defining styles for entire pages, you will gain the freedom to easily change the styles even after the entire page has been made. Since the styles are only defined in one place, the page size will be smaller, and thus faster to load. Internal style sheets affect only the page they are on. Internal style sheets can use classes and IDs. Internal style sheets don't require that you upload multiple files. Internal styles may have higher precedence than external style sheets.

Disadvantages They affect only the page they are on. Internal style sheets increase page load times.

External CSS Because an embedded style sheet only applies to the content of one file, you need to place a style declaration in an external style sheet to apply to the rest of the Web site An external style sheet is a text file that contains style declarations – It can be linked to any page in the site, allowing the same style declaration to be applied to the entire site

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 tag. An external style sheet is simply a text file containing a list of CSS rules sets.

Syntax:

Advantages It keeps your website design and content separate. It's much easier to reuse your CSS code if you have it in a separate file. Instead of typing the same CSS code on every web page you have, simply have many pages refer to a single CSS file with the "link" tag. You can make drastic changes to your web pages with just a few changes in a single CSS file. It allows a single style sheet to control the rendering of multiple documents. This results in a time-savings for the author, a savings of space for the web server, and less download time for the user.

Disadvantages If the user downloads the page and if he forgot to download the linked css then he/she will not be able to view the page with all the styles.

Importing CSS A style sheet may be imported using the import statement. statements must occur at the start of the style sheet. Any rules specified in the style sheet override rules in the imported style sheets. Imported style sheets can be modularised in a number of ways.

url(nameof file.css) “nameof file.css”

Limitations of CSS Limited transcription capabilities. In css1 context specification limited. Non programmable. Western – language orientation (left to right)

Advantages of CSS Workflow – Faster downloads. – Streamlined site maintenance. – Global control of design attributes. – Precise control (advanced) Positioning Fluid layouts Cost savings – Reduced bandwidth costs. One style sheet called and cached. – Higher search engine rankings. Cleaner code is easier for search engines to index Greater density of indexable content.

 Faster download = better usability – Web usability redesign can increase the sales/conversion rate by 100% – Css requires less code. – Tables require spacer images. – Entire table has to render before content. – Css can control the order that elements download (content before images)  Increased reach – Css website is compatible with many different devices. – In 2008 an est. 58 million pda’s will be sold (source: et forecast.com) – 1/3 of the world’s population will own a wireless device by 2010.