Jump to content

Difference Between The Types Of Css


johnmartin

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
Link to comment
Share on other sites

  • 2 months later...

...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.

Link to comment
Share on other sites

  • 4 weeks later...

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:

Link to comment
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.

Link to comment
Share on other sites

  • 1 month later...

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.

Link to comment
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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...