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:<p style=“font-color:red; fontsize:10px;”> Content </p>

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 type=“text/css”>style declarations

</style>

• 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 <link> tag.

• An external style sheet is simply a text file containing a list of CSS rules sets.

• Syntax:<link rel="stylesheet" type="text/css" href=“Stylename.css">

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.

• All @import 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.

• Syntax:@import url(nameof file.css)

or@import “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.