Search within TutorialsPark

CSS Insert


Learn different Ways to Insert(Add) CSS styles to Webpages.


Adding CSS styles to Webpages.

Inline CSS

Embedded Styles

External Styles


Inline CSS

1.The Most simple way to add CSS styles to webpages is Inline CSS Method. But, its also the most inefficient of all.

2. The Inline style is applied by simply defining the CSS styles within the HTML element via its style attribute.

3.Inline CSS has no selector at all, since the settings are applied to the specific elements only.

4. The biggest disadvantage is that it cannot be reused again, style settings have to be defined for each element seperately.

Example:How to apply inline CSS?.

Give it a TRY! » Note: Incase of any style changes, each element has to be edited seperately. Thus very inefficent to code , read and maintain.


Embedded CSS

1. Next approach to apply CSS to your Webpages is Embedded CSS, this is done using the HTML element <style> .

2. All style declarations are done within the opening and closing of <style> tags only.

3. Ideally , the <style> tags must be within the <head> element, Also, the styles are applicable to the elements on the current page only.

4. If you want to apply the styles to the entire website than you will have to repeat the style on all the webpages.Hence very inefficient for large websites.

Example: Embedded CSS

Give it a TRY! » Note: Though inefficient , this method can be used for certain specific design requirements for few selected webpages.

External CSS.

1. The most efficient way is to put all style definitions on a single plain text file, and then link the file to all webpages. The external file is called external CSS.

2. The external stylesheet files have an extension as .css.Eg: mystyle.css

3. In case of any style change, the changes done affect all the linked webpages.Thus, its highly efficient and maintable.

4. Inorder to link the external stylesheet to you webpage just put the <link> element inside the document's <head> element with the URL of the stylesheet.

External CSS file (mystyle.css)

CSS Example: External stylesheets

Give it a TRY! » Note:The rel attribute denotes the relation between the external file and the webpage