Some HTML elements have an impact on presentation. When the browser encounters a element, it will change the way the content is displayed.
The code element is one of them.
When the browser encounters the code element,
it displays the enclosed content using a fixed-width font.
The use of HTML elements to manage presentation is now strongly discouraged.
You should use HTML elements to define the structure and use Cascading Style Sheets (CSS) to control the presentation.
CSS stands for Cascading Style Sheets. It defines how to display HTML elements.
The following HTML code includes CSS for styling.
<!DOCTYPE HTML>
<html>
<head>
<style>
a { <!--from w w w . j a v a 2 s . c om-->
background-color:grey;
color:white
}
</style>
</head>
<body>
<a href="http://java2s.com">Visit the website</a>
</body>
</html>The code above set the background color and foreground color.
Styles are normally saved in external .css files.
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
There are two other sources of styles that you need to know about.
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>
</html>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.