Session 7 Examples

Embedded Styles | Inline Styles | External (or Linked) Styles

To use these examples, type (or copy) the code into a new document, save as an htm file, then view in your browser. Modify the code to see what effect it has on the output. Experiment. Play.
Detailed instructions are available here

Note that each <html> block has to be saved as a separate htm file.

Embedded Styles

<html>
<head>
<title>Embedded Styles</title>
<style>
body{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #3300FF;
  background-color:#000000;
}

h1{
font-family: "Courier New", Courier, monospace;
color: #3300FF;
}
</style>
</head>
<body>
<h1>Embedded Styles</h1>
<p>Using embedded styles I've set the font family, size, and color for this document. I can control the appearance of virtually every element of the html document with styles.</p>
<p>Is that cool or what?</p>
</body>
</html>

(top)

Inline Styles

<html>
<head>
<title>Inline Styles</title>
<style>
body{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #FFFFFF;
  background-color:#000000;
}

h1{
font-family: "Courier New", Courier, monospace;
color: #3300FF;
}
</style>
</head>
<body>
<h1>Inline Styles</h1>
<p><span style="font-size: 36px; font-family: "Courier New", Courier, monospace">U</span>sing inline styles, we can control the appearance of <span style="color: red">individual elements</span> - even individual characters if we like.</p>
</body>
</html>

(top)

External Styles

/* Save this file as styles.css */

a{
color: #008000;
text-decoration: none;
}

a:hover{
color: #FF0000;
text-decoration: underline;
}

b{
  color: #FFFF00;
  font-size: large;
  font-weight: normal;
}

body{
  background-color: #000000;
  color: #FFFFFF;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

.note{
  background-color: #FFB2B2;
  border: 2px solid #FF0000;
  color: #FF0000;
  margin: 10px;
  padding: 5px;
  width: 80%;
}

p:first-letter{
font-size: x-large;
}

.tiny{
font-size: xx-small;
}

<html>
<head>
<title>External Styles</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>External Stylesheets</h1>

<p>If you define your styles in external style sheets you can link the style sheet to multiple documents (or even your entire website)., Then if you want to change the appearance globally, you only have to make the change in one place. This can save a <b>lot</b> of time!</p>

<div class="note">
<p>You'll be amazed by the degree of control that CSS gives you.</p>
<p>Start with the basics and experiment.</p>
</div>

<p>Here's an example of a hyperlink: <a href="http://www.google.com">www.google.com</a></p>

<p class="tiny">Always read the fine print!</p>
</body>
</html>

(top)