In all but one browser, styling these new elements is pretty simple. Although you can use the new HTML5 elements now, most browsers even current ones don’t necessarily understand them. They don’t do anything special with them and treat them like unknown elements you make up.
There is three ways to provide CSS styles for a web page.
Use an external style sheet by coding a link element in the had section
<link rel="stylesheet" href="styles/main.css">
Embed the styles in the head section
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 87.5%;}
h1 { font-size:250%;}
</style>Use the style attribute to apply styles to a single element. <h1 style="font-size: 500%; color: red;"> Valley Town</h1>
The sequence in which styles are applied
1. Styles from an external style sheet
2. Embedded styles
3. Inline style
For internal stylesheets the CSS rules are wrapped within the HTML style element: <style type="text/css"> <!-- --> </style>
The style element informs the browser that the content inside the element comprises formatted CSS rules and that the browser should be prepared to process the content. The HTML comment is there to shield older browsers that do not know how to render CSS rules appropriately. For most modern browsers, the HTML comment is no longer needed.
Use different kinds of selectors to target different portions of web pages to style, as shown:
<html>
<head>
<title>CSS Example</title>
<style type="text/css">
<!--
* {
font-family: verdana, arial, sans-serif;
}
h1 {
font-size: 120%;
}
#navigation {
border: 1px solid black;
padding: 40px;
}
li a {
text-decoration: none;
}
p {
font-size: 90%;
}
-->
</style>
</head>
<body>
<h1>Title of Page</h1>
<p>This is a sample paragraph with a
<a href="http://yourlink.com">link</a>. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna <em class="warning">aliquam erat volutpat</em>. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.<p> <ul id="navigation">
<li><a href="http://yourlink.com">Apples</a></li>
<li><a href="http://yourlink.com">Bananas</a></li>
<li><a href="http://yourlink.com">Cherries</a></li>
</ul>
</body>
</html>