CSS Tutorials - Introduction To CSS Basics

Home >> Tutorials/FAQs >> CSS Tutorials >> Index

By: FYICenter.com

Part: 1 2 3 4 5

(Continued from previous part...)

What Is Style Property Inheritance?

Style property Inheritance is a rule that allows a style property of a child HTML tag to inherit the same property of the parent HTML tag, if that property is not defined on the child tag. This inheritance rule is very important because a lots of style properties are defined on the parent tags and inherited to the child tags. The CSS below shows you how to define most of the font properties on tags and let and to inherit them:

<html><head>
<title>CSS Included</title>
<style type="text/css">
  BODY {background-color: black}
  P {font-family: arial; font-size: 12pt; color: yellow}
  STRONG {font-weight: bold}
  EM {font-style: italic}
</style>
</head><body>
<p>Welcome to <strong>FYICenter.com</strong>. 
You should see this text in <em>yellow</em> 
on black background.</p>
</body></html>

As you can, the font family, size and color in and are inherited from .

What Is CSS Cascading?

CSS cascading is another rule that allows multiple definitions on the same style property of the same HTML tag instance. The Web browser will use cascading order rules to determine the winning definition. Multiple definitions of the same property could happen because:

Multiple CSS files can be attached to a single HTML document.
CSS selectors can overlap on HTML tag instances.
External CSS definitions can mixed with CSS definitions included inside HTML Tag instances.

What Are the CSS Cascading Order Rules?

The most important cascading order rules are:

A specified CSS definition wins over a default CSS definition in the browser.
A CSS definition with a contextual selector wins over a CSS definition with a tag selector.
A CSS definition with a class selector wins over a CSS definition with a contextual selector.
A CSS definition with an id selector wins over a CSS definition with a class selector.
A CSS definition included in the HTML tag instance wins over other CSS definitions.
A later CSS definition wins over an earlier CSS definition.

Note that cascading order rules are applied in the order as listed above.

How To Remove the Top White Space of Your Web Page?

The top white space of your Web page is provided by the browser's default CSS definition of the margin-top property on the BODY tag. You can remove this white space by adding your own margin-top definition. Because of the cascading order rules, your definition wins over the default definition. Here is a CSS example:

<html><head>
<title>CSS Included</title>
<style type="text/css">
  BODY {margin-top: 0px}
  BODY {background-color: white}
  P {font-family: arial; font-size: 12pt; color: black}
</style>
</head><body>
<p>Welcome to FYICenter.com.<br> 
This paragraph should appear right below the top edge 
of the browser window without any white space.</p>
</body></html>

How To Set Different Text Fonts Inside Tables?

If want to set the text font inside tables different than outside tables, you can use CSS definitions with contextual selectors. In the CSS example below, Both selectors "TABLE P" and "P" match those tags inside the table, but the contextual selector "TABLE P" wins the tag selector "P" based on the cascading order rules. So you will see text inside the table in blue "serif":

<html><head>
<title>CSS Included</title>
<style type="text/css">
  /* matches P instances inside TABLE only */
  TABLE P {margin-top: 0px; margin-left: 20px; 
    font-family: serif; font-size: 12pt; color: blue}

  /* matches all instances of tag P */
  P {font-family: arial; font-size: 14pt; color: black}
</style>
</head><body>
<p>Welcome to FYICenter.com resource listings:<br> 
<table>
<tr><td><p>www.w3.org - W3 home page.<p></td></tr>
<tr><td><p>www.php.net - PHP home page.<p></td></tr>
<tr><td><p>www.google.com - Google search.<p></td></tr>
</table>
</body></html>

(Continued on next part...)

Part: 1 2 3 4 5

Selected Developer Jobs:

More...