CSS Tutorial - CSS Introduction








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.

Example

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>

Click to view the demo

The code above set the background color and foreground color.

Styles are normally saved in external .css files.





Browser Styles

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.

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>

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.