CSS Tutorial - CSS Inclusion

Inline style

An Inline Style is a style added to an element using the style attribute.

<!DOCTYPE HTML>
<html>
<body>
   <a href="http://java2s.com"  
      style="background-color:grey; color:white"> 
      Visit the   website<!--from ww  w  . java2 s. com-->
   </a>
   <p>This is a test.</p>
   <a href="http://w3c.org">Visit the W3C website</a>
</body>
</html>

Click to view the demo

Embedded Style

You can use the style element to define an embedded style.

The selector in this example is a, which instructs the browser to apply the style to every a element in the document.

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
a {<!--  ww w.j  av  a2  s . c  o  m-->
    background-color:grey;
    color:white
}
</style>
</head>
    <body>
        <a href="http://java2s.com">Visit the website</a>
        <p>This is a test.</p>
        <a href="http://w3c.org">Visit the W3C website</a>
    </body>
</html>

Click to view the demo

Example

You can define multiple styles in a single style element.

The following code shows a style element that has two styles.

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
a  {<!--   w w w  .  j  a  v a2s  .  co m-->
    background-color:grey;
    color:white
}
span  {
    border: thin  black solid;
    padding:  10px;
}
</style>
</head>
<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

External Stylesheet

You can create a separate stylesheet file with .css file extension and define the same set of styles in each of your HTML pages.

The following code shows the contents of the file styles.css.

a  {
    background-color:grey;
    color:white
}
span  {
    border: thin  black solid;
    padding:  10px;
}

You don't need to use a style element in a stylesheet. You just use the selector, followed by the declarations for each style that you require.

You can then use the link element to bring the styles into your document.

<!DOCTYPE HTML>
<html>
<head>
   <link rel="stylesheet"  type="text/css"  href="styles.css"></link>
</head>
<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>

You can link to as many stylesheets as you need.

As with the style element, the order in which you import stylesheets is important if you define two styles with the same selector.

The one that is loaded last will be the one that is applied.

Import from Another Stylesheet

You can import styles from one stylesheet into another using the @import statement.

The following code is from combined.css File. It imports the content from the styles.css.

@import "styles.css";
span  {
    border: medium black dashed;
    padding:  10px;
}

You can import as many stylesheets as you want, using one @import statement per stylesheet.

The @import statements must appear at the top of the stylesheet, before any new styles are defined.

The following code links to a Stylesheet That Contains Imports

<!DOCTYPE HTML>
<html>
    <head>
       <link rel="stylesheet"  type="text/css"  href="combined.css"/>
    </head>
    <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>