CSS – Inline, Internal and External Styling

Cascading Style Sheets is mainly used for solving the problem of adding styles to HTML multiple times.
There are three types of styles,

Inline CSS

inline-css

The style attribute should be placed inside of any relevant tag and you can apply any CSS property. But you have to apply the styles individually to all the relevant tags, which makes it harder for re-use.
Also, It’s impossible to use style pseudo-elements(hover, visited,active, etc.,) and classes with inline styles.
<p style=“color: blue; border: 1px solid blue;”>This is a paragraph.</p>

Internal CSS

internal-css

This can be used in a single document which has a unique style. You can define any style property in <style> tag in the head section.
It has more advantages over inline styles, but still you have to use individual style tags in all pages.

<head>

<style>
   p {
       color: blue; border: 1px solid blue;
       }
</style>
</head>
<body>
       <p>This is a paragraph</p>
</body>

External CSS :

external-css

You can use any styles in a single separate file linked to any no. of pages. It is ideal choice for many web developers. Because it is highly re-usable, your CSS and HTML contents will be crystal clear as both are in separate files, It is also search engine friendly.

– – – –  styles.css – – – –
p {
     color: blue; border: 1px solid blue;
}
– – – –  index.html – – – –  
<head>
<link href=“styles.css”>
</head>
<body>
       <p>This is a paragraph</p>
</body>

To know more about the advantages and disadvantages of the different CSS styles, visit the below URL:
Inline vs Internal vs External – CSS – https://vineetgupta22.wordpress.com/2011/07/09/inline-vs-internal-vs-external-css/
Vadivel,
Design Team Co-oridinator,
Mallow Technologies.

Leave a Reply

%d bloggers like this: