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>
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>
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>
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.
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>