WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You

WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

1Accespted Weights in StyleSheet Thu Oct 14, 2010 8:17 pm

Unknown Data

Unknown Data
Registered Member
Registered Member
Weights in StyleSheet
Learn CSS - part 4


The "weight" of a stylesheet!
Normally can we find the "weight" of a stylesheet that depends on the power of it. If we fx have used a Inline style, will the power of that stylesheet overwrite a Internal stylesheet, because of the inlines "weight". A Internal stylesheet will also got a bigger "weight" than a External stylesheet.
Here are a list of what that "beats" what.

1. Inline style
2. Internal stylesheet
3. External stylesheet
4. Browserens default stylesheet
5. Multible stylesheets

If we build our page about the above, can we have multiable stylesheets. As an example could we have a External stylesheets as the global one, and then a Internal or Inline style as a special one on some HTML pages.
Here could we illustrate an example, were we start with a External stylesheet (saved as "externalstylesheet.css") that looks like this:
Code:
body {
color: #000000;
background: #33ff00;
}
p {
color: #990066;
font: 15px arial;
}
h1 {
color: #3300ff;
font: bold 25px arial;
}
The document itself
Our first HTML document looks like this and refer only to our External stylesheet.
Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="externalstylesheet.css" />
</head>
<body>
<h1>HTML document 1</h1>
<p>Backgroundcolor of page is green. In HTML document 2 will the background turn yellow because the Internal stylesheet got a bigger power.</p>
<p>This line will turn yellow by switching to the Inline style. This change is also aviable becuase of the power and size.</p>
</body>
</html>
Our HTML document number 2 refer also to our External stylesheet, dog will the background color be #FFFF00 (yellow) and in this coincidence will the line turn red. We keep on going with our examples, by checking the source under here.
Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="02b-ekssheet.css" />
<style type="text/css">
<!--
body {
background: #ffff00;
}
-->
</style>
</head>
<body>
<h1>HTML document 2</h1>
<p>Backgroundcolor of page is yellow, because the Internal stylesheet is higher than the External.</p>
<p style="color: red;">This line is red, because we know that a Inline style is higher than a Internal and External stylesheet.</p>
</body>
</html>

Notice that the title of the documents with blue dosen't change. That's because it's the External stylesheet that deiceds.

That was a lot of things you learned here, and in the further lessons will your surely got some more info about the simple thing in CSS.

Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators.

http://woops.dk

View previous topic View next topic Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum