Jump to content
Killersites Community
johnmartin

Difference Between The Types Of Css

Recommended Posts

Inline CSS:

 

Inline styles are the least flexible type of style to implement.

For example:

<p style="color: red">

Paragraph text goes in here </p>

 

Internal CSS:

 

With internal stylesheets, a web page's styles are all specified at the top of the page code, within the <head> tag for the page.

For Example:

<head>

 

<style type="text/css">

h1 {color: blue; font-weight: bold}

p {color: gray}

</style>

 

</head>

Edited by Andrea
Link Deleted

Share this post


Link to post
Share on other sites

...and not particularly part of the question... External CSS. A separate Style sheet that all pages reference so you need not repeat styles on every line or page.

 

10 repeated inline styles per page, 10 pages, 1000 repeat styles.

 

Internal CSS, same style once per page, 10 repeat styles.

 

1 style defined in a external style sheet... 1 style for all 10 pages and all 1000 lines.

 

So you can change 1,000 lines, 10 pages or one page, your choice.

 

Always use external style sheets, internal and inline CSS needs to be used very rarely... only for some 1 off page where a style will only be used on that one page or one line out of an entire web site.

Share this post


Link to post
Share on other sites

As LSW say, choice is our what we want to do with external, internal and inline style sheets. But can I know what you want to explain by following :

 

"10 repeated inline styles per page, 10 pages, 1000 repeat styles.

 

Internal CSS, same style once per page, 10 repeat styles.

 

1 style defined in a external style sheet... 1 style for all 10 pages and all 1000 lines."

 

:mellow:

Share this post


Link to post
Share on other sites

@ SteveByross

 

Inline styles pertain to a line on a page. So if you repeat the inline style 10 times on one page and your web site is 10 pages... if you wish to change the style you have to change 1000 lines.

 

Internal styles, aka in the header, you still have 10 headers you have to change by hand for the same change you made above to effect a line..

 

If you use an external style sheet and you want to change the look used above... every line of every page references one style in an external sheet. So if 10 pages or 10,000 pages, all you make is one single change to your style sheet and all 10 - 10,000 pages all show the same style immediately.

 

So wold you rather change one line, 10 lines or 1,000 lines?

 

If you do it right, you never have to change your code again, but you can change the look of the page by changing one style sheet. make multiple sheets and you could use a script to call up a Christmas style sheet between two dates and then go back to the original design all automatically.

 

Go to CSS Zen Garden and click on the links on the right side. You are not changing pages, just loading a different external style sheet each time and changing the look of the same page. You cannot do that with inline or internal css.

Share this post


Link to post
Share on other sites

No need to understand the difference, it is highly recommended to use an external style sheet. Inline is worst of all three types.

 

I totally disagree. Understanding anything is never useless. There is a perfect good reason to use inline styles under certain circumstances, but one has to understand the difference in order to make that determination.

Share this post


Link to post
Share on other sites

The only time inline styling is useful is when you are styling something that is unique for that very 'spot' on your entire website. But as soon as it is applied more than one time, inline styling is no longer a good idea.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×