Browser Styles

Description

Browser uses Cascading and inheritance to determine which values to use for properties when displaying an element.

Each element has a number of CSS properties.

For each of those properties, the browser needs to step through all of the sources of styles it has.

You have seen three different ways you can define styles

  • inline
  • embedded
  • external stylesheet

There are two other sources of styles that you need to know about.

Browser Styles

The browser styles or user agent styles are the default styles a browser applies to an element if no other style has been specified.

These styles vary slightly between browsers.

The following code shows a simple HTML document that contains no styles.


<!DOCTYPE HTML>
<html>
<body>
    <a href="http://java2s.com">Visit the  website</a>
    <p>I  like <span>apples</span> and  oranges.</p>
    <a href="http://w3c.org">Visit the   W3C  website</a>
</body><!-- ww w  .  j  a  v a2 s  . c  om-->
</html>

Click to view the demo

The text content of the link is displayed in blue and is underlined.

The browser is applying a style similar to the one shown in the following code.


a  {
    color: blue;
    text-decoration:  underline;
}

Browsers don't have default styles for every HTML element.





















Home »
  HTML CSS »
    CSS »




CSS Introduction
CSS Background
CSS Border
CSS Box Layout
CSS Text
CSS Font
CSS Form
CSS List
CSS Selectors
CSS Others
CSS Table